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

anysky131

浏览: 175046 次
性别:
来自: 杭州

最近访客更多访客>>

u012363178

yadgen

D_spirit

shoubiao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

Ajax jQuery Servlet JavaScript HTML

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中去,并显示出来.

分享到：