XMLHttpRequestEventTarget: loadend 事件
注意：此功能在 Web Workers 中可用，但 Service Workers 除外。
loadend 事件在請求完成時觸發，無論成功（在 load 之後）還是不成功（在 abort 或 error 之後）。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("loadend", (event) => { })
onloadend = (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(
"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();
});
結果
與 XMLHttpRequestUpload 的用法
您可以使用 loadend 事件來檢測上傳的（成功或不成功的）終止。有關上傳檔案並顯示進度條的完整程式碼示例，請參閱主 XMLHttpRequestUpload 頁面。
js
// When the upload is finished, we hide the progress bar.
xhr.upload.addEventListener("loadend", (event) => {
progressBar.classList.remove("visible");
if (event.loaded !== 0) {
// Successful termination
log.textContent = "Upload finished.";
}
abortButton.disabled = true;
});
規範
| 規範 |
|---|
| XMLHttpRequest # event-xhr-loadend |
| XMLHttpRequest # handler-xhr-onloadend |
瀏覽器相容性
api.XMLHttpRequest.loadend_event
載入中…
api.XMLHttpRequestUpload.loadend_event
載入中…