前言：

     現在軟體很講究使用者體驗度，當我們在註冊的時候，你是希望當你填完一系列資訊之後點選註冊時系統提示你使用者名稱已經註冊過，然後重新填寫一遍資訊，還是當你填完使用者名稱就給提示？？懶人都會選擇後者對吧，來看看怎麼實現的！

介紹：

    這個效果的實現用到了AJAX，當用戶離開使用者名稱文字框輸入時開始校驗，需要在使用者名稱標籤中新增onblur事件，如下圖：

接下來就需要在js中編寫checkUsername（）方法

js方法:

function checkUsername(){
      //獲取文字框值
     var username=document.getElementById("username").value;
      //1.建立Ajax核心物件XMLHttpRequest
     var xhr=createXmlHttp();
     //2.設定監聽
     xhr.onreadystatechange = function(){
       //Ajax引擎狀態為成功
	   if(xhr.readyState == 4){
	       //HTTP協議狀態為成功
		   if(xhr.status == 200){
		            //顯示返回結果資訊
					document.getElementById("span1").innerHTML = xhr.responseText;	//請求結果內容			
			}
		 }
	  }
     //3.開啟連線
       //設定請求方式為Get，設定請求的URL，設定為非同步提交（true）
       xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+ new Date().getTime()+"&username="+username,true);
     //4.傳送  
      xhr.send(null);
 }
  function createXmlHttp(){
     var xmlHttp;
     try{//非IE瀏覽器，如Firefox
          xmlHttp=new XMLHttpRequest();
     }
     catch(e){
       try{//IE
           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
       catch(e){
           try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch(e){}
       }
    }
    return xmlHttp;
}
 

非同步校驗四步走：

 1、建立Ajax核心物件XHR

 2、設定監聽

 3、開啟連線

 4、傳送

幾個關鍵點：

1、建立XHR物件時需要考慮瀏覽器的相容性，IE和其他瀏覽器不同，如上面的方法createXmlHttp()；

2、關於ajax引擎的狀態和Http協議狀態，在介紹XHR物件時有介紹，在這裡不重複，部落格地址：點選開啟連結

    當readyState為4且status為200時，表示響應已經就緒。

3、請求方式為GET還有一種是POST，Get相對於POST來說更簡單更快一些，大部分情況下都能用，以下幾種情況用POST請求

    (1)無法使用快取檔案（更新伺服器上的檔案或

    (2)向伺服器傳送大量資料（POST 沒有資料量限制）

    (3)傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

4、請求URL中不僅有要查詢的username引數，還添加了時間戳GETTIME().是為了避免快取對查詢結果的影響。

5、非同步提交時在開啟連線中寫的是true，代表當我們傳送了請求後，處理過程中我們可以進行別的框的輸入，填寫郵箱、地址之類的資訊，如果是false，傳送了請求我們必須等待請求結果返回後才能進行其他框的輸入；我們一般都是用true，使用者體驗稍微好些，如果填寫一個框後其他框動不了，使用者不知道發生了什麼事，增加焦慮感。

6、請求結果的顯示用的是span標籤（div需要換行，span不需要，可以在使用者名稱框後面提示）

  當時自己照著視訊敲，把這給掉了，怎麼都顯不出來，調了半天~

7、請求結果上面程式碼用到了xhr物件的responseTest方法，物件的內容是在請求路徑中的方法中寫的，在SSH網上商城中是在UserAction中：如下

/**
	 * AJAX進行非同步校驗使用者的執行方法
	 * @return
	 */
    public String findByName() throws IOException{    
    	//呼叫Service進行查詢
    	User exitUser= userService.findByUsername(user.getUsername());
    	//獲得response物件，頁面輸出
    	HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
    	//判斷
    	if(exitUser!=null){
    		//查詢到該使用者：使用者名稱已經存在
    		response.getWriter().println("<font color='red'>使用者名稱已經存在</font>");
    	}else{
    		//沒查詢到該使用者：使用者名稱可以使用
    		response.getWriter().println("<font color='grean'>使用者名稱可以使用</font>");
    	}
    	return NONE;
    }

總結：

    看到DRP時也有這個功能的實現，想起來SSH的時候出現點問題，學習了兩遍才明白這個套路，其實挺簡單的，主要還是缺乏及時總結，以後多寫總結，加油！