ajax實現異步請求，不跳轉頁面的情況下，達到檢驗用戶名等信息是否效果的功能！

我們在用戶註冊頁面時常常要考慮到登錄名不能重複的問題，然而解決這個問題的方式有很多，可以採用from表單提交然後重定向等方法來實現，甚至於我們可以採用iframe的佈局框架也能實現，但是我更加推崇的是使用ajax的方法。下面我就詳細介紹使用ajax的方式來實現異步校驗的功能：

方法一：通過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;">       //data是後臺反饋回來的信息，我這裏的後臺是放回1,2的數字，你可以自定義
	 				if(data==1){
	 					alert("當前輸入的登錄名["+logonName+"]已被其他人佔用，請重重新輸入！");
	 					document.getElementById("logonName").value = "";
	 					document.getElementById("logonName").focus();
	 				}
	 			}
	 		}
	 	}
	 	//第三步：與後臺服務器建立一個連接
	 	xmlHttp.open("post","../../CheckLogonName",true);//藍色部分爲我們訪問servlet的路徑
	 	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	 	//第四步：發送請求的參數
	 	xmlHttp.send("logonName="+logonName); //提交我們用於數據庫校驗的登錄名的輸入信息
	 }</span>

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

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

到這裏我們就創建好ajax引擎，並且可以提交用於檢驗的輸入信息到後臺的servlet了

第四步：創建servelt訪問數據庫，然後編寫邏輯代碼返回相應的信息（這個就是普通的查詢數據庫的代碼，就不再累贅，我這裏設置的返回信息室1或者2，當然你可以自定義）

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

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

<span style="font-size:18px;"><script type="text/javascript" src="js/jquery.js"></script></span>

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

<span style="font-size:18px;">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;
		}
        //這部分是主要的方法代碼，下面的第三行中的url就是要提交的的servlet的路徑
       $.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="提交" οnclick="PassSubmit()"> 
</span>

到這裏我們就創建好ajax引擎，並且可以提交用於檢驗的輸入信息到後臺的servlet了

第四步：創建servelt訪問數據庫，然後編寫邏輯代碼返回相應的信息（這個就是普通的查詢數據庫的代碼，就不再累贅，我這裏設置的返回信息室fail/uccess/old，當然你可以自定義）

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