XMLHttpRequest API

基线广泛可用

此功能已得到充分建立，并在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

XMLHttpRequest API 允许 Web 应用程序使用 JavaScript 以编程方式向 Web 服务器发出 HTTP 请求并接收响应。这反过来使网站能够仅使用来自服务器的数据更新页面的部分内容，而无需导航到全新页面。这种做法有时也称为 Ajax。

概念和用法

Fetch API 是 XMLHttpRequest API 的更灵活、更强大的替代方案。Fetch API 使用承诺而不是事件来处理异步响应，与服务工作线程集成良好，并支持 HTTP 的高级方面，例如 CORS。由于这些原因，现代 Web 应用程序通常使用 Fetch API 而不是 XMLHttpRequest。

XMLHttpRequest API 中的核心接口是 XMLHttpRequest。要发出 HTTP 请求
通过调用其构造函数创建一个新的 XMLHttpRequest 实例。
通过调用 XMLHttpRequest.open() 初始化它。此时，您提供请求的 URL、要使用的 HTTP 方法，以及可选的用户名和密码。
附加事件处理程序以获取请求的结果。例如，当请求成功完成时，将触发 load 事件，而在各种错误情况下，将触发 error 事件。

通过调用 XMLHttpRequest.send() 发送请求。

接口

FormData: 有关 XMLHttpRequest API 的深入指南，请参阅使用 XMLHttpRequest。
ProgressEvent: 表示 <form> 字段及其值的对象，可以使用 XMLHttpRequest 或 fetch() 将其发送到服务器。
XMLHttpRequest: Event 的一个子类，它传递给 progress，其中包含有关请求完成多少的信息。
XMLHttpRequestEventTarget: 表示单个 HTTP 请求。
XMLHttpRequestUpload: XMLHttpRequest 和 XMLHttpRequestUpload 的超类，定义了这两个接口中可用的事件。

示例

表示 HTTP 上传的上传过程。提供事件，使代码能够跟踪上传的进度。

从服务器获取 JSON 数据

HTML

在此示例中，我们从 https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json 获取 JSON 文件，并添加事件侦听器以显示事件的进度。

<div class="controls">
  <button class="xhr" type="button">Click to start XHR</button>
</div>

<textarea readonly class="event-log"></textarea>

.event-log {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}

JavaScript

html

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();
});

js

规范

结果
规范

浏览器兼容性

XMLHttpRequest 标准

另请参阅

Fetch API