XMLHttpRequest

LeoYao發表於2020-07-13
XMLHTTP

AJAX 步驟

  1. 建立 XMLHttpRequest 例項
  2. 發出 Http 請求
  3. 接收伺服器傳回的資料
  4. 更新網頁資料

XMLHttpRequest 例項屬性

  • readyState：返回一個整數，表示例項物件的當前狀態
    0，表示 XMLHttpRequest 例項已經生成，但例項的 open() 方法還沒有被呼叫
    1，表示 open() 方法已經呼叫，但是例項的 send() 方法還沒有呼叫，仍然可以使用例項的 setRequestHeader() 方法，設定 HTTP 請求的頭資訊
    2，表示例項的 send() 方法已經呼叫，並且伺服器返回的頭資訊和狀態碼已經收到
    3，表示正在接收伺服器傳來的資料體（body部分）。這時，如果例項的 responseType 屬性等於 text 或者空字串，responseText 就會包含已經接收到的部分
    4，表示伺服器返回的資訊已經完全接收，或者本次請求已經失敗

  • onreadystatechange：指向一個監聽函式，readystatechange 事件發生時，就會執行這個屬性。如果使用abort 方法，終止 XMLHttpRequest 請求，也會造成 readyState 屬性變化，下面是一個例子：

    const  xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.onreadystatechange = function () {
  if (xhr.readystate !== 4 || xhr.status !== 200) {
      return;
  }
  console.log(xhr.responseText)
}
xhr.send()

  • response 伺服器返回的資料體

  • responseType 伺服器返回資料的型別

  • responseText 從伺服器接收的字串

  • responseXML 從伺服器接收的 XML 或 HTML 文件

  • responseURL 傳送資料的伺服器網址

  • status HTTP 響應狀態碼

  • statusText HTTP 響應狀態碼文字描述

  • timeout 請求時間限制

  • ontimeout timeout 的監聽事件

事件監聽屬性

  • onloadstart （HTTP 請求發出）的監聽函式
  • onprogress （正在傳送和載入資料）的監聽函式
  • onabort 請求中止，比如使用者呼叫了abort()方法）的監聽函式
  • onerror （請求失敗）的監聽函式
  • onload （請求成功完成）的監聽函式
  • ontimeout （使用者指定的時限超過了，請求還未完成）的監聽函式
  • onloadend（請求完成，不管成功或失敗）的監聽函式

withCredentials

這是一個布林值，表示跨域請求時，使用者資訊（如Cookie和認證的HTTP頭資訊）是否會包含在請求之中，預設為 false
如果需要跨域 AJAX 請求傳送 Cookie， 需要設定 withCredentials 為 true，同源請求不需要。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.withCredentials = true;
xhr.send(null);

為了讓這個屬性生效，伺服器必須顯式返回 Access-Control-Allow-Credentials 這個頭資訊

upload

可以獲得一個監聽上傳檔案的物件，主要方法就是監聽這個物件的各種事件：loadstart、loadend、load、abort、error、progress、timeout

例項方法

open

用於指定 HTTP 請求的引數

  • method HTTP 動詞方法，如 GET，POST，PUT，DELETE，HEAD
  • url：表示請求傳送目標 URL
  • async：布林值，表示請求是否非同步

send

用於實際發出 HTTP 請求

setRequestHeader

用於設定瀏覽器傳送的 HTTP 請求的頭資訊

overrideMImeType

指定 MIME 型別，覆蓋伺服器返回的真正的 MIME 型別，從而讓瀏覽器有不一樣的處理。

getResponseHeader

返回 HTTP 頭資訊指定欄位的值

getAllResponseHeaders

表示伺服器發來的所有 HTTP 頭資訊

abort

終止已經發出的 HTTP 請求

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章