JavaScript 複習之 XMLHttpRequest 對象

XMLHttpRequest自己是一個構造函數

let xhr = new XMLHttpRequest();
複製代碼

一旦創建實例就可使用open()方法發出 HTTP 請求。

xhr.open('GET','http://www.example.com/page.php', true);
複製代碼

而後指定回調函數，監聽通訊狀態（readyState屬性）的變化。

xhr.onreadyStatechange = handleStateChange;
function handleStateChange(){
    
    //...
}
複製代碼

注意，AJAX 只能向同源網址（協議、域名、端口都相同）發出 HTTP 請求，若是發出跨域請求，就會報錯.

下面是 XMLHttpRequest對象的簡單用法的完整例子

let xhr = new XMLHttpRequest();

xhr.onreadyStatechange = function(){
    //通訊成功時，狀態值爲4
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }else{
            console.error(xhr.statusText);
        }
    }
};

xhr.onerror = function(e){
    console.error(xhr.statusText);
};

xhr.open('GET','/endpoint',true);
xhr.send(null);
複製代碼

1、XMLHttpRequest 的實例屬性

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一個整數，表示實例對象的當前狀態。該屬性只讀。它可能返回如下值。

• 0，表示 XMLHttpRequest 實例已經生成，可是實例的open()方法尚未被調用。

• 1，表示open()方法已經調用，可是實例的send()方法尚未調用，仍然可使用實例的setRequestHeader()方法，設定 HTTP 請求的頭信息。

• 2，表示實例的send()方法已經調用，而且服務器返回的頭信息和狀態碼已經收到。

• 3，表示正在接收服務器傳來的數據體（body 部分）。這時，若是實例的responseType屬性等於text或者空字符串，responseText屬性就會包含已經收到的部分信息。

• 4，表示服務器返回的數據已經徹底接收，或者本次接收已經失敗。

XMLHttpRequest.onreadystatechange

屬性指向一個監聽函數。readystatechange事件發生時（實例的readyState屬性變化），就會執行這個屬性。

XMLHttpRequest.response

表示服務器返回的數據體（即 HTTP 迴應的 body 部分）。它多是任何數據類型，好比字符串、對象、二進制對象等等，具體的類型由XMLHttpRequest.responseType屬性決定。該屬性只讀。

XMLHttpRequest.responseType

屬性是一個字符串，表示服務器返回數據的類型

XMLHttpRequest.responseText

屬性返回從服務器接收到的字符串，該屬性爲只讀。

XMLHttpRequest.responseXML

屬性返回從服務器接收到的 HTML 或 XML 文檔對象，該屬性爲只讀。

XMLHttpRequest.responseURL

屬性是字符串，表示發送數據的服務器的網址。

XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status屬性返回一個整數，表示服務器迴應的 HTTP 狀態碼。通常來講，若是通訊成功的話，這個狀態碼是200；若是服務器沒有返回狀態碼，那麼這個屬性默認是200。請求發出以前，該屬性爲0。該屬性只讀。

• 200, OK，訪問正常

• 301, Moved Permanently，永久移動

• 302, Moved temporarily，暫時移動

• 304, Not Modified，未修改

• 307, Temporary Redirect，暫時重定向

• 401, Unauthorized，未受權

• 403, Forbidden，禁止訪問

• 404, Not Found，未發現指定網址

• 500, Internal Server Error，服務器發生錯誤

XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout

XMLHttpRequest.timeout屬性返回一個整數，表示多少毫秒後，若是請求仍然沒有獲得結果，就會自動終止。若是該屬性等於0，就表示沒有時間限制。

XMLHttpRequestEventTarget.ontimeout屬性用於設置一個監聽函數，若是發生 timeout 事件，就會執行這個監聽函數。

XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials屬性是一個布爾值，表示跨域請求時，用戶信息（好比 Cookie 和認證的 HTTP 頭信息）是否會包含在請求之中，默認爲false，即向example.com發出跨域請求時，不會發送example.com設置在本機上的 Cookie（若是有的話）。

XMLHttpRequest.upload

不只能夠發送請求，還能夠發送文件，這就是 AJAX 文件上次。發送文件後，經過該屬性能夠獲得一個對象，經過觀察這個對象，能夠得知上傳的進展，主要方法就是監聽這個對象的各類事件：loadstart、loadend、load、abort、error、progress、timeout。

2、XMLHttpRequest 的實例方法

XMLHttpRequest.open()

它一共能夠接受五個參數。

void open(
   string method,
   string url,
   optional boolean async,
   optional string user,
   optional string password
);
複製代碼

• method：表示 HTTP 動詞方法，好比GET、POST、PUT、DELETE、HEAD等。

• url: 表示請求發送目標 URL。

• async: 布爾值，表示請求是否爲異步，默認爲true。若是設爲false，則send()方法只有等到收到服務器返回告終果，纔會進行下一步操做。該參數可選。因爲同步 AJAX 請求會形成瀏覽器失去響應，許多瀏覽器已經禁止在主線程使用，只容許 Worker 裏面使用。因此，這個參數輕易不該該設爲false。

• user：表示用於認證的用戶名，默認爲空字符串。該參數可選。

• password：表示用於認證的密碼，默認爲空字符串。該參數可選。

XMLHttpRequest.send()

方法用於實際發出 HTTP 請求。它的參數是可選的，若是不帶參數，就表示 HTTP 請求只有一個 URL，沒有數據體，典型例子就是 GET 請求；若是帶有參數，就表示除了頭信息，還帶有包含具體數據的信息體，典型例子就是 POST 請求。

下面是發送 POST 請求的例子。

var xhr = new XMLHttpRequest();
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);

xhr.open('POST', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
複製代碼

注意，全部 XMLHttpRequest 的監聽事件，都必須在send()方法調用以前設定。

XMLHttpRequest.setRequestHeader()

用於設置瀏覽器發送的 HTTP 請求的頭信息。方法必須在open()以後，send()以前調用。

該方法接受兩個參數。第一個參數是字符串，表示頭信息的字段名，第二個參數是字段值。

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);
xhr.send(JSON.stringify(data));
複製代碼

XMLHttpRequest.overrideMimeType()

方法用來指定 MIME 類型，覆蓋服務器返回的真正的 MIME 類型，從而讓瀏覽器進行不同的處理。舉例來講，服務器返回的數據類型是text/xml，因爲種種緣由瀏覽器解析不成功報錯，這時就拿不到數據了。爲了拿到原始數據，咱們能夠把 MIME 類型改爲text/plain，這樣瀏覽器就不會去自動解析，從而咱們就能夠拿到原始文本了。

注意，該方法必須在send()方法以前調用。

XMLHttpRequest.getResponseHeader()

方法返回 HTTP 頭信息指定字段的值，若是尚未收到服務器迴應或者指定字段不存在，返回null。該方法的參數不區分大小寫。

XMLHttpRequest.getAllResponseHeaders()

方法返回一個字符串，表示服務器發來的全部 HTTP 頭信息。

XMLHttpRequest.abort()

方法用來終止已經發出的 HTTP 請求。調用這個方法之後，readyState屬性變爲4，status屬性變爲0

3、XMLHttpRequest 實例的事件

readyStateChange 事件

這個上面說過了

progress 事件

上傳文件時，XMLHttpRequest 實例對象自己和實例的upload屬性，都有一個progress事件，會不斷返回上傳的進度。