使用Ajax和JSON实现注册时候验证用户名是否存在的功能

　　功能实现的思路：当通常一个网站需要注册用户信息的时候，往往会让用户起一个名字，但一般要求这个用户名称是不能重复的，为了判断新注册的用户填写的用户名是否已经存在，需要对填写的用户名称进行判断，实际项目开发时候注册成功的用户信息会存入数据库中，真正的判断是需要和数据库数据进行对比来决定用户名是否已经存在，但我这里仅仅是模拟这个功能，所以在后台对用户输入的用户名的处理比较简单，直接让他和一个字符串进行对比（手动滑稽），和字符串一样的话就提示用户这个用户名已经存在，不存在也会友善提醒用户这个名字可以使用。

1、设计用户注册界面：

<table>
    <tr>
        <th>用户注册</th>
    </tr>
    <tr>
        <td>用户名：</th>
        <td>
        <input type="text" id="userName" name="userName" onblur="checkUserName()"/>
        <font id="img"></font>
        </td>
    </tr>
    <tr>
        <td>密码：</th>
        <td><input type="password" id="password1" name="password1"/></td>
    </tr>
    <tr>
        <td>确认密码：</th>
        <td><input type="password" id="password2" name="password2"/></td>
    </tr>
    <tr>
        <td><input type="submit" id="sb" value="注册"/></td>
        <td><input type="button" id="button" value="重置密码" onclick="czmima()"/></td>
    </tr>
</table>

2、利用Ajax技术实现请求向后台服务器的访问以及对返回结果的处理功能：

<script type="text/javascript">
    //简单的实现用户名和密码重置的功能
    function czmima(){
        document.getElementById("password1").value="";
        document.getElementById("password2").value="";
        document.getElementById("userName").value="";
    }
    function checkUserName() {
        var userName = document.getElementById("userName").value;
        //创建XMLHttpRequest对象
        var xmlHttp = null;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //XMLHttpRequest对象请求后台服务
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                var dataObject = eval("("+xmlHttp.responseText+")");
                if(dataObject.exist){
                    //如果用户名存在，就会在文本框的后边显示一个X的图标，表示这个用户名称不可用
                    document.getElementById("img").innerHTML="<img src='no.png'/>&nbsp;该用户名称已经存在！";
                }else{
                    //如果用户名存在，就会在文本框的后边显示一个“对号”的图标，表示这个用户名称可用
                    document.getElementById("img").innerHTML="<img src='ok.png'/>&nbsp;该用户名称可以使用！";
                }
            }
        }
        //规定请求类型、请求处理的地址以及是否使用异步请求处理。
        //这里还需要把用户输入的用户名作为参数传给后台servlet用以判断
        xmlHttp.open("get","checkUserNameServlet?userName="+userName,true);
        //将请求发送给服务器进行处理
        xmlHttp.send();        
    }    
</script> 

3、编写后台用于处理前端页面传入的userName参数的Servlet：

package com.java1234.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class CheckUserNameServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //设置浏览器接收到请求是需要知道的处理格式（MIME）
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //创建一个JSONObject对象，用于封装处理结果
        JSONObject reslutJSon = new JSONObject();
        //接收从前端传来的userName的参数
        String userName = request.getParameter("userName");
        //这里就是直接让前端传入的参数和一个字符串进行比较
        if("Marry".equals(userName)) {
            reslutJSon.put("exist", true);
        }else {
            reslutJSon.put("exist", false);
        }
        out.println(reslutJSon);
        out.flush();
        out.close();
    }

}

4、配置web.xlml文件，然后就能运行出结果了，这个需要注意的是，这个因为使用了JSON对象，所以程序运行要保证包含JSON的jar包。

　　总结：实话讲这是一个简单到极致的功能实现，但对于一个初学者的我来说，我需要从最基础的知识点抓起，通过一个简单的实例我能搞清楚Ajax动态实现局部数据更新的大致过程，不贪多不贪复杂，一步一步来稳稳的走路其实速度并不慢！