? ? ? ??關于Ajax在之前的學習中，已經對它的基礎知識有了初步的了解。僅僅是欠實踐。

那么接下來就讓實踐來檢驗一下真理吧！

??????? 基礎見：http://blog.csdn.net/liu_yujie2011com/article/details/29812777

??????? 那么先回憶一下，Ajax是用來解決什么問題的？答案非常easy：解決同步和異步的問題。從而提高界面的友好型。增強用戶體驗。那么就結合“在加入用戶時推斷用戶是否存在”的實例來體驗一下吧。

一、HTML中input代碼

<tdwidth="78%"> <inputname="userId" type="text" class="text1"id="userId" size="10"maxlength="10" οnkeypress="userIdOnKeyPress()"value="<%=userId%>" οnblur="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技術須要清除緩存。否則easy產生莫名其妙的錯誤，詳細的方法有兩種：

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中的匿名函數來完畢推斷用戶時候存在的代碼，期待下一篇吧！

?

?

?

總結

以上是生活随笔為你收集整理的Ajax实践之用户是否存在的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。