JavaScript 複習之 XMLHttpRequest 物件

DreamTruth發表於2019-03-05
JavaScriptXMLHTTP物件

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);
複製程式碼

一、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。

二、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

三、XMLHttpRequest 例項的事件

readyStateChange 事件

這個上面說過了

progress 事件

上傳檔案時，XMLHttpRequest 例項物件本身和例項的upload屬性，都有一個progress事件，會不斷返回上傳的進度。

相關文章