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(未找到)

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

[javascript] 

view

plain

copy

1. <script language ="javascript">  
2.    //定義一個将指向XMLHttpRequest對象的變量  
3.    var xmlHttp = null;  
4.    //定義一個函數用于建立XMLHttpRequest對象  
5.    function createXMLHttpRequest(){  
6.        if(window.ActiveXObject){            //表示目前浏覽器是IE  
7.            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
8.        }  
9.        else if(window.XMLHttpRequest){        
10.            xmlHttp = new XMLHttpRequest();     //表示目前浏覽器不是IE，如：firefox  
12. }  
13.    //定義一個函數用于啟動與伺服器的異步通信  
14.    function begin(){  
15.        createXMLHttpRequest();                 //調用createXMLHttpRequest函數  
16.        xmlHttp.onreadystatechange = processor;     //将事件觸發器綁定到 processor上  
17.        xmlHttp.open("GET", "test.xml", true);     //使用GET方法建立對伺服器資源test.xml的一個異步調用  
18.        xmlHttp.send(null);                      //向伺服器發送請求 ,參數為null  
20.    //定義一個狀态處理函數用于處理狀态觸發器的狀态改變  
21.    function processor(){  
22.        //如果處理請求完成  
23.        if(xmlHttp.readyState == 4){  
24.            //如果伺服器傳回狀态為成功  
25.            if(xmlHttp.status = 200){  
26.                 //将從伺服器傳回的内容報告給使用者  
27.                 alert("從伺服器傳回的内容為："+ xmlHttp.responseText);  
28.            } else{  
29.                 alert("請求失敗，錯誤碼="+ xmlHttp.status);  
30.            }  
32.     }  
33. </script>