Ajax異步檢查用戶名是否存在（附Demo下載）

原文連接：http://blog.csdn.net/liushuijinger/article/details/8965686

在任何網站註冊用戶的時候，都會檢查用戶是否已經存在。好久之前的處理方式是將全部數據提交到服務器端進行驗證，很顯然這種方式的用戶體驗很很差；後來有了Ajax，有了異步交互，當用戶輸完用戶名繼續填寫其餘信息的時候，Ajax就將信息發到了服務器去檢查該用戶名是否已經被註冊了，這樣若是用戶名已經存在，不用等用戶將全部數據都提交就能夠給出提示。採用這種方式大大改善了用戶體驗，今天就一塊兒跟你們聊聊這種交互方式。

 

下面是用JS獲取用戶Id而後將其發送給user_validate.jsp頁面，而後經過callback方法接收頁面返回的消息並通知用戶。

 

function validate(field) {
    if (trim(field.value).length != 0) {
        //建立Ajax核心對象XMLHttpRequest
        createXMLHttpRequest();

        var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();

        //設置請求方式爲GET，設置請求的URL，設置爲異步提交
        xmlHttp.open("GET", url, true);

        //將方法地址複製給onreadystatechange屬性
        //相似於電話號碼
        xmlHttp.onreadystatechange=callback;

        //將設置信息發送到Ajax引擎
        xmlHttp.send(null);
    } else {
        document.getElementById("spanUserId").innerHTML = "";
    }
}

function callback() {
    //alert(xmlHttp.readyState);
    //Ajax引擎狀態爲成功
    if (xmlHttp.readyState == 4) {
        //HTTP協議狀態爲成功
        if (xmlHttp.status == 200) {
            if (trim(xmlHttp.responseText) != "") {
                //alert(xmlHttp.responseText);
                document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
            }else {
                document.getElementById("spanUserId").innerHTML = "";
            }
        }else {
            alert("請求失敗，錯誤碼=" + xmlHttp.status);
        }
    }
}

	function validate(field) {
		if (trim(field.value).length != 0) {
			//建立Ajax核心對象XMLHttpRequest
			createXMLHttpRequest();
			
			var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
			
			//設置請求方式爲GET，設置請求的URL，設置爲異步提交
			xmlHttp.open("GET", url, true);
			
			//將方法地址複製給onreadystatechange屬性
			//相似於電話號碼
			xmlHttp.onreadystatechange=callback;
			
			//將設置信息發送到Ajax引擎
			xmlHttp.send(null);
		} else {
			document.getElementById("spanUserId").innerHTML = "";
		}
	}
	
	function callback() {
		//alert(xmlHttp.readyState);
		//Ajax引擎狀態爲成功
		if (xmlHttp.readyState == 4) {
			//HTTP協議狀態爲成功
			if (xmlHttp.status == 200) {
				if (trim(xmlHttp.responseText) != "") {
					//alert(xmlHttp.responseText);
					document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
				}else {
					document.getElementById("spanUserId").innerHTML = "";
				}
			}else {
				alert("請求失敗，錯誤碼=" + xmlHttp.status);
			}
		}
	}

 

 

user_validate.jsp頁面接收用戶Id並根據Id查詢是否已存在，若是存在返回，不存在什麼也不返回。

<%
    String userId = request.getParameter("userId");
    if(UserManager.getInstance().findUserById(userId) != null) {
        out.println("用戶代碼已經存在");
    }
%>

<%
	String userId = request.getParameter("userId");
	if(UserManager.getInstance().findUserById(userId) != null) {
		out.println("用戶代碼已經存在");
	}
%>

當光標離開用戶代碼文本框觸發檢查方法。

 

<input name="userId" type="text" id="userId" size="10" maxlength="10"  value="<%=userId %>" onblur="validate(this)">

<input name="userId" type="text" id="userId" size="10" maxlength="10"  value="<%=userId %>" onblur="validate(this)">

效果圖

 

 

關於怎麼根據用戶Id查詢是否已存在的代碼我就不給你們帖出來了，由於實在太簡單了，貼出來怕浪費你們帶寬。

 

作Web開發要更多的考慮用戶體驗，多運用客戶端驗證（固然爲了安全還要進行一次服務器驗證）和異步交互的方式能夠有效提高用戶體驗。只有用戶用着舒心，用戶喜歡用咱們作的東西，咱們的勞動纔有意義，咱們的目標就是讓用戶滿意。

 

細節決定成敗，頁面的各類提示都是很小的細節，不要小看這些小細節，作好了能夠爲你帶來更多的用戶；作的很差極可能讓用戶再也不使用。程序猿們用心作好細節，讓用戶愛上Web體驗吧！