首先，新建一個 FormData 對象：

var formData = new FormData();

然后，為它添加表單項：

formData.append("username", "semlinker");
formData.append("id", 2005821040);

最后，直接傳送這個FormData對象。這與提交網(wǎng)頁表單的效果，完全一樣。

xhr.send(formData);

FormData 對象也可以用來獲取網(wǎng)頁表單的值。

var form = document.getElementById("myform"); // 獲取頁面上表單對象
var formData = new FormData(form);
formData.append("username", "semlinker"); // 添加一個表單項
xhr.open("POST", form.action);
xhr.send(formData);

新版 XMLHttpRequest 對象，不僅可以發(fā)送文本信息，還可以上傳文件。

1.為了上傳文件, 我們得先選中一個文件. 一個 type 為 file 的 input 輸入框

2.然后用 FormData 對象包裹選中的文件

var input = document.getElementById("input"),
    formData = new FormData();
formData.append("file",input.files[0]); // file名稱與后臺接收的名稱一致

3.設(shè)置上傳地址和請求方法

var url = "http://localhost:3000/upload",
    method = "POST";

4.發(fā)送 FormData 對象

xhr.send(formData);

新版本的 XMLHttpRequest 對象，可以向不同域名的服務(wù)器發(fā)出 HTTP 請求。這叫做 "跨域資源共享"（Cross-origin resource sharing，簡稱 CORS）。

使用"跨域資源共享"的前提，是瀏覽器必須支持這個功能，而且服務(wù)器端必須同意這種"跨域"。如果能夠滿足上面的條件，則代碼的寫法與不跨域的請求完全一樣。

xhr.open("GET", "http://other.server/and/path/to/script");

XMLHttpRequest Level 1 XMLHttpRequest 對象只能處理文本數(shù)據(jù)，新版則可以處理二進制數(shù)據(jù)。從服務(wù)器取回二進制數(shù)據(jù)，較新的方法是使用新增的 responseType 屬性。如果服務(wù)器返回文本數(shù)據(jù)，這個屬性的值是 "TEXT"，這是默認值。較新的瀏覽器還支持其他值，也就是說，可以接收其他格式的數(shù)據(jù)。

你可以把 responseType 設(shè)為 blob，表示服務(wù)器傳回的是二進制對象。

var xhr = new XMLHttpRequest();
xhr.open("GET", "/path/to/image.png");
xhr.responseType = "blob";
xhr.send();

接收數(shù)據(jù)的時候，用瀏覽器自帶的 Blob 對象即可。

一個 ?Blob 對象表示一個不可變的, 原始數(shù)據(jù)的類似文件對象。Blob 表示的數(shù)據(jù)不一定是一個 JavaScript 原生格式。?File?接口基于Blob，繼承 blob功能并將其擴展為支持用戶系統(tǒng)上的文件。

var blob = new Blob([xhr.response], {type: "image/png"});

更多示例請參考?發(fā)送和接收二進制數(shù)據(jù)?。

新版本的 XMLHttpRequest 對象，傳送數(shù)據(jù)的時候，有一個 progress 事件，用來返回進度信息。

它分成上傳和下載兩種情況。下載的 progress 事件屬于 XMLHttpRequest 對象，上傳的 progress 事件屬于XMLHttpRequest.upload 對象。

我們先定義progress事件的回調(diào)函數(shù)：

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

然后，在回調(diào)函數(shù)里面，使用這個事件的一些屬性。

function updateProgress(event) {
　　if (event.lengthComputable) {
　　　　var percentComplete = event.loaded / event.total;
　　}
}

上面的代碼中，event.total 是需要傳輸?shù)目傋止?jié)，event.loaded 是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable 不為真，則 event.total 等于0。

各個瀏覽器 XMLHttpRequest Level 2 的兼容性 - Can I use/xhr2

