摘要：基于標(biāo)準(zhǔn)被廣泛支持。這樣的類最初是在中作為一個名為的對象引入的。請求還沒有被發(fā)送。當(dāng)為，這個屬性返回目前已經(jīng)接收的響應(yīng)部分。由服務(wù)器返回的狀態(tài)代碼，如表示成功，而表示錯誤。方法取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動。

總括： 本文講解了ajax的歷史，工作原理以及優(yōu)缺點，對XMLHttpRequest對象進行了詳細的講解，并使用原生js實現(xiàn)了一個ajax對象以方便日常開始使用。

damonare的ajax庫：damonare的ajax庫

原文博客地址：你真的懂a(chǎn)jax嗎？

知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）

博主博客地址：Damonare的個人博客

古之立大事者，不惟有超世之才，亦必有堅忍不拔之志。

相信每個前端程序員日常工作中都避免不了的工作就是和后端聯(lián)調(diào)，聯(lián)調(diào)自然就避免不了使用ajax，但我相信，不管是使用jquery封裝的ajax方法還是使用vue的插件vue-resource的程序員，真正對于ajax有過深入探究的并不多，我們更多的是為了使用而使用，至于它的原理往往因為即使不了解依舊能做出東西而懶得去看，我們都被輪子們慣壞了。根據(jù)二八定律，即任何一組東西中，最重要的只占其中一小部分，約20%，其余80%的盡管是多數(shù)，卻是次要的。因 此，如果想擠進那20%的行列，就要學(xué)到一般人學(xué)不到的深度，學(xué)到一般人學(xué)不了的東西。

好的，現(xiàn)在我們從頭來說一下ajax。

在上世紀(jì)90年代，幾乎所有的網(wǎng)站都由HTML頁面實現(xiàn)，服務(wù)器處理每一個用戶請求都需要重新加載網(wǎng)頁。形式是怎樣的呢？就比如說你在瀏覽器上登錄自己的微博賬號，填完了表單，點擊登錄按鈕，一次"完整"的HTTP請求就此觸發(fā)，服務(wù)器發(fā)現(xiàn)你的登錄密碼不對頭，立馬把網(wǎng)頁原原本本的返回給你，在用戶看來呢，就是一次重新加載的過程！用戶體驗極差！而且這個做法浪費了許多帶寬，因為在前后兩個頁面中的大部分HTML碼往往是相同的。由于每次應(yīng)用的溝通都需要向服務(wù)器發(fā)送請求，應(yīng)用的回應(yīng)時間依賴于服務(wù)器的回應(yīng)時間。這導(dǎo)致了用戶界面的回應(yīng)比本機應(yīng)用慢得多。

到了2005年，google率先在它的應(yīng)用(諸如google地圖、gmail)里使用了ajax技術(shù)，這才讓這項技術(shù)正式風(fēng)靡開來。

如今它的應(yīng)用已經(jīng)十分廣泛：

運用XHTML+CSS來表達信息；

運用JavaScript操作DOM（Document Object Model）來運行動態(tài)效果；

運用XML和XSLT操作數(shù)據(jù)；

運用XMLHttpRequest或新的Fetch API與網(wǎng)頁服務(wù)器進行異步數(shù)據(jù)交換；

注意：AJAX與Flash、Silverlight和Java Applet等RIA技術(shù)是有區(qū)分的。

?Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個中間層(ajax引擎),使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗證(比如判斷用戶是否輸入了數(shù)據(jù))和數(shù)據(jù)處理(比如判斷用戶輸入數(shù)據(jù)是否是數(shù)字)等都交給Ajax引擎自己來做,?只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務(wù)器提交請求。把這些交給了Ajax引擎，用戶操作起來也就感覺更加流暢了。

無刷新更新數(shù)據(jù)。

AJAX最大優(yōu)點就是能在不刷新整個頁面的前提下與服務(wù)器通信維護數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。

2.異步與服務(wù)器通信。

AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸、時間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量。

3.前端和后端負(fù)載平衡。

AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)，提升站點性能。

4.基于標(biāo)準(zhǔn)被廣泛支持。

AJAX基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行。隨著Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計的技術(shù)，為那些不支持JavaScript的用戶提供替代功能。

5.界面與應(yīng)用分離。

Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離），有利于分工合作、減少非技術(shù)人員對頁面的修改造成的WEB應(yīng)用程序錯誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。

AjAX干掉了Back和加入收藏書簽功能，即對瀏覽器機制的破壞。

