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標頭或想要使用“非簡單的方法”的請求，那么它必須首先通過發出一個預備請求，以獲取第三方服務器的許可，如下所示：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 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獲取一張圖片，并顯示到網頁上的示例：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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格式數據：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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.數據分片上傳：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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: 協議的情況下是無效的。
數據冰冷的，但我們要讓數據溫暖起來，改變我們的生活！
總結
- 上一篇： 微星强袭GE66游戏本直降5000：i7
- 下一篇： 对标国产宝马X5！蔚来全新ES7发布：4