摘要：提供一系列新事件，在中我們一般只應(yīng)用，然后檢查狀態(tài)值再決定下一步操作，提供回調(diào)函數(shù)簡化了這一步驟，在接收完數(shù)據(jù)的時候即可觸發(fā)。的事件的回調(diào)函數(shù)的事件參數(shù)有兩個重要屬性和，用來計算百分值。不具備對象及其事件方法。

AJAX 已經(jīng)是老生常談的話題了，它最早起源于1997年，由 Microsoft 發(fā)明了其中的關(guān)鍵技術(shù)并由 Google 將其發(fā)揚光大。為什么是 Google 呢，這又是一個悲傷的故事，事實上在1995年 Microsoft 成功推出 IE5 之際就已經(jīng)開始支持 XmlHttpRequset 對象，令人遺憾的是 Microsoft 高層沒有看到它的前景，以至于后來者 Google 成為 AJAX 技術(shù)的最卓越的推動者和實踐者，從而奠定 Google 在 AJAX 發(fā)展史上的領(lǐng)先地位。

從現(xiàn)在的角度

提升用戶體驗

雖然不能增加數(shù)據(jù)下載的速度和減少下載的數(shù)據(jù)，但可以減緩等待的過程

對傳統(tǒng) B/S 軟件的沖擊

從未來的角度

未來本地化轉(zhuǎn)為云端的趨勢（這里已經(jīng)不算是未來了，畢竟已經(jīng)基本實現(xiàn)了云端）

從1997這個關(guān)鍵詞上我們就知道 AJAX 并不是一種新的技術(shù)，距今已經(jīng)19年過去了 AJAX 的每次修訂依然沒有突破性的改變，由原本存在的幾種技術(shù)的組成的聚合而成：

基于 XmlHttpRequest 對象

通過 XMLHttpRequest 來和服務(wù)器進行異步通信

基于 WEB 標準

使用 CSS、HTML（XHTML）呈現(xiàn)視覺效果

操作 DOM 模型進行交互和動態(tài)呈現(xiàn)

使用 JAVASCRIPT 綁定和調(diào)用等

XMLHttpRequest 是 AJAX 的核心機制，XMLHttpRequest 最早出現(xiàn)在 IE5 中，是一種支持異步請求的技術(shù)（即 javascript 異步向服務(wù)器提出請求和處理響應(yīng)，而不阻塞線程，以達到無刷新的效果）。

以上是很官方的對 XMLHttpRequest 的解釋，這里不再重復(fù)造輪子，下面介紹一些簡單的 XMLHttpRequest 屬性：

onreadystatechange：每次狀態(tài)改變所觸發(fā)事件的事件處理程序。

responseText：從服務(wù)器進程返回數(shù)據(jù)的字符串形式。

responseXML：從服務(wù)器進程返回的DOM兼容的文檔數(shù)據(jù)對象。

responseBody：

status：從服務(wù)器返回的數(shù)字代碼，比如常見的 404（未找到）和 200（已就緒）。

status Text：伴隨狀態(tài)碼的字符串信息。

readyState：對象狀態(tài)值。

0（未初始化）：對象已建立，但是尚未初始化（尚未調(diào)用 open 方法）。

1（初始化）：對象已建立，尚未調(diào)用send方法。

2（發(fā)送數(shù)據(jù)）：send 方法已調(diào)用，但是當前的狀態(tài)及http頭未知。

3（數(shù)據(jù)傳送中）：已接收部分數(shù)據(jù)，因為響應(yīng)及 http 頭不全，這時通過 responseBody 和 responseText 獲取部分數(shù)據(jù)會出現(xiàn)錯誤。

4（完成）：數(shù)據(jù)接收完畢,此時可以通過通過 responseXml 和 responseText 獲取完整的回應(yīng)數(shù)據(jù)。

但由于不同瀏覽器之間存在差異，所以 JAVASCRIPT 創(chuàng)建一個 XMLHttpRequest 對象需要不同的方法。這個差異主要體現(xiàn)在 IE 和其它瀏覽器之間，JAVASCRIPT 函數(shù)首先檢查 XMLHttpRequest 的整體狀態(tài)并且保證它已經(jīng)完成，然后才可以執(zhí)行后續(xù)操作，其中涉及到的一些方法如下：

open

向服務(wù)器提交數(shù)據(jù)的類型，即post還是get。

請求的url地址和傳遞的參數(shù)

傳輸方式，false為同步，true為異步。默認為true

同步：同步方式(false)，客戶機就要等到服務(wù)器返回消息后才去執(zhí)行其他操作。

異步：異步通信方式(true)，客戶機就不等待服務(wù)器的響應(yīng)。

send

發(fā)送請求。

setRequestHeader

設(shè)置請求頭，如 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

