使用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動態實現局部數據更新的大致過程，不貪多不貪復雜，一步一步來穩穩的走路其實速度並不慢！