XMLHttpRequest API
Baseline 廣泛可用 *
注意：此功能在 Web Workers 中可用，但 Service Workers 除外。
XMLHttpRequest API 使 Web 應用能夠使用 JavaScript 以程式設計方式向 Web 伺服器發出 HTTP 請求並接收響應。這使得網站能夠使用來自伺服器的資料更新頁面的一部分，而不必導航到全新的頁面。這種做法有時也稱為 AJAX。
Fetch API 是 XMLHttpRequest API 的更靈活、更強大的替代品。Fetch API 使用 promise 而不是事件來處理非同步響應，與 service worker 很好地整合，並支援 HTTP 的高階方面，例如 CORS。由於這些原因，現代 Web 應用通常使用 Fetch API 而不是 XMLHttpRequest。
概念與用法
XMLHttpRequest API 中的核心介面是 XMLHttpRequest。要發出 HTTP 請求：
- 透過呼叫其 建構函式 來建立一個新的
XMLHttpRequest例項。 - 透過呼叫
XMLHttpRequest.open()來初始化它。此時，你提供請求的 URL、要使用的 HTTP 方法，以及可選的使用者名稱和密碼。 - 附加事件處理程式以獲取請求的結果。例如，當請求成功完成時，會觸發
load事件；在各種錯誤條件下，會觸發error事件。 - 透過呼叫
XMLHttpRequest.send()來發送請求。
有關 XMLHttpRequest API 的深入指南，請參閱 使用 XMLHttpRequest。
介面
FormData-
表示
<form>欄位及其值的物件，可以使用XMLHttpRequest或fetch()傳送到伺服器。 ProgressEventXMLHttpRequest-
表示單個 HTTP 請求。
XMLHttpRequestEventTarget-
是
XMLHttpRequest和XMLHttpRequestUpload的超類，定義了這兩個介面中可用的事件。 XMLHttpRequestUpload-
表示 HTTP 上傳的上傳過程。提供事件，使程式碼能夠跟蹤上傳進度。
示例
從伺服器獲取 JSON 資料
在此示例中，我們從 https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json 獲取一個 JSON 檔案，新增事件監聽器以顯示事件的進度。
HTML
html
<div class="controls">
<button class="xhr" type="button">Click to start XHR</button>
</div>
<textarea readonly class="event-log"></textarea>
JavaScript
js
const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
"https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";
function handleEvent(e) {
log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}
function addListeners(xhr) {
xhr.addEventListener("loadstart", handleEvent);
xhr.addEventListener("load", handleEvent);
xhr.addEventListener("loadend", handleEvent);
xhr.addEventListener("progress", handleEvent);
xhr.addEventListener("error", handleEvent);
xhr.addEventListener("abort", handleEvent);
}
xhrButton.addEventListener("click", () => {
log.textContent = "";
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
addListeners(xhr);
xhr.send();
});
結果
規範
| 規範 |
|---|
| XMLHttpRequest |
瀏覽器相容性
載入中…