XHR 可以傳輸基于文本和二進制數(shù)據(jù)。實際上，瀏覽器可以為各種本地數(shù)據(jù)類型提供自動編碼和解碼，這樣可以讓應(yīng)用程序?qū)⑦@些類型直接傳遞給XHR，以便正確編碼，反之亦然，這些類型可以由瀏覽器自動解碼：

ArrayBuffer - 固定長度二進制數(shù)據(jù)緩沖區(qū)

Blob - 二進制不可變數(shù)據(jù)

Document - HTML或XML文檔

JSON - JavaScript Object Notation

Text - 普通文本

XHR 下載圖片示例：

var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://avatars2.githubusercontent.com/u/4220799?v=3");
    xhr.responseType = "blob"; // 1

    xhr.onload = function() {
        if (this.status == 200) {
            var img = document.createElement("img");
            img.src = window.URL.createObjectURL(this.response); // 2
            img.onload = function() {
                window.URL.revokeObjectURL(this.src); //3
            };
            document.body.appendChild(img);
        }
    };
    xhr.send();

(1) 設(shè)置響應(yīng)的數(shù)據(jù)類型為 blob

(2) 基于Blob創(chuàng)建一個唯一的對象URL，并作為圖片的源地址 (URL.createObjectURL())

(3) 圖片加載成功后釋放對象的URL(URL.revokeObjectURL())

通過 XHR 上傳數(shù)據(jù)對于所有數(shù)據(jù)類型來說都是簡單而有效的。實際上，唯一的區(qū)別是當(dāng)我們在XHR請求中調(diào)用 send() 時，我們需傳遞不同的數(shù)據(jù)對象。其余的由瀏覽器處理：

var xhr = new XMLHttpRequest();
xhr.open("POST","/upload");
xhr.onload = function() { ... };
xhr.send("text string"); // 1

var formData = new FormData(); // 2
formData.append("id", 123456);
formData.append("topic", "performance");

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onload = function() { ... };
xhr.send(formData); // 3

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onload = function() { ... };
var uInt8Array = new Uint8Array([1, 2, 3]); // 4
xhr.send(uInt8Array.buffer); // 5

(1) 發(fā)送普通的文本到服務(wù)器

(2) 通過 FormData API 創(chuàng)建動態(tài)表單

(3) 發(fā)送 FormData 數(shù)據(jù)到服務(wù)器

(4) 創(chuàng)建 Unit8Array 數(shù)組 (Uint8Array 數(shù)組類型表示一個8位無符號整型數(shù)組，創(chuàng)建時內(nèi)容被初始化為0)

(5) 發(fā)送二進制數(shù)據(jù)到服務(wù)器

XHR send() 方法簽名：

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

除此之外，XHR 還支持大文件分塊傳輸：

var blob = ...; // 1

const BYTES_PER_CHUNK = 1024 * 1024; // 2
const SIZE = blob.size;

var start = 0;
var end = BYTES_PER_CHUNK;

while(start < SIZE) { // 3
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload");
  xhr.onload = function() { ... };

  xhr.setRequestHeader("Content-Range", start+"-"+end+"/"+SIZE); // 4
  xhr.send(blob.slice(start, end)); // 5

  start = end;
  end = start + BYTES_PER_CHUNK;
}

(1) 一個任意的數(shù)據(jù)塊 (二進制或文本)

(2) 將數(shù)據(jù)庫大小設(shè)置為 1MB

(3) 迭代提供的數(shù)據(jù)，增量為1MB

(4) 設(shè)置上傳的數(shù)據(jù)范圍 (Content-Range請求頭)

(5) 通過 XHR 上傳 1MB 數(shù)據(jù)塊

XHR 對象提供了一系列 API，用于監(jiān)聽進度事件，表示請求的當(dāng)前狀態(tài)：

每個 XHR 傳輸都以 loadstart 事件開始，并以 loadend 事件結(jié)束，并在這兩個事件期間觸發(fā)一個或多個附加事件來指示傳輸?shù)臓顟B(tài)。因此，為了監(jiān)控進度，應(yīng)用程序可以在 XHR 對象上注冊一組 JavaScript 事件偵聽器：

