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

來源:互聯網
上載者:User

標籤: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非同步實現使用者名稱非同步校檢

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.