對應(yīng)用Ajax最主要的批評就是，它可能破壞瀏覽器的后退與加入收藏書簽功能。在動態(tài)更新頁面的情況下，用戶無法回到前一個頁面狀態(tài)，這是因為瀏覽器僅能記下歷史記錄中的靜態(tài)頁面。一個被完整讀入的頁面與一個已經(jīng)被動態(tài)修改過的頁面之間的可能差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在Ajax應(yīng)用程序中，卻無法這樣做。不過開發(fā)者已想出了種種辦法來解決這個問題，HTML5?之前的方法大多是在用戶單擊后退按鈕訪問歷史記錄時，通過創(chuàng)建或使用一個隱藏的IFRAME來重現(xiàn)頁面上的變更。（例如，當(dāng)用戶在Google Maps中單擊后退時，它在一個隱藏的IFRAME中進行搜索，然后將搜索結(jié)果反映到Ajax元素上，以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時的狀態(tài)）。
關(guān)于無法將狀態(tài)加入收藏或書簽的問題，HTML5之前的一種方式是使用URL片斷標(biāo)識符（通常被稱為錨點，即URL中#后面的部分）來保持追蹤，允許用戶回到指定的某個應(yīng)用程序狀態(tài)。（許多瀏覽器允許JavaScript動態(tài)更新錨點，這使得Ajax應(yīng)用程序能夠在更新顯示內(nèi)容的同時更新錨點。）HTML5?以后可以直接操作瀏覽歷史，并以字符串形式存儲網(wǎng)頁狀態(tài)，將網(wǎng)頁加入網(wǎng)頁收藏夾或書簽時狀態(tài)會被隱形地保留。上述兩個方法也可以同時解決無法后退的問題。

2.AJAX的安全問題。

AJAX技術(shù)給用戶帶來很好的用戶體驗的同時也對IT企業(yè)帶來了新的安全威脅，Ajax技術(shù)就如同對企業(yè)數(shù)據(jù)建立了一個直接通道。這使得開發(fā)者在不經(jīng)意間會暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯。Ajax的邏輯可以對客戶端的安全掃描技術(shù)隱藏起來，允許黑客從遠端服務(wù)器上建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基于Credentials的安全漏洞等等。

3.因為網(wǎng)絡(luò)延遲需要給用戶提供必要提示

進行Ajax開發(fā)時，網(wǎng)絡(luò)延遲——即用戶發(fā)出請求到服務(wù)器發(fā)出響應(yīng)之間的間隔——需要慎重考慮。如果不給予用戶明確的回應(yīng)，沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù)，或者對XMLHttpRequest的不恰當(dāng)處理，都會使用戶感到厭煩。通常的解決方案是，使用一個可視化的組件來告訴用戶系統(tǒng)正在進行后臺操作并且正在讀取數(shù)據(jù)和內(nèi)容。

Ajax(Asynchronous JavaScript and XML)不是指一種單一的技術(shù)，而是有機地利用了一系列相關(guān)的技術(shù)。雖然其名稱包含XML，但實際上數(shù)據(jù)格式可以由JSON代替，進一步減少數(shù)據(jù)量，形成所謂的AJAJ。為了使用JavaScript向服務(wù)器發(fā)出?HTTP?請求，需要一個提供此功能的類的實例。這就是XMLHttpRequest的由來。這樣的類最初是在Internet Explorer中作為一個名為XMLHTTP的ActiveX對象引入的。然后，Mozilla，Safari和其他瀏覽器，實現(xiàn)一個XMLHttpRequest類，支持Microsoft的原始ActiveX對象的方法和屬性。同時微軟也實現(xiàn)了XMLHttpRequest。

顯而易見XMLHttpRequest類是重中之重了。

onreadystatechange

一個JavaScript函數(shù)對象，當(dāng)readyState屬性改變時會調(diào)用它。回調(diào)函數(shù)會在user interface線程中調(diào)用。

readyState

HTTP 請求的狀態(tài).當(dāng)一個 XMLHttpRequest 初次創(chuàng)建時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應(yīng)，這個值增加到 4。

5 個狀態(tài)中每一個都有一個相關(guān)聯(lián)的非正式的名稱，下表列出了狀態(tài)、名稱和含義：

readyState 的值不會遞減，除非當(dāng)一個請求在處理過程中的時候調(diào)用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發(fā) onreadystatechange 事件句柄。

responseText

目前為止為服務(wù)器接收到的響應(yīng)體（不包括頭部），或者如果還沒有接收到數(shù)據(jù)的話，就是空字符串。

如果 readyState 小于 3，這個屬性就是一個空字符串。當(dāng) readyState 為 3，這個屬性返回目前已經(jīng)接收的響應(yīng)部分。如果 readyState 為 4，這個屬性保存了完整的響應(yīng)體。

如果響應(yīng)包含了為響應(yīng)體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8。

responseXML

對請求的響應(yīng)，解析為 XML 并作為?Document 對象返回。

status

由服務(wù)器返回的?HTTP 狀態(tài)代碼，如 200 表示成功，而 404 表示 "Not Found" 錯誤。當(dāng) readyState 小于 3 的時候讀取這一屬性會導(dǎo)致一個異常。

statusText