var xhr = new XMLHttpRequest();
xhr.open("GET","/resource");
xhr.timeout = 5000; // 1

xhr.addEventListener("load", function() { ... }); // 2
xhr.addEventListener("error", function() { ... }); // 3

var onProgressHandler = function(event) {
  if(event.lengthComputable) {
    var progress = (event.loaded / event.total) * 100; // 4
    ...
  }
}

xhr.upload.addEventListener("progress", onProgressHandler); // 5
xhr.addEventListener("progress", onProgressHandler); // 6
xhr.send();

(1) 設(shè)置請求超時時間為 5,000 ms (默認無超時時間)

(2) 注冊成功回調(diào)

(3) 注冊異?；卣{(diào)

(4) 計算已完成的進度

(5) 注冊上傳進度事件回調(diào)

(6) 注冊下載進度事件回調(diào)

在某些情況下，應(yīng)用程序可能需要或希望逐步處理數(shù)據(jù)流：將數(shù)據(jù)上傳到服務(wù)器，使其在客戶機上可用，或者在從服務(wù)器下載數(shù)據(jù)時，進行流式處理。

var xhr = new XMLHttpRequest();
xhr.open("GET", "/stream");
xhr.seenBytes = 0;

xhr.onreadystatechange = function() {  // 1
  if(xhr.readyState > 2) {
    var newData = xhr.responseText.substr(xhr.seenBytes); // 2
    // process newData
    xhr.seenBytes = xhr.responseText.length; // 3
  }
};

xhr.send();

(1) 監(jiān)聽 onreadystatechange 事件

(2) 從部分響應(yīng)中提取新數(shù)據(jù)

(3) 更新處理的字節(jié)偏移

這個例子可以在大多數(shù)現(xiàn)代瀏覽器中使用。但是,性能并不好，而且還有大量的注意事項和問題：

請注意，我們正在手動跟蹤所看到字節(jié)的偏移量，然后手動分割數(shù)據(jù)：responseText 正在緩沖完整的響應(yīng)！對于小的傳輸，這可能不是一個問題，但對于更大的下載，特別是在內(nèi)存受限的設(shè)備，如手機，這是一個問題。釋放緩沖響應(yīng)的唯一方法是完成請求并打開一個新的請求。

部分響應(yīng)只能從 responseText 屬性中讀取，這將限制為僅限文本傳輸。沒有辦法讀取二進制傳輸?shù)牟糠猪憫?yīng)。

一旦讀取了部分數(shù)據(jù)，我們必須識別消息邊界：應(yīng)用程序邏輯必須定義自己的數(shù)據(jù)格式，然后緩沖并解析流以提取單個消息。

瀏覽器在處理緩沖數(shù)據(jù)方面有所不同：一些瀏覽器可能會立即釋放數(shù)據(jù)，而其他瀏覽器可能會緩沖小的響應(yīng)并等到積累到一定大小的數(shù)據(jù)塊才釋放它們。

瀏覽器對不同 Content-Type 資源類型的處理方式不同，對于某些資源類型允許逐步讀取 - 例如，text / html 類型，而其他 Content-Type 類型只能使用 application / x-javascript。

從服務(wù)器檢索更新的最簡單的策略之一是讓客戶端進行定期檢查：客戶端可以以周期性間隔（輪詢服務(wù)器）啟動后臺XHR請求，以檢查更新。如果新數(shù)據(jù)在服務(wù)器上可用，則在響應(yīng)中返回，否則響應(yīng)為空。

定時輪詢的方式很簡單，但如果定時間隔很短的話，也是很低效。因此設(shè)置合適的時間間隔顯得至關(guān)重要：輪詢間隔時間過長，會導(dǎo)致更新不及時，然而間隔時間過短的話，則會導(dǎo)致客戶端與服務(wù)器不必要的流程和高開銷。接下來我們來看一個簡單的示例：

