【ajax入門】使用Ajax非同步實現使用者名稱非同步校檢

標籤：ajax   非同步   非同步校檢   註冊使用者名稱   

【功能描述】 我們在註冊網站的通常都需要填寫使用者名稱，但我們輸入我們喜歡的使用者名稱的滑鼠離開輸入框，有時會提醒 使用者名稱已被註冊，但是網頁上的其它內容卻沒有更新。這就是非同步實現。

下面我們描述是怎樣實現的。(ajax+Servlet)

前台代碼：

<div id="register" class="div_cntent">      <form name="form1">        <table>            <tr>                <th align="center" colspan="2">使用者註冊</th>            </tr>            <tr>                <td>使用者名稱：</td>                <td><input type="text" name="reg_name" id="reg_name" onblur="checkName()" /><span id="name_tip"></span></td>            </tr>            <tr>                <td>密碼：</td>                <td><input type="password" name="reg_password" id="reg_password" /><span id="password_tip"></span></td>            </tr>            <tr>                <td><input type="button" value="註冊" class="btn_style" /></td>                <td><input type="reset" value="重設" class="btn_style"/></td>                            </tr>                    </table>       </form>        </div>

使用 onblur=“checkName（）”表示滑鼠在使用者名稱文字框失去焦點時調用 checkName（）方法

JS代碼

/* * ajax非同步檢測使用者名稱 * */ function checkName(){    var xmlhttpChk; // 穿件xmlHttpRequest對象 ,XMLHttpRequest 用於在後台與伺服器交換資料。    var reg_name = document.getElementById("reg_name").value;    // 判斷瀏覽器的問題：由於不同瀏覽器建立xmlhttp方式不同    // 所有現代瀏覽器均支援 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。    if(window.XMLHttpRequest){        xmlhttpChk = new XMLHttpRequest();    // Firefox，Google，opera……    }else{        xmlhttpChk = new ActiveXObject();  //  IE5 IE6……    }        // 請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數    xmlhttpChk.onreadystatechange = function(){    /*   * 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。   * 0: 請求未初始化   *     1: 伺服器串連已建立   *     2: 請求已接收   *     3: 請求處理中   *     4: 請求已完成，且響應已就緒   * status     *   200:   表示  OK   *    400： 表示“未找到頁面”    *  */        if(xmlhttpChk.readyState == 4 && xmlhttpChk.status == 200){              alert(xmlhttpChk.responseText);            // 使用JSONObject對象必須使用eval()方法把返回的資料轉換為對象            var resultObj = eval("("+xmlhttpChk.responseText+")");                      if(resultObj.exist){               //  使用者名稱已存在                document.getElementById("name_tip").innerHTML = "<font color=‘#f00‘>使用者名稱已存在</font>";               // 使用者名稱可用           }else{                document.getElementById("name_tip").innerHTML = "<font color=‘#0f0‘>使用者名稱可用</font>";            }                    }            };            // 如需將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：    xmlhttpChk.open("get", "checkName?reg_name="+reg_name, true);    xmlhttpChk.send();       /*     open(method,url,async)      規定請求的類型、URL 以及是否非同步處理請求。  method：請求的類型；GET 或 POSTurl：檔案在伺服器上的位置async：true（非同步）或 false（同步）        send(string)    將請求發送到伺服器。string：僅用於 POST 請求       */}

上面代碼就是是使用ajax非同步實現使用者名稱校檢

var xmlhttpChk;    var reg_name = document.getElementById("reg_name").value;    // 判斷瀏覽器的問題    if(window.XMLHttpRequest){          xmlhttpChk = new XMLHttpRequest();    }else{          xmlhttpChk = new ActiveXObject();    }

後台代碼

@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 {        response.setContentType("text/html;charset=utf-8");        PrintWriter out = response.getWriter();        String reg_name = request.getParameter("reg_name");        reg_name = new String(reg_name.getBytes("ISO8859-1"),"UTF-8");        System.out.println(reg_name);        // 建立Json對象        JSONObject resultJson = new JSONObject();        if("Allen".equals(reg_name)){            resultJson.put("exist", true); // 表示使用者名稱已存在        }else{            resultJson.put("exist", false); // 表示使用者名稱不存在        }            out.print(resultJson);        out.flush();        out.close();    }

最後再 配置 web.xml 和拷貝下面幾個檔案到 lib檔案中

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/47/E4/wKiom1QC6v6is4PHAACD4tzkhvU573.jpg" title="json-lib.jpg" alt="wKiom1QC6v6is4PHAACD4tzkhvU573.jpg" /> 到這裡下載

<!-- 使用者驗證 -->  <servlet>      <servlet-name>CheckNameServlet</servlet-name>    <servlet-class>com.ajax.web.CheckNameServlet</servlet-class>  </servlet>  <servlet-mapping>      <servlet-name>CheckNameServlet</servlet-name>      <url-pattern>/checkName</url-pattern>  </servlet-mapping>

本文出自 “Henrry” 部落格，請務必保留此出處http://erlong.blog.51cto.com/6669354/1547185

【ajax入門】使用Ajax非同步實現使用者名稱非同步校檢