XMLHttpRequestEventTarget: load 事件
注意：此功能在 Web Workers 中可用，但 Service Workers 除外。
当一个 XMLHttpRequest 事务成功完成时，会触发 load 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("load", (event) => { })
onload = (event) => { }
事件类型
一个 ProgressEvent。继承自 Event。
事件属性
除了下面列出的属性之外，父接口 Event 的属性也可使用。
lengthComputable只读-
一个布尔值，指示底层进程的待完成总工作量以及已完成工作量的可计算性。换句话说，它告知进度是否可衡量。
loaded只读-
一个 64 位无符号整数值，表示底层进程已完成的工作量。通过将此属性的值除以
total，可以计算出已完成工作的比例。使用 HTTP 下载资源时，此值仅包含 HTTP 消息的正文，不包括标头和其他开销。 total只读-
一个 64 位无符号整数，表示底层进程正在执行的总工作量。使用 HTTP 下载资源时，这对应于
Content-Length（消息正文的大小），不包括标头和其他开销。
示例
与 XMLHttpRequest 的用法
HTML
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
js
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("image.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://somewhere.org/i-dont-exist");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("image.jpg").abort();
});
结果
与 XMLHttpRequestUpload 的用法
您可以使用 load 事件来检测上传的成功终止。有关上传文件并显示进度条的完整代码示例，请参阅 XMLHttpRequestUpload 主页。
js
// When the upload is finished, we hide the progress bar.
xhr.upload.addEventListener("load", (event) => {
progressBar.classList.remove("visible");
log.textContent = "Upload finished.";
abortButton.disabled = true;
});
规范
| 规范 |
|---|
| XMLHttpRequest # event-xhr-load |
| XMLHttpRequest # handler-xhr-onload |
浏览器兼容性
api.XMLHttpRequest.load_event
加载中…
api.XMLHttpRequestUpload.load_event
加载中…