function checkUpdates(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function() { ... }; // 1
  xhr.send();
}

setInterval(function() { checkUpdates("/updates") }, 60000); // 2

(1) 處理服務(wù)端接收的數(shù)據(jù)

(2) 設(shè)置定時輪詢時間為 60s

定時輪詢會產(chǎn)生以下的問題：

每個 XHR 請求都是一個獨立的 HTTP 請求，平均來說，HTTP 的請求頭可能會引起大約 800 字節(jié)的開銷 (不帶HTTP cookie)。

每個瀏覽器發(fā)起 HTTP 請求時都將攜帶額外的 500 - 800 字節(jié)的元數(shù)據(jù) (請求頭)，如 user-agent、accept、Cache-Control 緩存控制頭等。更糟糕的是，500 - 800 字節(jié)是理想的情況，如果攜帶 Cookies 信息，那么這個數(shù)值將會更大。總而言之，這些未壓縮的 HTTP 元數(shù)據(jù)會引起很大開銷。

如果數(shù)據(jù)能夠在間隔期間順序到達，那么定時輪詢可以正常工作。但我們并沒有任何機制保證數(shù)據(jù)的正常接收。另外周期性輪詢也將會引起服務(wù)器上可用的消息及其傳送到客戶端之間引入額外的延遲。簡單的理解是如果有輪詢期間有新的可用消息，客戶端是不會馬上收到此新消息，而是要等到下一次輪詢的時候，才能獲取最新數(shù)據(jù)。

除非仔細考慮，不然輪詢通常會成為無線網(wǎng)絡(luò)上昂貴的性能反模式。頻繁地輪詢會大量的消耗移動設(shè)備的電量。

平均每個 HTTP 1.x 請求會增加大約 800字節(jié)的請求和響應(yīng)開銷 (詳細信息可以查看 - Measuring and Controlling Protocol Overhead) 。另外在客戶端登錄后，我們還將產(chǎn)生一個額外的身份驗證 cookie 和 消息ID; 假設(shè)這又增加了50個字節(jié)。因此，不返回新消息的請求將產(chǎn)生 850字節(jié)開銷！現(xiàn)在假設(shè)我們有10,000個客戶端，所有的輪詢間隔時間都是60秒：
$$
(850 bytes 8 bits 10,000) / 60 seconds ≈ 1.13 Mbps
$$
每個客戶端在每個請求上發(fā)送 850 字節(jié)的數(shù)據(jù)，這轉(zhuǎn)換為每秒 167 個請求，服務(wù)器上的吞吐量大約為 1.13 Mbps！這不是一個固定的值，此外該計算值還是在假設(shè)服務(wù)器沒有向任何客戶端傳遞任何新的消息的理想情況下計算而得的。

周期性輪詢的挑戰(zhàn)在于有可能進行許多不必要的和空的檢查?？紤]到這一點，如果我們對輪詢工作流程進行了輕微的修改，而不是在沒有更新可用的情況下返回一個空的響應(yīng)，我們可以保持連接空閑，直到更新可用嗎？

（圖片來源 - https://hpbn.co/xmlhttprequest/）

通過保持長連接，直到更新可用，數(shù)據(jù)可以立即發(fā)送到客戶端，一旦它在服務(wù)器上可用。因此，長時間輪詢?yōu)橄⒀舆t提供了最佳的情況，并且還消除了空檢查，這減少了 XHR 請求的數(shù)量和輪詢的總體開銷。一旦更新被傳遞，長的輪詢請求完成，并且客戶端可以發(fā)出另一個長輪詢請求并等待下一個可用的消息：

function checkUpdates(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function() { // 1
    ...
    checkUpdates("/updates"); // 2
  };
  xhr.send();
}

checkUpdates("/updates"); // 3

(1) 處理接收到的數(shù)據(jù)并啟動下一輪檢測更新

(2) 啟動下一輪檢測更新

(3) 發(fā)起首次更新請求