在 AJAX 的整體工作流程中，我們將服務(wù)器端的 API 接口看成一個簡單的數(shù)據(jù)接口，它接受由XMLHttpRequest向服務(wù)器端發(fā)送的請求信息并返回純文本流（XML、Html、string、DataSet、json 或 Javascript 代碼）。

    /**
     * 使用原生js封裝ajax
     * 兼容xhr對象
     */
    function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){ // 非IE6瀏覽器
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){   // IE6瀏覽器
            var version = [
                "MSXML2.XMLHttp.6.0",
                "MSXML2.XMLHttp.3.0",
                "MSXML2.XMLHttp",
            ];
            for(var i = 0; i < version.length; i++){
                try{
                    return new ActiveXObject(version[i]);
                }catch(e){
                    //todo
                }
            }
        }else{
            throw new Error("您的系統(tǒng)或瀏覽器不支持XHR對象！");
        }
    }
    /**
     * 仍然需要更改 on 2015/11/18.
     * 異步的時候需要觸發(fā)onreadystatechange事件
     * readyStatus=4 即數(shù)據(jù)已經(jīng)發(fā)送完畢
     * status=200 一切已經(jīng)就緒
     */
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        // 執(zhí)行完成
        if(xhr.readyState == 4 && xhr.status==200){
            //HTTP響應(yīng)已經(jīng)完全接收才調(diào)用
            callBack();
        }
    }

目前仍有一些瀏覽器沒有實現(xiàn) XHR2，所以在應(yīng)用 AJAX 進行跨域訪問之前，首先檢測該瀏覽器是否支持跨域訪問：

    if(typeof xhr.withCredentials!=undefined){
        //瀏覽器支持 xhr2 。
    }else{
        //瀏覽器支持不 xhr2 。
    }

XHR2 提供一系列新事件，在 XHR1 中我們一般只應(yīng)用 onreadystatechange，然后檢查狀態(tài)值再決定下一步操作，XHR2 提供 onload 回調(diào)函數(shù)簡化了這一步驟，在接收完數(shù)據(jù)的時候即可觸發(fā)。

    xhr.onload=function(){
        //加載完成，進行下一步 todo。
    }

XHR2 的 onprogress事件的回調(diào)函數(shù)的事件參數(shù)有兩個重要屬性：loaded和total，用來計算百分值。

    xhr.onprogress=function(e){
        console.log("Dwonloading:"+Math.ceil(e.loaded/e.total*100)+"%");
    }

XDomainRequest.aspx) 與 XHR2 功能上類似，且在 XHR2 之前出現(xiàn)，在 IE 中 XDomainRequest 和 XMLHttpRequest 是兩個不同的對象，

    var xhr = new XDomainRequest();
    xhr.onprogress=function(e){
        console.log("Dwonloading:"+xhr.responseText.length);
    };
    xhr.onload=function(){
        //todo
    }

關(guān)注點：

IE 中 progress.aspx) 事件不具備進度功能，當每次 onprogress 觸發(fā)時可以獲得不完整的 responseText，但無法確定總體大小，所以不能確定下載進度。

不具備 upload 對象及其事件方法。

XDomainRequest.onprogress 事件是每接收到一個數(shù)據(jù)包觸發(fā)一次。

“魚，我所欲也，熊掌亦我所欲也；二者不可得兼，舍魚而取熊掌者也”，XMLHttpRequest 實現(xiàn)了頁面無刷新更新數(shù)據(jù)，從而提升用戶體驗，減少頁面整體的請求次數(shù)，減輕服務(wù)器和帶寬的壓力，但同時 XMLHttpRequest 也破壞了瀏覽器的后退機制（解決辦法：通過創(chuàng)建或使用一個隱藏的IFRAME來重現(xiàn)頁面上的變更）、破壞了程序的異常機制、違背了url和資源定位的初衷、不經(jīng)意間會暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯、跨站點腳步攻擊、SQL注入攻擊和基于credentials的安全漏洞等等問題。

另外，有一些需要注意的地方

異步并不等于即時。

XMLHttpRequest 發(fā)送請求（URL長度不到2K，可以使用GET請求數(shù)據(jù)，GET相比POST更快速）

POST 類型請求要發(fā)送兩個 TCP 數(shù)據(jù)包。

先發(fā)送文件頭。

再發(fā)送數(shù)據(jù)。

GET 類型請求只需要發(fā)送一個 TCP 數(shù)據(jù)包。

取決于你的 cookie 數(shù)量。

以及：

由于同源策略的限制，XHR（XMLHttpRequest）對象不能直接與非同源的網(wǎng)站進行數(shù)據(jù)交互，那么如何安全并合乎規(guī)則的突破這一限制呢？

在 HTML5 的概念形成之后，W3C 于2008年2月提出 XMLHttpRequest Level 2 （簡稱 XHR2）草案用以實現(xiàn)了跨域訪問，全新的事件，請求進度、響應(yīng)進度以及其他的一些新功能。與此同時 IE 也提出了 XDomianRequest ，XDomianRequest在功能上于 XHR2 類似。

瀏覽器檢查 Access-Control-Allow-Origin，具體可參考Http Access Control。