Ajax實踐之用戶是否存在
來源：程序員人生 發布時間：2014-10-17 05:54:09 閱讀次數：3331次
關于Ajax在之前的學習中，已經對它的基礎知識有了初步的了解，只是欠實踐。那么接下來就讓實踐來檢驗一下真理吧！
基礎見：http://blog.csdn.net/liu_yujie2011com/article/details/29812777
那么先回想一下，Ajax是用來解決什么問題的？答案很簡單：解決同步和異步的問題，從而提高界面的友好型，增強用戶體驗。那么就結合“在添加用戶時判斷用戶是否存在”的實例來體驗一下吧。
一、HTML中input代碼
<tdwidth="78%">
<inputname="userId" type="text" class="text1"id="userId"
size="10"maxlength="10" onkeypress="userIdOnKeyPress()"value="<%=userId%>" onblur="validate(this)">
<spanid="spanUserId"></span>
</td>
二、Jsp界面代碼
<%@ pagelanguage="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ pageimport="com.bjpowernode.drp.sysmgr.manager.*" %>
<%
StringuserId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId) != null) {
out.println("用戶代碼已經存在");
}
%>
三、Javascript代碼
（一）創建Ajax引擎對象XMLHttpRequest
var xmlHttp;
functioncreateXMLHttpRequest() {
//表示當前瀏覽器不是ie,如ns,firefox
if(window.XMLHttpRequest){
xmlHttp= new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
}
（二）調用open方法與Ajax引擎建立連接，并告訴Ajax引擎我們的請求方式為get，請求url及采用異步方式
functionvalidate(field){
//alert(document.getElementById("userId").value);
//alert(field.value);
if(trim(document.getElementById("userId").value).length!= 0){
//創建Ajax核心對象XMLHttpRequest
createXMLHttpRequest();
//解決緩存方法，用毫秒
varurl="user_validate.jsp?userId=" +trim(document.getElementById("userId").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= "";
}
}
（三）告訴Ajax引擎處理完后，我們通常指定一個方法句柄，從而Ajax就會調用我們指定的方法，這樣就可以得到Ajax引擎返回的數據（回調機制）。指定的方法如下：
function callback(){
//Ajax引擎狀態為成功
if(xmlHttp.readyState==4){
//http協議狀態為成功
if(xmlHttp.status==200){
//alert("請求成功！")
//判斷如果為空，將紅字span去掉
if(trim(xmlHttp.responseText) != ""){
document.getElementById("spanUserId").innerHTML= "<font color='red'>" + xmlHttp.responseText +"</font>"
}else{
document.getElementById("spanUserId").innerHTML= "";
}
}else{
alert("請求失敗，錯誤碼="+xmlHttp.status);
}
}
}
（四）最后調用send方法把我們步驟設置的參數發給Ajax引擎去處理。這里指的就是步驟二的“xmlHttp.send(null)”
四、注意
以上就是對Ajax的一個簡單實現，但在這里還要注意幾點：
（一）使用Ajax技術需要清除緩存，否則容易產生莫名其妙的錯誤，具體的方法有兩種：
1.采用URL后跟上時間戳（產生隨機數）來防止瀏覽器緩存，如：
//解決緩存方法，用毫秒
varurl="user_validate.jsp?userId=" +trim(document.getElementById("userId").value)+ "&time="+new Date().getTime();
2.加入清除緩存代碼，如：
header("Cache-Control:no-cache, must-revalidate");
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
（二）如果需要提起多個請求，需要創建多個XMLHttpRequest對象。
五、總結
通過以上的步驟大家基本上了解了Ajax實踐的基本流程，那么接下來就要通過使用JS中的匿名函數來完成判斷用戶時候存在的代碼，期待下一篇吧！
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
