XMLHttpRequest：进度事件

基线 广泛可用

此功能已建立良好，并在许多设备和浏览器版本上运行。它从 2015 年 7 月.

报告反馈

注意： 此功能在 Web Worker 中可用，但 Service Worker 除外。

语法

progress 事件在请求收到更多数据时定期触发。

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("progress", (event) => {});

onprogress = (event) => {};

事件类型

js

Event ProgressEvent

事件属性

一个 ProgressEvent。继承自 Event。

除了下面列出的属性之外，父接口 Event 中的属性也可用。

lengthComputable 只读

一个布尔标志，指示基础进程要完成的总工作量和已完成的工作量是否可计算。换句话说，它表示进度是否可衡量。

loaded 只读

一个 64 位无符号整数，指示基础进程已完成的工作量。已完成的工作量可以通过将此属性的值除以 total 来计算。当使用 HTTP 下载资源时，这仅计算 HTTP 消息的正文，不包括标题和其他开销。

total 只读

示例

一个 64 位无符号整数，表示基础进程正在执行的总工作量。当使用 HTTP 下载资源时，这就是 Content-Length（消息正文的大小），不包括标题和其他开销。

HTML

实时示例
<div class="controls">
  <input
    class="xhr success"
    type="button"
    name="xhr"
    value="Click to start XHR (success)" />
  <input
    class="xhr error"
    type="button"
    name="xhr"
    value="Click to start XHR (error)" />
  <input
    class="xhr abort"
    type="button"
    name="xhr"
    value="Click to start XHR (abort)" />
</div>

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

JavaScript

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

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

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",
  );
});

xhrButtonError.addEventListener("click", () => {
  runXHR("http://i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",
  ).abort();
});

html

规范

结果
规范
# XMLHttpRequest 标准
规范
# event-xhr-progress

浏览器兼容性

handler-xhr-onprogress

另请参见