XMLHttpRequestEventTarget: loadend-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.
Das loadend-Ereignis wird ausgelöst, wenn eine Anfrage abgeschlossen ist – unabhängig davon, ob sie erfolgreich war (nach load) oder fehlgeschlagen ist (nach abort oder error).
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("loadend", (event) => { })
Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:
onloadend = (event) => { }
Ereignistyp
Ein ProgressEvent. Erbt von Event.
Beispiele
Verwendung mit XMLHttpRequest
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
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();
});
Ergebnis
Verwendung mit XMLHttpRequestUpload
Mit dem loadend-Ereignis können Sie erkennen, dass ein Upload beendet wurde – unabhängig davon, ob er erfolgreich war. Ein vollständiges Codebeispiel, das eine Datei hochlädt und einen Fortschrittsbalken anzeigt, finden Sie auf der Seite zu XMLHttpRequestUpload.
// 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;
});
Spezifikationen
| Spezifikation |
|---|
| XMLHttpRequest # event-xhr-loadend |
| XMLHttpRequest # handler-xhr-onloadend |