`
anysky131
  • 浏览: 171072 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

使用AJAX做的最简易的用户名验证

    博客分类:
  • AJAX
阅读更多
AJAX,最近真的很火.就学了一下.
实在太好的一个东西了!因此做了一个简易的用户验证的功能,体验一下ajax的强大的功能!
它总的来说分了三步:
一、设计一个servlet,用于对用户名进行验证,验证是否在数据库中存在,而在本处没有使用数据库,代码贴出来:

package com.hejianjiao.servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by IntelliJ IDEA.
 * User: Administrator
 * Date: 2008-9-19
 * Time: 11:23:37
 * To change this template use File | Settings | File Templates.
 */

public class AJAXServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
               try {
            response.setContentType("text/html;charset=gb2312");
            PrintWriter out = response.getWriter();
            //取参数
            String older = request.getParameter("name");
            //验证数据合法性
            if (older == null || older.length() == 0) {
                out.print("用户名不能为空!");
            } else {
                //数据验证
                String name = new String(older.getBytes("ISO8859-1"));
                if ("anysky".equals(name)) {
                    //四步,返回数据给客户端
                    out.println("用户名:" + name + " 已经存在!请选择其它的用户名!");
                } else {
                    out.println("用户名:" + name + " 尚未起用!你可以使用!");
                }
            }
        } catch (IOException e) {
            e.printStackTrace();  //To change body of catch statement use File | Settings | File Templates.
        }

    }
}



这个servlet与普通的servlet一样,只有一处不一样,就是普通的servlet,当它验证好了数据后,直接进行页面的跳转,以将结果返回给客户端,而这里没有进行跳转而是什么都没有处理,只将结果打印了出来,打印的数据我们先放在这里,一会就会看到它会被传到哪里了!

二、servlet设计好了,就应该是页面了,页面我们分了两部分来处理:
1、jsp页面本身
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <title>ajax的小例子</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" language="java" src="js/verify.js">

    </script>
</head>
<body>
<center>
    <h1>AJAX的小例子</h1>
</center>
<!--ajax不需要表单数据提交,因此不用写表单标签-->
<input id="name" type="text"/><!--ajax不需要name属性了,它需要一个id属性,和一个button-->
<input type="button" value="校验" onclick="verify()"/> <br/>
<!--result用于存放服务器传过来的信息,开始为空,id定义的属性为了利用dom的方式找到某个接点,进行操作-->
<div id="result"></div>
</body>
</html>



可以看到,它没有了form表单提交,因为我们现在只需要在客户端处理这些东西。而且text表单我们不再使用name属性了,而是使用了id属性,因为javascript接收与传送的都是使用id属性。
2、js文件
ajax最重要的地方就是使用javascript了,这里,我们使用了一个工具:JQuery,这个工具封装了很多的方法,使我们使用ajax变的非常简单了。在这里,我们需要自己写一个js文件,用以对页面输入的数据,与servlet返回的数据进行一个处理,以达到服务器与客户端的正常交互:
//定义用户验证的方法
function verify() {
    //1、获取文本框的内容
               //第一种方式:document.getElementById("name") ;
              //第二种方式:JQuery查找节点的方式,参数中#加上id属性,可以找到一个节点。
           //JQuery返回的都是jquery对象,可以继续在上面使用jquery的方法
    var jqueryobj = $("#name")
    //获取节点的值
    var name = jqueryobj.val() ;

    //2、将数据发送到服务器端的servlet
    //使用jquery中的get方法,来传输数据与接收数据
    $.get("AJAXServlet?name=" + name, null, callback);

    //回调函数
    function callback(data) {
        //3、接收返回的数据,这里使用的data就是服务器传过来的数据
        //4、将服务器端返回的数据动态显示在页面上
             //4.1取到存储返回数据的变量
        var resultObj = $("#result") ;
            //4.2填充data到变量中 ,使用jquery中的html方法
        resultObj.html(data);
    }

}

文件中的步骤,就是对于使用jquery来对数据进行接收与返回的一个过程。
而对于JQuery工具中的方法,可以下载它的API来对它进行使用,它可以使ajax变的非常的简单。

对于js文件,简单的写法可以改成:
function verify(){
    $.get("AJAXServlet?name="+$("#name").val(),null,function(data){
         $("#result").html(data) ;
    })  ;
}

其中:
1、$("#name").val(),是接收页面传过来的值
2、$.get(url,params,callback),是与servlet进行交互,url是服务器地址,params是要传送的数据,可以是集合{name,password}形式,callback为回调函数,具体接收servlet返回的数据,并返回到页面中
3、$("#result").html(data),将返回的data,送到页面result中去,并显示出来.
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics