首先，新建一個 FormData 對象：

var formData = new FormData();

然后，為它添加表單項：

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

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

xhr.send(formData);

FormData 對象也可以用來獲取網頁表單的值。

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

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

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

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

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

3.設置上傳地址和請求方法

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

4.發送 FormData 對象

xhr.send(formData);

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

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

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

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

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

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

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

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

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

更多示例請參考?發送和接收二進制數據?。

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

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

我們先定義progress事件的回調函數：

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

然后，在回調函數里面，使用這個事件的一些屬性。

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

上面的代碼中，event.total 是需要傳輸的總字節，event.loaded 是已經傳輸的字節。如果event.lengthComputable 不為真，則 event.total 等于0。

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

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

ArrayBuffer - 固定長度二進制數據緩沖區

Blob - 二進制不可變數據

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) 設置響應的數據類型為 blob

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

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

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

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) 發送普通的文本到服務器

(2) 通過 FormData API 創建動態表單

(3) 發送 FormData 數據到服務器

(4) 創建 Unit8Array 數組 (Uint8Array 數組類型表示一個8位無符號整型數組，創建時內容被初始化為0)

(5) 發送二進制數據到服務器

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) 一個任意的數據塊 (二進制或文本)

(2) 將數據庫大小設置為 1MB

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

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

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

XHR 對象提供了一系列 API，用于監聽進度事件，表示請求的當前狀態：

每個 XHR 傳輸都以 loadstart 事件開始，并以 loadend 事件結束，并在這兩個事件期間觸發一個或多個附加事件來指示傳輸的狀態。因此，為了監控進度，應用程序可以在 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) 設置請求超時時間為 5,000 ms (默認無超時時間)

(2) 注冊成功回調

(3) 注冊異常回調

(4) 計算已完成的進度

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

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

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

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) 監聽 onreadystatechange 事件

(2) 從部分響應中提取新數據

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

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

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

部分響應只能從 responseText 屬性中讀取，這將限制為僅限文本傳輸。沒有辦法讀取二進制傳輸的部分響應。

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

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

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

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

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

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

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

(1) 處理服務端接收的數據

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

定時輪詢會產生以下的問題：

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

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

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

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

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

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

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

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

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

checkUpdates("/updates"); // 3

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

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

(3) 發起首次更新請求

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

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

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

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

根據數據模板生成模擬數據

模擬 Ajax 請求，生成并返回模擬數據

基于 HTML 模板生成模擬數據

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

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

Zone 是一個全局的對象，用來配置有關如何攔截和跟蹤異步回調的規則。Zone 有以下能力：

攔截異步任務調度，如 setTimeout、setInterval、XMLHttpRequest 等

提供了將數據附加到 zones 的方法

為異常處理函數提供正確的上下文

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

zone.js 內部使用 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 請求-應答模型封裝在一個漸進流式接口中，幫助網頁應用快速應答。它將 streaming 和downloading 間的轉換與SAX和DOM間JSON的解析整合在一起。它是個非常小的庫，不依賴于其他程序庫。它可以在 ajax 請求結束前就開始解析 json 變得十分容易，從而提高應用的應答速度。另外，它支持 Node.js 框架，還可以讀入除了 http 外的其他流。

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

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

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

fetch 函數是一個基于 Promise 的機制，用于在瀏覽器中以編程方式發送 Web 請求。該項目是實現標準 Fetch 規范的一個子集的 polyfill ，足以作為傳統 Web 應用程序中 XMLHttpRequest 的代替品。

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

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

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

代碼片段來源 - ArrayBuffer與字符串的互相轉換

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

代碼片段來源 - ArrayBuffer與字符串的互相轉換

// 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;
}

應用示例：

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 轉換為 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 事件的回調函數

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，因為這里需要區分下載和上傳，下載也有一個progress事件。

XMLHttpRequest 返回 status 時，會執行以下步驟：

如果狀態是 UNSENT 或 OPENED，則返回 0

如果錯誤標志被設置，則返回 0

否則返回 HTTP 狀態碼

另外當訪問本地文件資源或在 Android 4.1 stock browser 中從應用緩存中獲取文件時，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 規范，我們知道當請求方法是 GET 或 HEAD 時，send() 方法的 body 參數值將會被忽略。那么對于我們常用的 GET 請求，我們要怎么傳遞參數呢？解決參數傳遞可以使用以下兩種方式：

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時，設置請求體為空

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

formatParams() 函數：

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

應用示例：

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

一些常用的 AJAX 庫，如 jQuery、zepto 等，內部已經封裝了參數序列化的方法 (如：jquery.param)，我們直接調用頂層的 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請求示例

發送 POST 請求通常需要以下步驟：

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

設置正確的 Content-Type 請求頭

設置相關的事件監聽

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

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);

簡單請求

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

只允許下列方法：

GET

HEAD

POST

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

Accept

Accept-Language

Content-Language

Content-Type

允許的 Content-Type 值有：

application/x-www-form-urlencoded

multipart/form-data

text/plain

預請求

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

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

GET

HEAD

POST

除了用戶代理自動設置的頭部外（比如 Connection， User-Agent ，或者其他任意的 Fetch 規范定義的 “禁止的頭部名” ），預請求不包括 Fetch 規范定義的 "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 對象的狀態是 OPENED 且已設置 send() 的標識符

XMLHttpRequest 對象的狀態是 HEADERS_RECEIVED (已獲取響應頭)

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

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

對于 GET 請求，瀏覽器會把 HTTP headers 和 data 一并發送出去，服務器響應 200。

而對于 POST 請求，瀏覽器會先發送 HTTP headers，服務器響應 100 continue ，瀏覽器再發送 data，服務器響應 200。

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

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

disable 按鈕

緩存已成功的請求，若請求參數一致，則直接返回，不發送請求

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

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

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

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) - 二進制數組?