### XMLHttpRequest [XMLHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest)是一個瀏覽器接口，使得Javascript可以進行HTTP(S)通信。 最早，微軟在IE 5引進了這個接口。后來各大瀏覽器紛紛效仿也提供了這個接口，再后來W3C對它進行了標準化，提出了[`XMLHttpRequest`標準](https://www.w3.org/TR/XMLHttpRequest/)。`XMLHttpRequest`標準又分為`Level 1`和`Level 2`。也是`AJAX`的主要實現原理，它的存在使得在不重新加載整個頁面的情況下與服務器交換數據并更新部分網頁的藝術。 ``` // 創建一個XMLHttpRequest對象 // IE6, IE5 // var xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE7+, Firefox, Chrome, Opera, Safari var xhr = new XMLHttpRequest() // 重置服務器端返回的類型 xhr.overrideMimeType('image/png') // 初始化一個請求 參數3：表示該請求應該以`異步模式`執行。 xhr.open('GET', 'https://www.jianshu.com/shakespeare/notes/40193041/user_notes', true) // 超時時間，單位是毫秒 xhr.timeout = 2000; // 設置 HTTP 請求頭的值。在`open()`之后、`send()`之前調用`setRequestHeader()`方法。 xhr.setRequestHeader('test', 'test') // 發送請求。如果請求是異步的（默認），那么該方法將在請求發送后立即返回。 xhr.send() // 只要?`readyState`?屬性發生變化，就會調用相應的處理函數。這個回調函數會被用戶線程所調用。當一個`XMLHttpRequest`請求被abort()方法取消時，其對應的?`readystatechange`事件不會被觸發。 xhr.onreadystatechange = function(){ if ( xhr.readyState == 4 && xhr.status == 200 ) { console.info(xhr) console.info(xhr.getAllResponseHeaders()) console.info(xhr.getResponseHeader('content-type')) console.info( xhr.responseText ); console.info( xhr.response); } else { console.info( xhr.statusText ); } } // 取消請求 // xhr.abort() ``` ***** **`onreadystatechange`** 只要?`readyState`?屬性發生變化，就會調用相應的處理函數。這個回調函數會被用戶線程所調用。當一個`XMLHttpRequest`請求被abort()方法取消時，其對應的?`readystatechange`事件不會被觸發。 **`readyState`** | 值 | 狀態 | 描述 | | :---: | :---: | :---: | | 0 | UNSENT | XMLHttpRequest 代理已被創建， 但尚未調用 open() 方法。 | | 1 | OPENED | open() 方法已經被觸發。在這個狀態中，可以通過?[setRequestHeader()](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader)方法來設置請求的頭部， 可以調用[send()](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send)方法來發起請求。 | | 2 | HEADERS_RECEIVED | send() 方法已經被調用，響應頭也已經被接收。 | | 3 | LOADING | 下載中；`responseText`屬性已經包含部分數據。 | | 4 | DONE | 下載操作已完成。 | **`status`** status碼是標準的[HTTP status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes)。在請求完成前，`status`的值為`0`。值得注意的是，如果 XMLHttpRequest 出錯，瀏覽器返回的 status 也為0。 **`response`** 響應的正文，返回的類型可以是[`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/API/ArrayBuffer "此頁面仍未被本地化, 期待您的翻譯!")、[`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob "Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的文件。")、[`Document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document "Document 接口表示任何在瀏覽器中載入的網頁，并作為網頁內容的入口，也就是DOM 樹。DOM 樹包含了像 、 這樣的元素，以及大量其他元素。它向網頁文檔本身提供了全局操作功能，能解決如何獲取頁面的 URL ，如何在文檔中創建一個新的元素這樣的問題。")、 JavaScript[`Object`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object "Object 構造函數創建一個對象包裝器。")或[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString?是一個UTF-16字符串。由于JavaScript已經使用了這樣的字符串，所以DOMString 直接映射到 一個String。")。 這取決于`responseType`，XMLHttpRequest.responseType?屬性是一個枚舉類型的屬性，返回響應數據的類型。它允許我們手動的設置返回數據的類型。如果我們將它設置為一個空字符串，它將使用默認的"text"類型。 **`responseType`** | 值 | 描述 | | :---: | :---: | |" "| 將`responseType`設為空字符串與設置為`"text"`相同， 是默認類型 （實際上是[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString?是一個UTF-16字符串。由于JavaScript已經使用了這樣的字符串，所以DOMString 直接映射到 一個String。")）。| |"arraybuffer"| [`response`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response "The XMLHttpRequest response 屬性返回響應的正文。返回的類型可以是 ArrayBuffer 、 Blob 、 Document 、 JavaScript Object 或 DOMString 。 這取決于 responseType 屬性。")是一個包含二進制數據的 JavaScript[`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer "The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.")。| |"blob"| `response`是一個包含二進制數據的[`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob "Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的文件。")對象 。| |"document"| `response`是一個[HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML "HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.")[`Document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document "Document 接口表示任何在瀏覽器中載入的網頁，并作為網頁內容的入口，也就是DOM 樹。DOM 樹包含了像 、 這樣的元素，以及大量其他元素。它向網頁文檔本身提供了全局操作功能，能解決如何獲取頁面的 URL ，如何在文檔中創建一個新的元素這樣的問題。")或[XML](https://developer.mozilla.org/en-US/docs/Glossary/XML "XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.")[`XMLDocument`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLDocument "W3C并沒有定義XMLDocument接口。原因是document接口本來就是為xml定義的。而HTML只是xml的一種實現。因此需要定義HTMLDocument。但是在FireFox有一個專門的XMLDocument構造器。應該是對document對象的一些擴展。通常情況下，就當作document來使用。")，這取決于接收到的數據的 MIME 類型。| |"json"|`response`是一個 JavaScript 對象。這個對象是通過將接收到的數據類型視為[JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON "JSON: JavaScript Object Notation?(JSON) is a data-interchange format.? Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.")解析得到的。| |"text"|`response`是包含在[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString?是一個UTF-16字符串。由于JavaScript已經使用了這樣的字符串，所以DOMString 直接映射到 一個String。")對象中的文本。| **`responseText`** 服務器返回的文本數據 **`statusText`** 服務器返回的狀態文本 **`timeout`** 是一個無符號長整型數，代表著一個請求在被自動終止前所消耗的毫秒數。默認值為 0，意味著沒有超時。 **`upload`** **返回一個**`XMLHttpRequestUpload`對象，用來表示上傳的進度。可以通過對其綁定事件來追蹤它的進度。 |事件|信息類型| | :---- | :-----| |onloadstart| 開始| |onprogress|數據傳輸進行中| |onabort|操作終止| |onerror|失敗| |onload|成功| |ontimeout|操作在用戶規定的時間內未完成| |onloadend|完成（不論成功與否）| **`withCredentials`** 屬性是一個[`Boolean`]類型，它指示了是否該使用類似cookies,authorization headers(頭部授權)。 **`FormData`** 提供了一種表示表單數據的鍵值對的構造方式，此方法相當簡單直接。如果送出時的編碼類型被設為`"multipart/form-data"`，它會使用和表單一樣的格式。 ``` // 參數可選 let formData = new FormData(`<Form表單元素>`) // 添加參數 **filename** 傳給服務器端的文件名稱，默認為該文件的名稱 formData.append(name, value, filename<可選>) // 刪除參數 formData.delete(name) // 返回一個迭代器對象，此對象可以遍歷`formData`中的鍵值對 formData.entries() // 返回指定的鍵關聯的第一個值 formData.get(name) // 返回指定的鍵關聯的所有值 formData.getAll(name) // 表示該對象是否包含某個`key` formData.has(name) // 返回一個迭代器，遍歷所有的keys formData.keys() // 對對象中的某個`key`設置一個新的值，如果不存在，則添加。 formData.set(name, value, filename<可選>) // 返回一個迭代器，遍歷所有的值 formData.values() ``` **`abort()`** 調用該方法將終止該請求。當一個請求被終止，它的 readyState 屬性將被置為0（`UNSENT`?)。 **`getAllResponseHeaders()`** 該方法返回所有的響應頭，以[CRLF](https://developer.mozilla.org/en-US/docs/Glossary/CRLF "CRLF: CR and LF are control characters or bytecode that can be used to mark a line break in a text file.")分割的字符串，或者`null`如果沒有收到任何響應。 **`setRequestHeader()`** 設置 HTTP 請求頭的值。在`open()`之后、`send()`之前調用`setRequestHeader()`方法。 **`getResponseHeader()`** 該方法返回包含指定頭文本的字符串。 **`overrideMimeType()`** 該方法是指定一個MIME類型用于替代服務器指定的類型，使服務端響應信息中傳輸的數據按照該指定MIME類型處理。（服務器端沒有指定一個`Content-Type`頭） **`XHR事件`** ``` // 開始請求 xhr.addEventListener('loadstart', handleEvent); // 請求完成 xhr.addEventListener('load', handleEvent); // 一個資源的加載進度停止之后被觸發（例如，在已經觸發“error”，“abort”或“load”事件之后） xhr.addEventListener('loadend', handleEvent); // 一個操作正在進行中 xhr.addEventListener('progress', handleEvent); // 請求遇到錯誤時會被觸發 xhr.addEventListener('error', handleEvent); // 當一個請求終止時?`abort`?事件被觸發 xhr.addEventListener('abort', handleEvent); // 當一個請求超時時，將被觸發 xhr.addEventListener('timeout', handleEvent); ```