Ajax之旅(三）-- 非同步更新

標籤：style   blog   http   color   java   使用   os   io   

       上篇博文中，已經為大家在理論上講述了什麼是XMLHttpRequest對象，它是Ajax實現非同步更新的核心對象。下面，我們就通過一個執行個體，來瞭解XMLHTTPRequest對象的使用或者說非同步更新的實現。

       執行個體：判斷使用者代碼是否重複

             

       

       方案一：同步更新。原理如所示：

                   

       從中可以看到，當我們在瀏覽器使用者代碼輸入框中輸入“使用者代碼”後，只能等待伺服器的響應，當伺服器將結果反饋給瀏覽器後，我們才可以進行下一個操作，也就是繼續輸入“使用者名稱稱”。

       這就是同步更新，這樣必然會給使用者帶來幾秒鐘的等待時間，也許一個輸入框顯不出什麼，如果每次輸入焦點東西，就要等待幾秒，哪怕一秒，還會有使用者願意繼續使用我們的網站嗎？所以，非同步跟新出來了。

       方案二：非同步更新，原理如所示：

                                            

       從可以看出和同步更新的明顯不同。在非同步更新中，我們使用了Ajax引擎，看起來，也就好像是，在瀏覽器和伺服器中間加入了中介層（Ajax引擎）。

       這樣，當我們輸入完“使用者代碼”後，瀏覽器將請求發送給Ajax引擎，然後就可以繼續輸入“使用者名稱稱”了，不再需要等待。而Ajax引擎則再將請求發送給伺服器。當伺服器操作完成後，將結果返回給Ajax引擎，Ajax引擎再返回給瀏覽器，進而顯示。簡言之，瀏覽器只需要把請求發送給Ajax即可，然後該幹什麼還幹什麼；當Ajax引擎有更新時，利用回呼函數返回給瀏覽器。這就是非同步更新。

       通過方案一，我們也很明顯的知道了方案二的優勢，那麼究竟在代碼中如何?呢，下面是我針對上述執行個體---判斷使用者代碼是否重複 的一些代碼實現，僅供大家參考。當然，也利用這些實現，來讓讀者朋友們，對XMLHttpRequest對象的使用，有所深入瞭解。

       第一步：建立Ajax核心對象XMLHttpRequest。

       這裡，我們需要針對不同的瀏覽器做不同的執行個體化結果。

<span style="font-size:18px;"> var xmlHttp;     function createXMLHttpRequest(){         //表示當前瀏覽器不是ie         if(window.XMLHttpRequest){              xmlHttp= newXMLHttpRequest();         } else if (window.ActiveXObject){              xmlHttp= newActiveXObject("Microsoft.XMLHTTP");         }     }</span>

       

       第二步：註冊回呼函數。

       回呼函數，是XMLHttpRequest對象實現非同步更新的核心方法。發送一個請求後，用戶端無法確定什麼時候會完成這個請求，所以需要用事件機制來捕獲請求的狀態，XMLHttpRequest對象提供了onreadyStateChange事件實現這一功能，也就是我們常說的回呼函數。

       再通俗一點說：回調，不是你主動調的，是由伺服器來調的（在這裡是Ajax引擎調的。）

<span style="font-size:18px;"><span style="font-size:14px;">//註冊回呼函數xmlHttp.onreadystatechange= callback;</span></span>

       此處，需要注意一點：

<span style="font-size:18px;">xmlHttp.onreadystatechange = callback(); //代表方法調用xmlHttp.onreadystatechange = callback;   //代表把方法的地址傳過去</span>

    

       第三步：設定和伺服器端的互動方式及相應參數。

       就是我們常說的是get提交還是post提交，根據不同的提交方式，代碼實現也不盡相同，下面給出的實現是get提交的代碼。此處還有一個參數，xmlHttp.open("GET", url, true)中，true代表是非同步提交，false則代表同步提交，所以，想要實現非同步更新，此處參數還需設定為true。

<span style="font-size:18px;">        //第三步：設定和伺服器端的互動方式及相應參數        varurl= "user_validate.jsp?userId=" + trim(filed.value)+"&time=" + new Date().getTime()             </span>

<span style="font-size:18px;">        xmlHttp.open("GET", url, true);</span>

    

       第四步：向伺服器端發送資料。

       上述設定均完成後，我們只需要向伺服器端發送資料即可。

<span style="font-size:18px;">         //第四步：向伺服器端發送資料         xmlHttp.send(null);         } else {              document.getElementById("spanUserId").innerHTML = "";         }     </span>

            

        第五步：利用callback函數，來判斷與伺服器端的互動是否完成，響應是否正確，並根據需要伺服器端返回的資料，更新頁面內容。

<span style="font-size:18px;">//第五步：判斷與伺服器端的互動是否完成     functioncallback(){         if (xmlHttp.readyState== 4) {              if (xmlHttp.status ==200) {                   if (trim(xmlHttp.responseText)!= "") {                       //alert(xmlHttp.responseText);                       document.getElementById("spanUserId").innerHTML = "<fontcolor='red'>"                                + xmlHttp.responseText + "</font>"                   }else{                       document.getElementById("spanUserId").innerHTML = "";                   }              } else {                   alert("請求失敗。錯誤碼為：" + xmlHttp.status);              }         }     }</span>

       這裡需要注意：

<span style="font-size:18px;">ajax.readyState== 4  //只要有響應就返回。不管正確與否; Ajax引擎狀態為成功ajax.status ==200 //HTTP協議狀態為成功</span>

       

       五步下來，我們判斷使用者代碼是否重複的非同步更新也就實現啦，不知道你對Ajax，對XMLHttpRequest對象，對非同步更新又瞭解了多少了？