那么長時間輪詢總是比定期輪詢更好的選擇？除非消息到達率已知且不變，否則長輪詢將始終提供更短的消息延遲。

另一方面，開銷討論需要更細微的觀點。首先，請注意，每個傳遞的消息仍然引起相同的 HTTP 開銷;每個新消息都是獨立的 HTTP 請求。但是，如果消息到達率高，那么長時間輪詢會比定期輪詢發(fā)出更多的XHR請求！

長輪詢通過最小化消息延遲來動態(tài)地適應(yīng)消息到達速率，這是您可能想要的或可能不需要的行為。如果對消息延遲要求不高的話，則定時輪詢可能是更有效的傳輸方式 - 例如，如果消息更新速率較高，則定時輪詢提供簡單的 "消息聚合" 機制 (即合并一定時間內(nèi)的消息)，這可以減少請求數(shù)量并提高移動設(shè)備的電池壽命。

Mock.js 是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨立于后端進行開發(fā)，幫助編寫單元測試。提供了以下模擬功能：

根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)

模擬 Ajax 請求，生成并返回模擬數(shù)據(jù)

基于 HTML 模板生成模擬數(shù)據(jù)

詳細信息，請查看 - Mock.js 文檔

Zone 是下一個 ECMAScript 規(guī)范的建議之一。Angular 團隊實現(xiàn)了 JavaScript 版本的 zone.js ，它是用于攔截和跟蹤異步工作的機制。

Zone 是一個全局的對象，用來配置有關(guān)如何攔截和跟蹤異步回調(diào)的規(guī)則。Zone 有以下能力：

攔截異步任務(wù)調(diào)度，如 setTimeout、setInterval、XMLHttpRequest 等

提供了將數(shù)據(jù)附加到 zones 的方法

為異常處理函數(shù)提供正確的上下文

攔截阻塞的方法，如 alert、confirm 方法

zone.js 內(nèi)部使用 Monkey Patch 方式，攔截 XMLHttpRequest.prototype 對象中的 open、send、abort 等方法。

// zone.js 源碼片段
var openNative = patchMethod(window.XMLHttpRequest.prototype, "open", function () { 
    return function (self, args) {
        self[XHR_SYNC] = args[2] == false;
        return openNative.apply(self, args);
    }; 
});

Oboe.js 通過將 HTTP 請求-應(yīng)答模型封裝在一個漸進流式接口中，幫助網(wǎng)頁應(yīng)用快速應(yīng)答。它將 streaming 和downloading 間的轉(zhuǎn)換與SAX和DOM間JSON的解析整合在一起。它是個非常小的庫，不依賴于其他程序庫。它可以在 ajax 請求結(jié)束前就開始解析 json 變得十分容易，從而提高應(yīng)用的應(yīng)答速度。另外，它支持 Node.js 框架，還可以讀入除了 http 外的其他流。

有興趣的讀者，推薦看一下官網(wǎng)的可交互的演示示例 - Why Oboe.js

(備注：該庫就是文中 - 使用XHR流式傳輸數(shù)據(jù)章節(jié)的實際應(yīng)用，不信往下看)

// oboe-browser.js 源碼片段
function handleProgress() {            
    var textSoFar = xhr.responseText,
        newText = textSoFar.substr(numberOfCharsAlreadyGivenToCallback);
    if( newText ) {
        emitStreamData( newText );
    } 
    numberOfCharsAlreadyGivenToCallback = len(textSoFar);
}

fetch 函數(shù)是一個基于 Promise 的機制，用于在瀏覽器中以編程方式發(fā)送 Web 請求。該項目是實現(xiàn)標準 Fetch 規(guī)范的一個子集的 polyfill ，足以作為傳統(tǒng) Web 應(yīng)用程序中 XMLHttpRequest 的代替品。

詳細信息，請參考 - Github - fetch

Fetch API 兼容性，請參考 - Can I use Fetch

function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

代碼片段來源 - ArrayBuffer與字符串的互相轉(zhuǎn)換

