AJAX

Asynchronous JavaScript + XML（異步JavaScript和XML）, 其本身不是一種新技術，而是一個在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法。(MDN)

AJAX 是2005年提出的一種術語，并不代表某個特定的技術。

其譯名 異步JavaScript和XML 描述出了核心，就是使用 JavaScript 發送異步 HTTP 請求，這樣就擺脫了想要和服務端交互，必須刷新頁面的痛點。

學習 AJAX 相關內容前，建議有一些簡單的 HTTP 相關知識的儲備，否則很難理解其工作流程。

1. XMLHttpRequest 對象

XMLHttpRequest 對象可以提供給前端開發人員使用 JavaScript 發起 HTTP 請求的能力。該對象會被簡稱為 XHR 對象。

var xhr = new XMLHttpRequest();

這樣就獲得到了一個 XHR 對象的實例。接下來可以使用他發起請求。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() { // 當 readyState 改變的時候
  if (xhr.readyState === 4 && xhr.status === 200) { // 判斷當前請求的狀態 與 請求的狀態碼
    console.log(xhr.responseText); // 輸出服務端返回的內容
  }
}
xhr.open('GET', '/', true); // 設定 GET 請求，請求的路徑是 /，并且請求是異步的
xhr.send(); // 發送！

onreadystatechange 是一個事件處理器屬性，每次 readyState 改變的時候都會觸發。

如果 readyState 為 4，即請求已經完成，并且狀態碼是 200，表示請求結束并且服務端成功響應。

響應成功，通過 responseText 獲取到服務端響應的內容。

通過 open 方法，設置請求的方法、路徑等，例子中設置了 / 路徑，如果當前站點的域名是 imooc.com，則請求地址就是 imooc.com/，拿到的數據應該會是網站首頁的 HTML。

然后通過 send 方法發送請求，發送后 readyState 會在各個階段發送改變，然后調用 onreadystatechange。

這是一個 AJAX 請求較為基本的流程。

更多與 AJAX 相關的內容可以參閱 AJAX Wiki，相信閱讀完會有許多收獲。

2. ActiveXObject

IE6 之前是沒有 XHR 對象的，需要使用 ActiveXObject 對象，這是 IE 特有的。

考慮到 IE6 之前版本瀏覽器的市場份額，個人覺得只需要做個了解，沒太大必要再去學習使用 ActiveXObject 對象。

3. 小結

現代網頁的構成幾乎離不開 AJAX 技術，如果 JavaScript 無法發起 HTTP 請求，幾乎所有的現代網站都會癱瘓，變得難用。

除了 XHR 對象之外，還有 fetch API 這個后起之秀，也可以承擔 XHR 對象的工作。但 fetch 還有部分缺陷，如無法監控進度，對狀態碼的處理邏輯不夠符合業務，所以用戶面較廣的產品使用一般不會選擇 fetch。