AJAX - XMLHttpRequest 對象

XMLHttpRequest 對象是 AJAX 的基石。

  1. 創建 XMLHttpRequest 對象
  2. 定義回調函數
  3. 打開 XMLHttpRequest 對象
  4. 向服務器發送請求

XMLHttpRequest 對象

所有現代瀏覽器都支持 XMLHttpRequest 對象。

XMLHttpRequest 對象可用于在后臺與 Web 服務器交換數據。這意味著可以更新網頁的部分內容，而無需重新加載整個頁面。

創建 XMLHttpRequest 對象

所有現代瀏覽器（Chrome、Firefox、IE、Edge、Safari、Opera）都有內置的 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法：

variable = new XMLHttpRequest();

定義回調函數

回調函數是作為參數傳遞給另一個函數的函數。

在這種情況下，回調函數應包含響應準備就緒時要執行的代碼。

xhttp.onload = function() {
  // 當響應準備就緒時要做什么
}

發送請求

如需向服務器發送請求，您可以使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

實例

// 創建 XMLHttpRequest 對象
const xhttp = new XMLHttpRequest();
// 定義回調函數
xhttp.onload = function() {
  // 您可以在這里使用數據
}
// 發送請求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

親自試一試

跨域訪問（Access Across Domains）

出于安全原因，現代瀏覽器不允許跨域訪問。

這意味著網頁和它嘗試加載的 XML 文件必須位于同一臺服務器上。

CodeW3C.com 上的例子都打開位于 CodeW3C.com 域中的 XML 文件。

如果您想在自己的網頁之一上使用上面的例子，您加載的 XML 文件必須位于您自己的服務器上。

XMLHttpRequest 對象方法

方法 描述
new XMLHttpRequest() 創建新的 XMLHttpRequest 對象。
abort() 取消當前請求。
getAllResponseHeaders() 返回頭部信息。
getResponseHeader() 返回特定的頭部信息。
open(method, url, async, user, psw)

規定請求。

  • method：請求類型 GET 或 POST
  • url：文件位置
  • async：true（異步）或 false（同步）
  • user：可選的用戶名
  • psw：可選的密碼
send() 向服務器發送請求，用于 GET 請求。
send(string) 向服務器發送請求，用于 POST 請求。
setRequestHeader() 將標簽/值對添加到要發送的標頭。

XMLHttpRequest 對象屬性

屬性 描述
onload 定義接收到（加載）請求時要調用的函數。
onreadystatechange 定義當 readyState 屬性發生變化時調用的函數。
readyState

保存 XMLHttpRequest 的狀態。

  • 0：請求未初始化
  • 1：服務器連接已建立
  • 2：請求已收到
  • 3：正在處理請求
  • 4：請求已完成且響應已就緒
responseText 以字符串形式返回響應數據。
responseXML 以 XML 數據返回響應數據。
status

返回請求的狀態號

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

如需完整列表請訪問 Http 消息參考手冊
statusText 返回狀態文本（比如 "OK" 或 "Not Found"）

onload 屬性

使用 XMLHttpRequest 對象時，您可以定義一個回調函數，以便在請求收到答復時執行。

請在 XMLHttpRequest 對象的 onload 屬性中定義該函數：

實例

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

親自試一試

多個回調函數

如果網站中有多個 AJAX 任務，則應創建一個執行 XMLHttpRequest 對象的函數，并為每個 AJAX 任務創建一個回調函數。

函數調用應包含 URL 以及響應準備就緒時要調用的函數。

實例

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // 這里是動作
}
function myFunction2(xhttp) {
  // 這里是動作
}

onreadystatechange 屬性

readyState 屬性保存 XMLHttpRequest 的狀態。

onreadystatechange 屬性定義了一個回調函數，當 readyState 改變時執行該函數。

status 屬性和 statusText 屬性保存 XMLHttpRequest 對象的狀態。

屬性 描述
onreadystatechange 定義當 readyState 屬性改變時調用的函數。
readyState

保存 XMLHttpRequest 的狀態。

  • 0：請求未初始化
  • 1：服務器連接已建立
  • 2：請求已收到
  • 3：正在處理請求
  • 4：請求已完成且響應已就緒
status

返回請求的狀態號

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

如需完整列表請訪問 Http 消息參考手冊
statusText 返回狀態文本（比如 "OK" 或 "Not Found"）。

每次 readyState 改變時都會調用 onreadystatechange 函數。

當 readyState 為 4 且 status 為 200 時，響應就緒：

實例

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

親自試一試

onreadystatechange 事件被觸發了四次（1-4），每次 readyState 變化一次。