這個屬性用名稱而不是數(shù)字指定了請求的 HTTP 的狀態(tài)代碼。也就是說，當(dāng)狀態(tài)為 200 的時候它是 "OK"，當(dāng)狀態(tài)為 404 的時候它是 "Not Found"。和 status 屬性一樣，當(dāng) readyState 小于 3 的時候讀取這一屬性會導(dǎo)致一個異常。

abort()

取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動。

這個方法把 XMLHttpRequest 對象重置為 readyState 為 0 的狀態(tài)，并且取消所有未決的網(wǎng)絡(luò)活動。例如，如果請求用了太長時間，而且響應(yīng)不再必要的時候，可以調(diào)用這個方法。

getAllResponseHeaders()

把 HTTP 響應(yīng)頭部作為未解析的字符串返回。

如果 readyState 小于 3，這個方法返回 null。否則，它返回服務(wù)器發(fā)送的所有 HTTP 響應(yīng)的頭部。頭部作為單個的字符串返回，一行一個頭部。每行用換行符 "rn" 隔開。

getResponseHeader()

返回指定的 HTTP 響應(yīng)頭部的值。其參數(shù)是要返回的 HTTP 響應(yīng)頭部的名稱?？梢允褂萌魏未笮憗碇贫ㄟ@個頭部名字，和響應(yīng)頭部的比較是不區(qū)分大小寫的。

該方法的返回值是指定的 HTTP 響應(yīng)頭部的值，如果沒有接收到這個頭部或者 readyState 小于 3 則為空字符串。如果接收到多個有指定名稱的頭部，這個頭部的值被連接起來并返回，使用逗號和空格分隔開各個頭部的值。

open()

初始化一個請求. 該方法用于JavaScript代碼中;如果是本地代碼, 使用?openRequest())方法代替.

注意:?在一個已經(jīng)激活的request下（已經(jīng)調(diào)用open()或者openRequest()方法的request）再次調(diào)用這個方法相當(dāng)于調(diào)用了abort（）方法。

參數(shù)

method

請求所使用的HTTP方法; 例如?"GET", "POST", "PUT", "DELETE"等. 如果下個參數(shù)是非HTTP(S)的URL,則忽略該參數(shù).

url

該請求所要訪問的URL

async

一個可選的布爾值參數(shù)，默認(rèn)為true,意味著是否執(zhí)行異步操作，如果值為false,則send()方法不會返回任何東西，直到接受到了服務(wù)器的返回數(shù)據(jù)。如果為值為true，一個對開發(fā)者透明的通知會發(fā)送到相關(guān)的事件監(jiān)聽者。這個值必須是true,如果multipart 屬性是true，否則將會出現(xiàn)一個意外。

user

用戶名,可選參數(shù),為授權(quán)使用;默認(rèn)參數(shù)為空string.

password

密碼,可選參數(shù),為授權(quán)使用;默認(rèn)參數(shù)為空string.

send()

發(fā)送 HTTP 請求，使用傳遞給 open() 方法的參數(shù)，以及傳遞給該方法的可選請求體。

setRequestHeader()

向一個打開但未發(fā)送的請求設(shè)置或添加一個 HTTP 請求(設(shè)置請求頭)。

參數(shù)

header

將要被賦值的請求頭名稱

value

給指定的請求頭賦的值

下面是使用原生js寫的ajax：

var ajax = {};
ajax.httpRequest = function () {
    //判斷是否支持XMLHttpRequest對象
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    //兼容IE瀏覽器
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];
    //定義局部變量xhr,儲存IE瀏覽器的ActiveXObject對象
    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    //默認(rèn)異步
    if (async === undefined) {
        async = true;
    }
    var httpRequest = ajax.httpRequest();
    //初始化HTTP請求
    httpRequest.open(method, url, async);
    //onreadystatechange函數(shù)對象
    httpRequest.onreadystatechange = function () {
        //readyState 的值等于4，從服務(wù)器拿到了數(shù)據(jù)
        if (httpRequest.readyState == 4) {
            //回調(diào)服務(wù)器響應(yīng)數(shù)據(jù)
            callback(httpRequest.responseText)
        }
    };
    if (method == "POST") {
          //給指定的HTTP請求頭賦值
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
      //發(fā)送HTTP請求
    httpRequest.send(data);
};
//實現(xiàn)GET請求
ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? "?" + query.join("&") : ""), callback, "GET", null, async)
};
//實現(xiàn)POST請求
ajax.post = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, "POST", query.join("&"), async)
};

如果你使用jquery或是zepto很大部分是因為它的ajax兼容性高的緣故，不妨試試這個：damonare的ajax庫，喜歡給個star也是可以的。

ajax技術(shù)對于整個web應(yīng)用意義都是非凡的，僅以此篇致敬那些曾經(jīng)奮斗在一線為了ajax技術(shù)的實現(xiàn)和普及做出工作的前輩們。

Ajax工作原理記優(yōu)缺點

Ajax