Ajax實踐之使用者是否存在

標籤：ajax

        關於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,firefoxif(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核心對象XMLHttpRequestcreateXMLHttpRequest(); //解決緩衝方法，用毫秒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中的匿名函數來完成判斷使用者時候存在的代碼，期待下一篇吧！

 

 

 

Ajax實踐之使用者是否存在