XMLHttpRequest API
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
备注： 此特性在 Web Worker（不包括 Service Worker）中可用。
XMLHttpRequest API 使 web 应用能够通过 JavaScript 向 web 服务器发起 HTTP 请求并接收响应。这使得网站能够仅更新页面中的部分内容（使用服务器返回的数据），而无需跳转至全新页面。这种做法有时也被称为 AJAX。
Fetch API 是取代 XMLHttpRequest API 的更灵活、更强大的方案。Fetch API 使用 promise 替代事件机制处理异步响应，对 service worker 支持良好，并支持 HTTP 的高级特性，如跨源资源共享控制。基于这些优势，现代 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
<div class="controls">
<button class="xhr" type="button">点击以启动 XHR</button>
</div>
<textarea readonly class="event-log"></textarea>
JavaScript
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} 字节\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();
});
结果
规范
| Specification |
|---|
| XMLHttpRequest |