function str2ab(str) {
  var buf = new ArrayBuffer(str.length * 2); // 每個字符占用2個字節(jié)
  var bufView = new Uint16Array(buf);
  for (var i = 0, strLen = str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

代碼片段來源 - ArrayBuffer與字符串的互相轉(zhuǎn)換

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", 
        "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {} 
}

if (!XMLHttpRequest.prototype.sendAsBinary) {
  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
    }
    this.send(ui8Data);
  };
}

function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

應(yīng)用示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(readBody(xhr));
    }
}
xhr.open("GET", "https://www.baidu.com", true);
xhr.send(null);

export function getResponseURL(xhr: any): string {
  if ("responseURL" in xhr) {
    return xhr.responseURL;
  }
  if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) {
    return xhr.getResponseHeader("X-Request-URL");
  }
  return;
}

代碼片段來源 - Github - @angular/http - http_utils.ts

export const isSuccess = (status: number): boolean => (status >= 200 && status < 300);

代碼片段來源 - Github - @angular/http - http_utils.ts

function paramParser(rawParams: string = ""): Map {
  const map = new Map();
  if (rawParams.length > 0) {
    const params: string[] = rawParams.split("&");
    params.forEach((param: string) => {
      const eqIdx = param.indexOf("=");
      const [key, val]: string[] =
          eqIdx == -1 ? [param, ""] : [param.slice(0, eqIdx), param.slice(eqIdx + 1)];
      const list = map.get(key) || [];
      list.push(val);
      map.set(key, list);
    });
  }
  return map;
}

代碼片段來源 - Github - @angular/http - url_search_params.ts

ts 轉(zhuǎn)換為 js 的代碼如下：

   function paramParser(rawParams) {
        if (rawParams === void 0) { rawParams = ""; }
        var map = new Map();
        if (rawParams.length > 0) {
            var params = rawParams.split("&");
            params.forEach(function (param) {
                var eqIdx = param.indexOf("=");
                var _a = eqIdx == -1 ? [param, ""] : 
                    [param.slice(0, eqIdx), param.slice(eqIdx + 1)], key = _a[0], 
                        val = _a[1];
                var list = map.get(key) || [];
                list.push(val);
                map.set(key, list);
            });
        }
        return map;
    }

var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://avatars2.githubusercontent.com/u/4220799?v=3");
    xhr.responseType = "blob";

    xhr.onload = function() {
        if (this.status == 200) {
            var img = document.createElement("img");
            img.src = window.URL.createObjectURL(this.response); 
            img.onload = function() {
                window.URL.revokeObjectURL(this.src); 
            };
            document.body.appendChild(img);
        }
    };
    xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("POST","/upload");
xhr.onload = function() { ... };
xhr.send("text string"); 

var formData = new FormData(); 
formData.append("id", 123456);
formData.append("topic", "performance");

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onload = function() { ... };
xhr.send(formData); 

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onload = function() { ... };
var uInt8Array = new Uint8Array([1, 2, 3]); 
xhr.send(uInt8Array.buffer);

progress 元素

0

定義 progress 事件的回調(diào)函數(shù)

xhr.upload.onprogress = function (event) {
　　if (event.lengthComputable) {
　　　　　　var complete = (event.loaded / event.total * 100 | 0);
　　　　　　var progress = document.getElementById("uploadprogress");
　　　　　　progress.value = progress.innerHTML = complete;
　　}
};

注意，progress事件不是定義在xhr，而是定義在xhr.upload，因為這里需要區(qū)分下載和上傳，下載也有一個progress事件。

XMLHttpRequest 返回 status 時，會執(zhí)行以下步驟：

如果狀態(tài)是 UNSENT 或 OPENED，則返回 0

如果錯誤標志被設(shè)置，則返回 0

否則返回 HTTP 狀態(tài)碼

另外當(dāng)訪問本地文件資源或在 Android 4.1 stock browser 中從應(yīng)用緩存中獲取文件時，XMLHttpRequest 的 status 值也會為0。

