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 |
浏览器兼容性
加载中…