原文地址：Ajax

Ajax全稱為“Asynchronous Javascript and XML”（異步javascript和XML），它并不是指一種單一的技術，而是有機地利用了一系列交互式網(wǎng)頁相關的技術所形成的結合體，它的出現(xiàn)結束了“單擊，等待”的傳統(tǒng)交互模式，開啟了無刷新更新頁面的新時代。

Ajax的優(yōu)點

1. 不需要插件支持
   ajax不需要任何瀏覽器插件，就可以被絕大多數(shù)的主流瀏覽器所支持，用戶只需要允許javascript在瀏覽器上執(zhí)行即可。
2. 優(yōu)秀的用戶體驗
   這是ajax技術的最大優(yōu)點，能在不刷新整個頁面的前提下更新數(shù)據(jù)，這使得web應用程序能更為迅速地回應用戶的操作。
3. 提高web程序的性能
   與傳統(tǒng)模式相比，ajax模式在性能上的最大區(qū)別就在于傳輸數(shù)據(jù)的方式，在傳統(tǒng)模式中，數(shù)據(jù)是通過提交表單來實現(xiàn)的，而數(shù)據(jù)獲取是靠全頁面刷新來重新獲取整頁的內容。ajax模式只是通過XMLHttpRequest對象向服務器提交希望提交的數(shù)據(jù)，即按需發(fā)送。
4. 減輕服務器和帶寬的負擔
   ajax的工作原理相當于在用戶和服務器之間加了一個中間層，使用戶操作與服務器響應異步化。它在客戶端創(chuàng)建ajax引擎，把傳統(tǒng)方式下的一些服務器負擔的工作轉移到客戶端，便于客戶端資源來處理，減輕服務器和帶寬的負擔。

Ajax的缺點

1. 破壞瀏覽器 “后退”按鈕的正常功能
   在ajax中，“前進”和“后退”按鈕的功能都會失效。用戶經常會遇到這情況，當單擊一個按鈕觸發(fā)一個ajax交互后，如果點擊“后退”按鈕，瀏覽器會直接后退到前一個頁面，而不是僅僅是回退到ajax交互操作前。
2. 需要處理瀏覽器兼容性問題

創(chuàng)建XMLHttpRequest對象

XMLHttpRequest對象簡稱XHR對象，它是ajax技術的核心，發(fā)送異步請求、接收響應及執(zhí)行回調都是通過它來完成的。ie7+、firefox、opera、chrome和safari都支持原生的XHR對象，在這些現(xiàn)代瀏覽器中這樣創(chuàng)建：

var xhr = new XMLHttpRequest();

在ie5和ie6中，是以ActiveXObject的方式引入XHR對象的：

var xhr=new ActiveXObject("Microsoft.XMLHTTP");

如果你既想支持現(xiàn)代瀏覽器又不想放棄ie5和ie6，那么你需要做一個邏輯判斷：

    var xhr
    if(window.ActiveXObject){
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }else if (window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }

XMLHttpRequest對象的屬性

readyState

該屬性表示請求/響應過程中的當前活動階段。該屬性可取的值如下：

• 0：未初始化。尚未調用open()方法。
• 1：啟動。已經調用open()方法，但尚未調用send()方法。
• 2：發(fā)送。已經調用send()方法，但尚未接收到響應。
• 3：接收。已經接收到部分響應數(shù)據(jù)。
• 4：已經接收到全部響應數(shù)據(jù)，而且已經可以在客戶端使用了。

只要readyState屬性的值發(fā)生變化，就會觸發(fā)readystatechange事件，可以利用這個事件來檢測每次變化后的readyState的值。通常我們只對readyState值為4的階段感興趣，因為這個時候所有的數(shù)據(jù)都已經就緒。

responseText

作為響應主體被返回的文本。無論內容類型是什么，響應主體的內容都會保存在這里，如果響應包含了為響應體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8。如果 readyState 小于 3，這個屬性就是一個空字符串。當 readyState 為 3，這個屬性返回目前已經接收的響應部分。如果 readyState 為 4，這個屬性保存了完整的響應體。

responseXML

如果響應的內容類型是“text/xml”或“application/xml”，這個屬性中將保存包含著響應數(shù)據(jù)的XML DOM文檔。對于非XML數(shù)據(jù)而言，responseXML屬性值將為null。

status

響應的http狀態(tài)。檢查status屬性可以確定響應是否已成功返回（在readyState>3時才可以讀?。?。

• http狀態(tài)碼200是響應成功返回的標志，此時responseText屬性的內容已經就緒，而且在內容類型正確的情況下（XML類型），responseXML屬性也能夠訪問了。
• http狀態(tài)碼304表示請求的資源沒有被修改，可以直接使用瀏覽器中緩存的版本，當然也意味著響應式有效的。
• http狀態(tài)碼404表示請求錯誤。
  ······