示例一：

var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://www.w3schools.com/XML/cd_catalog.xml", true);
xmlhttp.onreadystatechange=function() {
  if(xmlhttp.readyState == 4) console.log("status " + xmlhttp.status);
};
xmlhttp.addEventListener("error", function (error) {
   console.dir(error);
});
xmlhttp.send();

以上代碼運行后，將會在控制臺輸出：

status 0
ProgressEvent # error 對象

client . send([body = null])
Initiates the request. The optional argument provides the request body. The argument is ignored if request method is GET or HEAD.  —— xhr.spec

通過 XMLHttpRequest 規(guī)范，我們知道當(dāng)請求方法是 GET 或 HEAD 時，send() 方法的 body 參數(shù)值將會被忽略。那么對于我們常用的 GET 請求，我們要怎么傳遞參數(shù)呢？解決參數(shù)傳遞可以使用以下兩種方式：

URL 傳參 - 常用方式，有大小限制大約為 2KB

請求頭傳參 - 一般用于傳遞 token 等認證信息

URL 傳參

var url = "bla.php";
var params = "somevariable=somevalue&anothervariable=anothervalue";
var http = new XMLHttpRequest();

http.open("GET", url+"?"+params, true);
http.onreadystatechange = function()
{
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(null); // 請求方法是GET或HEAD時，設(shè)置請求體為空

在日常開發(fā)中，我們最常用的方式是傳遞參數(shù)對象，因此我們可以封裝一個 formatParams() 來實現(xiàn)參數(shù)格式，具體示例如下：

formatParams() 函數(shù)：

function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+params[key]
        })
        .join("&")
}

應(yīng)用示例：

var endpoint = "https://api.example.com/endpoint";
var params = {
  a: 1, 
  b: 2,
  c: 3
};
var url = endpoint + formatParams(params); // 實際應(yīng)用中需要判斷endpoint是否已經(jīng)包含查詢參數(shù)
// => "https://api.example.com/endpoint?a=1&b=2&c=3";

一些常用的 AJAX 庫，如 jQuery、zepto 等，內(nèi)部已經(jīng)封裝了參數(shù)序列化的方法 (如：jquery.param)，我們直接調(diào)用頂層的 API 方法即可。

(備注：以上示例來源 - stackoverflow - How do I pass along variables with XMLHttpRequest)

請求頭傳參 - (身份認證)

var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);

xhr.setRequestHeader("x-access-token", "87a476494db6ec53d0a206589611aa3f");
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
       // handle data 
    }
};
xhr.send("foo=bar&lorem=ipsum"); 

詳細的身份認證信息，請參考 - JSON Web Tokens

send() 方法簽名：

void send();

void send(ArrayBuffer data);

void send(Blob data);

void send(Document data);

void send(DOMString? data);

void send(FormData data);

POST請求示例

發(fā)送 POST 請求通常需要以下步驟：

使用 open() 方法打開連接時，設(shè)定 POST 請求方法和請求 URL地址

設(shè)置正確的 Content-Type 請求頭

設(shè)置相關(guān)的事件監(jiān)聽

設(shè)置請求體，并使用 send() 方法，發(fā)送請求

var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        // handle data
    }
}
xhr.send("foo=bar&lorem=ipsum"); 
// xhr.send("string"); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: "data" }); 
// xhr.send(document);

簡單請求

一些不會觸發(fā) CORS preflight 的請求被稱為 "簡單請求"，雖然 Fetch (定義 CORS的) 不使用這個術(shù)語。滿足下述條件的就是 "簡單請求"：

只允許下列方法：

GET

HEAD

POST

除了用戶代理自動設(shè)置的頭部外（比如 Connection， User-Agent ，或者其他任意的 Fetch 規(guī)范定義的 禁止的頭部名 ），唯一允許人工設(shè)置的頭部是 Fetch 規(guī)范定義的 CORS-safelisted request-header，如下：

Accept

