ajax非同步驗證可以使頁面無需重新整理，即可使頁面與伺服器通訊，尤其是註冊頁面，能給使用者非常好的體驗。在此記錄下，方便大家使用，使用框架為（MyBatis+SpringMVC+Spring）。

jsp頁面：

<input type="text" name="name"  id="name" placeholder="請輸入使用者名稱" required onchange="validateName()">  

<script type="text/javascript">
	var xmlHttp;
	//建立Ajax物件
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        	//IE6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else if (window.XMLHttpRequest) {
        	//W3C瀏覽器和IE7及其以上版本
            xmlHttp = new XMLHttpRequest();                
        }
    }
    //驗證使用者名稱
    function validateName() {
	//呼叫建立Ajax方法
        createXMLHttpRequest(); 
	//獲取使用者名稱的值
        var name = document.getElementById("name");
	//將內容傳送給哪個url處理
        var url = "${pageContext.request.contextPath }/seller/findBrandByName?name=" + escape(name.value);    
	//建立HTTP請求（請求方式，請求URL，是否非同步）
        xmlHttp.open("GET", url, true);
	//狀態改變時
        xmlHttp.onreadystatechange = function(){
		//如果都ok
    		if(xmlHttp.readyState==4 && xmlHttp.status==200){
    			// 使用者名稱驗證,以字母開頭，後面內容可以是字母，數字，下劃線，且6~20位
    			var nameReg = /^[a-zA-Z][\w]{5,19}$/;
    			if (nameReg.test(document.getElementById('name').value) == false) {
    				document.getElementById('nameInfo').innerText = "使用者名稱必須6~20位字母數字下劃線，且只能以字母開頭";
    			}else{
    				var color ="red";
        			var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                    var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
        			if(passed=="true"){
        				color ="green";
        			}
        			document.getElementById("nameInfo").innerHTML = "<span style=color:"+color+">"+message+"</span>";
        		}
    		}
    	};
        xmlHttp.send(null);
    }
  	//驗證身份證號
    function validateID() {
		//呼叫建立Ajax方法
        createXMLHttpRequest(); 
		//獲取使用者名稱的值
        var idnumber = document.getElementById("idnumber");
		//將內容傳送給哪個url處理
        var url = "${pageContext.request.contextPath }/seller/findBrandByID?idnumber=" + escape(idnumber.value);    
		//建立HTTP請求（請求方式，請求URL，是否非同步）
        xmlHttp.open("GET", url, true);
        xmlHttp.onreadystatechange = function(){
    		if(xmlHttp.readyState==4 && xmlHttp.status==200){
    			// 身份證驗證
    			var idnumberReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;
    			if (idnumberReg.test(document.getElementById('idnumber').value) == false) {
    				document.getElementById('idnumberInfo').innerText = "身份證號有誤，請輸入正確的身份證號";
    			}else{
    				var color ="red";
        			var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                    var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
        			if(passed=="true"){
        				color ="green";
        			}
        			document.getElementById("idnumberInfo").innerHTML = "<span style=color:"+color+">"+message+"</span>";
        		}
    		}
    	};
        xmlHttp.send(null);
    }
</script>
 

    controller：

         /**
	 * 根據使用者名稱查詢
	 * @throws IOException 
	 */
	@RequestMapping("/findBrandByName")
	public void findBrandByName(String name,HttpServletRequest request,HttpServletResponse response) throws IOException {
		//初始化
		String message="";
		boolean flag=true;
		//查詢是否有輸入的使用者名稱
		int rel = brandService.selectOnlinNameAndBrandName(name);
		//如果為1（沒有該使用者名稱）即可用
		if(rel==1){
			message="使用者名稱可用";
		}else{
			flag=false;
			message="使用者名稱已經存在，請使用其他使用者名稱";
		}
		//System.out.println(message);
		//設定返回資料為utf-8
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();  
		 out.println("<response>");
	     out.println("<passed>" + Boolean.toString(flag) + "</passed>");
	     out.println("<message>" + message + "</message>");
	     out.println("</response>");
	}