statusText

http狀態(tài)的說明。比如在狀態(tài)碼為200時，statusText的值為“OK”。

XMLHttpRequest對象的方法

open()

在使用XHR對象時，要調用的第一個方法是open()，它接受三個參數(shù)：

1. 要發(fā)送的請求類型，如“get”“post”等。
2. 請求要訪問的URL。
3. 選擇同步或異步的布爾值。true表執(zhí)行異步操作，false表示同步。

• 同步：客戶端發(fā)出一個請求后，需要等待服務器響應結束后，才能發(fā)出第二個請求。
• 異步：客戶端發(fā)出一個請求后，無需等待服務器響應結束后，就能發(fā)出第二個請求。

send()

send方法接收一個參數(shù)，將被寫入到請求報文里面?zhèn)鬟f，即要做為請求主體發(fā)送的數(shù)據(jù)。調用send()之后，請求就會被分派到服務器。

• 如果不需要通過請求主體發(fā)送數(shù)據(jù)，比如請求類型是“get”時，參數(shù)是直接寫到url里面，則必須傳入null，因為這個參數(shù)對于某些瀏覽器來說是必須的。
• 請求類型是“post”時，請求參數(shù)需要寫入到send方法里。

abort()

調用這個方法后，XHR對象會停止觸發(fā)事件，而且也不再允許訪問與響應有關的對象屬性。

http頭部信息

默認情況下，在發(fā)送XHR請求的同時，還會發(fā)送頭部信息，雖然不同的瀏覽器實際發(fā)送的頭部信息會有所不同，但是基本上是所有瀏覽器都會發(fā)送的有以下這些：

• Accept：瀏覽器能夠處理的內容類型。
• Accept-Charset：瀏覽器能夠顯示的字符集。
• Accept-Encoding：瀏覽器能夠處理的壓縮編碼。
• Accept-Language：瀏覽器當前設置的語言。
• Connection：瀏覽器與服務器之間連接的類型。
• Cookie：當前頁面設置的任何Cookie。
• Host：發(fā)出請求的頁面所在的域。
• Referer：發(fā)出請求的頁面的URI。
• User-Agent:瀏覽器用戶代理字符串。

getResponseHeader()

這個方法可以設置自定義的請求頭部信息，它接收兩個參數(shù)：

1. 頭部字段的名稱
2. 頭部字段的值

要想成功發(fā)送請求頭部信息，getResponseHeader()方法必須在open()與send()之間調用。

getAllResponseHeaders()

這個方法可以取得一個包含所有頭部信息的長字符串。

GET請求

GET是最常見的請求類型，常用于向服務器查詢某些信息。使用GET請求時常用到encodeURIComponent()方法。查詢字符串中每個參數(shù)的名稱和值都必須使用encodeURIComponent()進行編碼，才能放到URL末尾。完整的函數(shù)如下：

function addURLParam(url,name,value){
    url+=(url.indexOf("?") == -1 ? "?" : "&");
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
    return url;
}

POST請求

POST請求通常用于向服務器發(fā)送應該被保存的數(shù)據(jù)。
雖然大部分情況下都能用更簡單、更快的GET請求，但在以下情況中，請使用POST請求：

• 無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）
• 向服務器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
• 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠

默認情況下，服務器對POST請求和提交表單的請求并不會一視同仁，不過我們可以使用XHR來模仿表單提交。

    xhr.open("POST","example.php",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");   //設置表單提交時的內容類型
    var form = document.getElementById("#test");   //得到表單中的數(shù)據(jù)
    xhr.send(serialize(form));   //表單中的數(shù)據(jù)序列化后發(fā)送給服務器

實例

下面看一個完整的栗子：
html代碼段

<input type="button" value="ajax提交" onclick="Ajax();">
<div id="resText"></div>

javascript代碼段：

function Ajax() {
    var xhr;              //聲明一個對象用來裝入XMLHttpRequest
    if(window.ActiveXObject){          //IE5 IE6實例化XHR對象
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else if (window.XMLHttpRequest){  //現(xiàn)代瀏覽器實例化XHR對象
        xhr = new XMLHttpRequest();
    }
    xhr.open("get","test.php",true);  //啟動請求
    xhr.onreadystatechange=fun;       //觸發(fā)回調函數(shù)
    xhr.send(null);                   //發(fā)送請求
    function fun() {                  //定義回調函數(shù)
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("resText").innerHTML=xhr.responseText;
            }
        }
    }
}