輕鬆掌握AJAX非同步通訊

首先簡單的瞭解一下下什麼是Ajax：

       AJAX是一種運用JavaScript和可擴充編輯語言（XML），在網路瀏覽器和伺服器之間傳送或接收資料的技術。

       AJAX是WEB2.0的核心之一．AJAX技術運用於瀏覽器中，使向伺服器索取網頁的部分資訊成為可能．

再簡單的瞭解一下下它的工作原理：

       AJAX的工作原理相當與在使用者和伺服器之間加了一個中介層，使使用者請求與伺服器響應非同步化（我們經常用它來做資料校正）。這樣還可以把以前的一些伺服器負擔的工作轉交給用戶端，利用用戶端閑置的處理能力來處理這些工作，減輕伺服器和寬頻負擔，同時也可以縮短使用者等待時間，提高工作效率。

這樣說有點抽象，看兩個圖就明白了：

   

       為沒有使用非同步通訊技術的事件請求，明顯的看出只有得到通知後才能繼續輸入密碼和其它需要的資訊，這樣是不是很浪費時間，有時候時間長了，使用者也可能會等的不耐煩，放棄註冊也不是沒有可能。

       為使用了非同步通訊技術後的事件請求，使用者不用等待訊息的返回，繼續輸入就可以了，當使用者輸入到下面的某一項時，通知的訊息可能就返回了，在相應的地方給出提示，這樣也不影響使用者的操作，是不是很友好，很強大。

AJAX的核心是JavaScript對象XMLHttpRequest：

       XMLHttpRequest提供用戶端同HTTP伺服器非同步通訊的協議．通過這個協議，AJAX可以使頁面像傳統型程式一樣同伺服器端進行資料層面的交換，而不必每次都重新整理頁面，也不用每次都將資料處理的工作都交給伺服器來做，這樣既減輕了伺服器負擔又加快了響應速度，縮短了使用者等待的時間．

瞭解幾個XMLHttpRequest對象的方法：

Abort()	停止當前請求
getAllResponseHeaders()	返回HTTP請求的所有回應標頭部的鍵/值字串
getResponseHeader("header")	返回指定頭部屬性的字串值
Open("method", "url", true)	建立對伺服器的調用。Method參數可以是GET POST PUT, url參數可以是相對URL或絕對URL，true/false代表是否要進行非同步通訊
Send(content)	向伺服器發送請求（要是get提交參數為null）
setRequestHeader("header","value")	為指定頭部屬性設定指定值

 

瞭解幾個XMLHttpRequest對象的屬性：

         Onreadystatechange狀態改變的時間觸發器，通常綁定一個JavaScript 函數，每當狀態發生改變時，就調用該函數

readyState 請求的狀態，有5個可取值：

0 = 未初始化

1 = 讀取中

2 = 已讀取

3 = 互動中

4 = 完成

responseText     從伺服器返回的文本形式的響應內容

responseXML     從伺服器返回的相容DOM的XML文檔對象

Status       從伺服器返回的狀態代碼，例如404="檔案找不到" 、 200 =
"成功"

statusText       從伺服器返回的狀態文本資訊，例如OK或Not Found(未找到)

最後我們一起瞭解一下實現代碼（有詳細的注釋，看了就懂）：

<script language ="javascript">   //定義一個將指向XMLHttpRequest對象的變數   var xmlHttp = null;   //定義一個函數用於建立XMLHttpRequest對象   function createXMLHttpRequest(){       if(window.ActiveXObject){            //表示當前瀏覽器是IE           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");       }       else if(window.XMLHttpRequest){                 xmlHttp = new XMLHttpRequest();     //表示當前瀏覽器不是IE，如：firefox       }}    //定義一個函數用於啟動與伺服器的非同步通訊   function begin(){       createXMLHttpRequest();                 //調用createXMLHttpRequest函數       xmlHttp.onreadystatechange = processor;     //將事件觸發程序綁定到 processor上       xmlHttp.open("GET", "test.xml", true);     //使用GET方法建立對伺服器資源test.xml的一個非同步呼叫       xmlHttp.send(null);                      //向伺服器發送請求 ,參數為null}    //定義一個狀態處理函數用於處理狀態觸發器的狀態改變   function processor(){       //如果處理請求完成       if(xmlHttp.readyState == 4){           //如果伺服器返回狀態為成功           if(xmlHttp.status = 200){                //將從伺服器返回的內容報告給使用者                alert("從伺服器返回的內容為："+ xmlHttp.responseText);           } else{                alert("請求失敗，錯誤碼="+ xmlHttp.status);           }       }    }</script>

下一篇部落格將介紹AJAX的優缺點以及Jquery是如何對它進行封裝方便我們輕鬆實現非同步通訊。