XHR簡介

在XHR誕生前，網頁要獲取客戶端和服務器的任何狀態更新，都需要刷新一次，在XHR誕生后就可以完全通過JS代碼異步實現這一過程。XHR的誕生也使最初的網頁制作轉換為開發交互應用，拉開了WEB2.0的序幕。 

XHR是一種瀏覽器API，極大簡化了異步通信的過程，開發者並不需要關注底層的實現，因為瀏覽器會為我們完成這些工作，如連接管理、協議協商、HTTP請求格式化等等。最初版本的XHR能力非常有限，只支持文本傳輸，處理上傳能力也不足，對於跨域請求也不支持。為解決這些問題，W3C於2008年發布了“XMLHttpRequest Level2”草案，新增了如下功能：

• 支持請求超時；
• 支持傳輸二進制和文本數據；
• 支持重寫媒體類型和編碼響應；
• 支持監控每個請求的進度事件；
• 支持有效的文件上傳；
• 支持安全的跨來源請求。

2011年，W3C將“XMLHttpRequest Level2”規范與最初的“XMLHttpRequest”規范合並，所有XHR2新增的功能也都並入了原來的XHR API中，接口不變，功能增強。

1.XHR簡介

XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。XHR接口強制要求每個請求都具備嚴格的HTTP語義–應用提供數據和URL，瀏覽器格式化請求並管理每個連接的完整生命周期，所以XHR僅僅允許應用自定義一些HTTP首部，但更多的首部是不能自己設定的，如：

• Accept-Charset, Accept-Encoding, Access-Control-*
• Host, Upgrade, Connection, Referer, Origin
• Cookie, Sec-, Proxy-, 及其他首部

瀏覽器會拒絕絕對不安全的首部重寫，以保證應用不能假扮用戶代理、用戶或請求來源，如Origin由瀏覽器自動設置，Access-Control-Allow-Origin由服務器設置，如果接受該請求，不包含該字段即可，瀏覽器發出的請求將作廢。

• CORS請求會省略cookie和HTTP認證等用戶憑據；
• 客戶端被限制只能發送“簡單的跨域請求”，包括只能使用GET POSD HEAD三種方式，只能訪問通過XHR發送並讀取的HTTP首部。

如果想要啟用cookie和HTTP認證，客戶端必須在發送請求時通過XHR對象發送額外的屬性（withCredentials），而服務器也需要以Access-Control-Allow-Credentials響應，表示允許應用發送隱私數據。同樣，如果客戶需要寫入或讀取自定義HTTP標頭或想要使用“非簡單的方法”的請求，那么它必須首先通過發出一個預備請求，以獲取第三方服務器的許可，如下所示：

 

// Preflight request
OPTIONS /resource.js HTTP/1.1 
Host: thirdparty.com
Origin: http://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: My-Custom-Header
...

// Preflight response
HTTP/1.1 200 OK 
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: My-Custom-Header
...

(actual HTTP request) 

W3C CORS規范定義的什么時候必須使用預備請求，“簡單”的請求可以跳過它，但也有各種各樣場景需要使用預備請求，這就添加一次往返網絡延遲。可喜的是，一旦預備請求完成，它可以由客戶端緩存，以避免在后續請求進行相同的驗證。 
在XHR中，可以通過responseType-設置改變響應類型，如下所示：

• “” 字符串(默認值)
• “arraybuffer” ArrayBuffer
• “blob” Blob
• “document” Document
• “json” JavaScript 對象，解析自服務器傳遞回來的JSON 字符串。
• “text” 字符串

2.數據傳輸

2.1.數據請求：

下面是通過XHR獲取一張圖片，並顯示到網頁上的示例：

 

var xhr = new XMLHttpRequest();

xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);

xhr.open('GET', '/images/photo.webp');
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();

2.2.數據上傳

上傳相關事件在 XMLHttpRequest.upload 對象上被觸發，像下面這樣，向服務器發送一個formdata格式數據：

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

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", updateProgress);
xhr.upload.addEventListener("load", transferComplete);
xhr.upload.addEventListener("error", transferFailed);
xhr.upload.addEventListener("abort", transferCanceled);

xhr.open('POST', '/upload');
xhr.onload = function() { ... };
xhr.send(formData); 

2.3.數據分片上傳：

var blob = ...; 

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

var start = 0;
var end = BYTES_PER_CHUNK;

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

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

  start = end;
  end = start + BYTES_PER_CHUNK;
}

注意：progress 事件在使用 file: 協議的情況下是無效的。