XMLHttpRequestEventTarget: loadend Ereignis
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, sei es erfolgreich (nach load) oder erfolglos (nach abort oder error).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("loadend", (event) => { })
onloadend = (event) => { }
Ereignistyp
Ein ProgressEvent. Erbt von Event.
Ereigniseigenschaften
In Ergänzung zu den unten aufgeführten Eigenschaften sind Eigenschaften aus der Elternschnittstelle, Event, verfügbar.
lengthComputableSchreibgeschützt-
Eine boolesche Flagge, die anzeigt, ob die gesamte zu erledigende Arbeit und die bereits erledigte Menge durch den zugrunde liegenden Prozess berechenbar ist. Mit anderen Worten, sie zeigt an, ob der Fortschritt messbar ist oder nicht.
loadedSchreibgeschützt-
Ein 64-Bit-unsigned Integer-Wert, der die Menge der bereits vom zugrunde liegenden Prozess geleisteten Arbeit angibt. Der Anteil der geleisteten Arbeit kann berechnet werden, indem der Wert dieser Eigenschaft durch
totalgeteilt wird. Beim Herunterladen einer Ressource über HTTP zählt dies nur den Nachrichtentext der HTTP-Nachricht und schließt keine Header und anderen Overhead ein. totalSchreibgeschützt-
Ein 64-Bit-unsigned Integer, der die Gesamtmenge der Arbeit darstellt, die der zugrunde liegende Prozess ausführt. Beim Herunterladen einer Ressource über HTTP ist dies die
Content-Length(die Größe des Nachrichtentextes) und schließt keine Header und anderen Overhead ein.
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
Sie können das loadend Ereignis verwenden, um das (erfolgreiche oder nicht) Ende eines Uploads zu erkennen. Für ein vollständiges Codebeispiel, das eine Datei hochlädt und eine Fortschrittsanzeige zeigt, besuchen Sie die Hauptseite von 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
| Specification |
|---|
| XMLHttpRequest # event-xhr-loadend |
| XMLHttpRequest # handler-xhr-onloadend |
Browser-Kompatibilität
api.XMLHttpRequest.loadend_event
Loading…
api.XMLHttpRequestUpload.loadend_event
Loading…