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