ajax實現非同步請求，不跳轉頁面的情況下，達到檢驗使用者名稱等資訊是否效果的功能！

標籤：ajax   非同步校正   jsp   strust   javaweb   

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">我們在使用者註冊頁面時常常要考慮到登入名稱不能重複的問題，然而解決這個問題的方式有很多，可以採用from表單提交然後重新導向等方法來實現，甚至於我們可以採用iframe的布局架構也能實現，但是我更加推崇的是使用ajax的方法。下面我就詳細介紹使用ajax的方式來實現非同步校正的功能：</span>

方法一：通過form表單提交+建立ajax引擎的方式非同步校正

第一步：首先我們在html或者jsp等的介面中建立ajax引擎（javascript代碼）

<span style="font-size:18px;">//建立ajax引擎function createXmlHttpRequest(){var xmlHttp;try{xmlHttp=new XMLHttpRequest();}catch(e){try{    //Internet Explorer                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");            }catch (e){                  try{                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                  }catch (e){}             }    }   return xmlHttp; }</span>

第二步：建立調用ajax引擎的方法（javascript代碼）

<span style="font-size:18px;"> function checkLogonName(){ var logonName = document.getElementById("logonName").value; //第一步：建立ajax引擎 var xmlHttp = createXmlHttpRequest(); //第二步：事件處理函數，實質上相當一個監聽，監聽伺服器與用戶端的串連狀態 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var data = xmlHttp.responseText; //alert(data);  </span>

<span style="font-size:18px;"><span style="white-space:pre"></span>//<span style="color:#ff0000;">data是後台反饋回來的資訊，我這裡的後台是放回1,2的數字，你可以自訂</span> if(data==1){ alert("當前輸入的登入名稱["+logonName+"]已被其他人佔用，請重重新輸入！"); document.getElementById("logonName").value = ""; document.getElementById("logonName").focus(); } } } } //第三步：與後台伺服器建立一個串連 xmlHttp.open("post","<span style="color:#3366ff;">../../CheckLogonName</span>",true);//<span style="color:#ff0000;">藍色部分為我們訪問servlet的路徑</span> xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //第四步：發送請求的參數 xmlHttp.send("logonName="+logonName); //<span style="color:#ff0000;">提交我們用於資料庫校正的登入名稱的輸入資訊</span> }</span>

第三步：添加html代碼的onclick或者其他滑鼠事件函數，我這裡使用的是strust標籤，如果你是直接的html標籤，相應自訂就好！

<span style="font-size:18px;"><s:textfield name="logonName" id="logonName" maxlength="25" size="20" onblur="checkLogonName()"></s:textfield></span>

到這裡我們就建立好ajax引擎，並且可以提交用於檢驗的輸入資訊到背景servlet了

第四步：建立servelt訪問資料庫，然後編寫邏輯代碼返回相應的資訊（這個就是普通的查詢資料庫的代碼，就不再累贅，我這裡設定的返回資訊室1或者2，當然你可以自訂）

方法二：採用ajax提交+引入jquery.js的方式實現非同步校正

第一步：引入jquery.js,因為ajax提交必須引用jquery.js

<script type="text/javascript" src="js/jquery.js"></script>

第二步：建立ajax提交的方法

function PassSubmit(){var username=document.getElementsByName("username")[0].value;var studentnumber=document.getElementsByName("studentnumber")[0].value;var gender=document.getElementsByName("gender")[0].value;var studentclass=document.getElementsByName("studentclass")[0].value;var studentdormitory=document.getElementsByName("studentdormitory")[0].value;var phonenumber=document.getElementsByName("phonenumber")[0].value;var department=document.getElementsByName("department")[0].value;var description=document.getElementsByName("description")[0].value;if(username==""){alert("請輸入姓名！！");document.getElementById("username").focus(); return false;}else if(studentnumber==""){alert("請輸入學號！！");document.getElementById("studentnumber").focus(); return false;}else if (!isSchoolNum(studentnumber)) {            alert("您的學號不合法或者您不是新生！！");            document.getElementById("studentnumber").focus();             return false;        }else if(studentclass=="未選擇"){alert("請選擇班級！！");document.getElementById("studentclass").focus(); return false;}else if(studentdormitory==""){alert("請輸入宿舍！！");document.getElementById("studentdormitory").focus(); return false;}else if (!isstudentdormitory(studentdormitory)) {            alert("您輸入的宿舍不合法！！難道你不住在海花A或B?");            document.getElementById("studentdormitory").focus();             return false;        }else if(phonenumber==""){alert("請輸入手機號！！");return false;}else if (!isMoblie(phonenumber.substring(0, 11))) {            alert("您輸入的手機號不合法！！");            document.getElementById("phonenumber").focus();             return false;        }else if(department=="未選擇"){alert("請選擇部門！！");document.getElementById("department").focus(); return false;}else if(description.length>200){alert("您輸入的文字已經超過100個字了！！");document.getElementById("description").focus(); return false;}        //<span style="color:#ff0000;">這部分是主要的方法代碼，下面的第三行中的url就是要提交的的servlet的路徑</span>       <span style="color:#3333ff;"> $.ajax({    type:'post', url:'<%=request.getContextPath()%>/RegisterServlet',data:'username='+username+'&studentnumber='+studentnumber+'&gender='+gender+'&studentclass='+studentclass+'&studentdormitory='+studentdormitory+'&phonenumber='+phonenumber+'&department='+department+'&description='+description,success: function(msg) {                          if ((msg=="fail")) {                              alert("系統錯誤，報名失敗！請稍後再試！！");                          }else if((msg=="success")){                              alert("報名成功，你還可以報名其他部門！！");                          }else if((msg=="old")){                              alert("你已經報名該部門，不能重複報名！！");                          }                    }  });</span>}

第三步：添加html代碼的onclick或者其他滑鼠事件函數

<span style="font-size:18px;"><input type="submit"  id="btn_submit" class="btn" value="提交" onclick="PassSubmit()"> </span>

到這裡我們就建立好ajax引擎，並且可以提交用於檢驗的輸入資訊到背景servlet了

第四步：建立servelt訪問資料庫，然後編寫邏輯代碼返回相應的資訊（這個就是普通的查詢資料庫的代碼，就不再累贅，我這裡設定的返回資訊室fail/uccess/old，當然你可以自訂）

推薦閱讀我的另一篇關於部落格：通過ajax和form提交轉向

ajax實現非同步請求，不跳轉頁面的情況下，達到檢驗使用者名稱等資訊是否效果的功能！