Accept-Language

Content-Language

Content-Type

允許的 Content-Type 值有：

application/x-www-form-urlencoded

multipart/form-data

text/plain

預(yù)請求

不同于上面討論的簡單請求，"預(yù)請求" 要求必須先發(fā)送一個 OPTIONS 方法請求給目的站點，來查明這個跨站請求對于目的站點是不是安全的可接受的。這樣做，是因為跨站請求可能會對目的站點的數(shù)據(jù)產(chǎn)生影響。 當(dāng)請求具備以下條件，就會被當(dāng)成預(yù)請求處理：

使用下述方法以外的請求：

GET

HEAD

POST

除了用戶代理自動設(shè)置的頭部外（比如 Connection， User-Agent ，或者其他任意的 Fetch 規(guī)范定義的 “禁止的頭部名” ），預(yù)請求不包括 Fetch 規(guī)范定義的 "CORS-safelisted request-header"：

Accept

Accept-Language

Content-Language

Content-Type

Content-Type 頭部的值除了下列之外的:

application/x-www-form-urlencoded

multipart/form-data

text/plain

詳細的信息，請參考 - MDN - HTTP 訪問控制 (CORS)

在以下情況下，XMLHttpRequest 對象不會被垃圾回收：

如果 XMLHttpRequest 對象的狀態(tài)是 OPENED 且已設(shè)置 send() 的標識符

XMLHttpRequest 對象的狀態(tài)是 HEADERS_RECEIVED (已獲取響應(yīng)頭)

XMLHttpRequest 對象的狀態(tài)是 LOADING (正在下載響應(yīng)體)，并且監(jiān)聽了以下一個或多個事件：readystatechange、progress、abort、error、load、timeout、loadend

如果 XMLHttpRequest 對象在連接尚存打開時被垃圾回收機制回收了，用戶代理必須終止請求。

對于 GET 請求，瀏覽器會把 HTTP headers 和 data 一并發(fā)送出去，服務(wù)器響應(yīng) 200。

而對于 POST 請求，瀏覽器會先發(fā)送 HTTP headers，服務(wù)器響應(yīng) 100 continue ，瀏覽器再發(fā)送 data，服務(wù)器響應(yīng) 200。

詳細的信息，請參考 - 99%的人都理解錯了HTTP中GET與POST的區(qū)別

setTimeout + clearTimeout - 連續(xù)的點擊會把上一次點擊清除掉，也就是ajax請求會在最后一次點擊后發(fā)出去

disable 按鈕

緩存已成功的請求，若請求參數(shù)一致，則直接返回，不發(fā)送請求

詳細的信息，請參考 - 知乎 - 怎樣防止重復(fù)發(fā)送 Ajax 請求

眾所周知，大部分的搜索引擎爬蟲都不會執(zhí)行 JS，也就是說，如果頁面內(nèi)容由 Ajax 返回的話，搜索引擎是爬取不到部分內(nèi)容的，也就無從做 SEO (搜索引擎優(yōu)化)了。國外的 prerender.io 網(wǎng)站提供了一套比較成熟的方案，但是需要付費的。接下來我們來看一下，怎么 PhantomJS 為我們的站點做 SEO。

詳細的信息，請參考 - 用PhantomJS來給AJAX站點做SEO優(yōu)化

XMLHttpRequest 2新技巧

阮一峰 - XMLHttpRequest Level 2 使用指南

segmentfault - 你真的會使用XMLHttpRequest嗎?

Github - Ajax 知識體系大梳理

XMLHttpRequest 標準

High Performance Browser Networking - XMLHttpRequest

msdn - ActiveXObject 對象.aspx)

mdn - XMLHttpRequest

XMLHttpRequest 2新技巧

阮一峰 - XMLHttpRequest Level 2 使用指南

segmentfault - 你真的會使用XMLHttpRequest嗎?

Github - Ajax 知識體系大梳理

JavaScript 標準參考教程 (alpha) - 二進制數(shù)組?