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

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

從現(xiàn)在的角度

提升用戶體驗(yàn)

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

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

從未來(lái)的角度

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

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

基于 XmlHttpRequest 對(duì)象

通過(guò) XMLHttpRequest 來(lái)和服務(wù)器進(jìn)行異步通信

基于 WEB 標(biāo)準(zhǔn)

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

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

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

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

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

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

responseText：從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。

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

responseBody：

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

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

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

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

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

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

3（數(shù)據(jù)傳送中）：已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及 http 頭不全，這時(shí)通過(guò) responseBody 和 responseText 獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤。

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

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

open

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

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

傳輸方式，false為同步，true為異步。默認(rèn)為true

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

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

send

發(fā)送請(qǐng)求。

setRequestHeader

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

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

    /**
     * 使用原生js封裝ajax
     * 兼容xhr對(duì)象
     */
    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)或?yàn)g覽器不支持XHR對(duì)象！");
        }
    }
    /**
     * 仍然需要更改 on 2015/11/18.
     * 異步的時(shí)候需要觸發(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();
        }
    }

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

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

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

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

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

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

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

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

關(guān)注點(diǎn)：

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

不具備 upload 對(duì)象及其事件方法。

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

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

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

異步并不等于即時(shí)。

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

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

先發(fā)送文件頭。

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

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

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

以及：

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

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

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