XMLHttpRequestEventTarget: load-Ereignis
Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.
Das load-Ereignis wird ausgelöst, wenn eine XMLHttpRequest-Transaktion erfolgreich abgeschlossen wird.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("load", (event) => { })
onload = (event) => { }
Ereignistyp
Ein ProgressEvent. Erbt von Event.
Ereigniseigenschaften
Zusätzlich zu den unten aufgelisteten Eigenschaften sind die Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.
lengthComputableSchreibgeschützt-
Ein boolesches Kennzeichen, das angibt, ob die gesamte zu leistende Arbeit und die bereits geleistete Arbeit des zugrunde liegenden Prozesses berechenbar sind. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.
loadedSchreibgeschützt-
Ein 64-Bit-Integerwert, der die bereits vom zugrunde liegenden Prozess geleistete Arbeit angibt. Der Anteil der erledigten Arbeit kann berechnet werden, indem der Wert dieser Eigenschaft durch
totalgeteilt wird. Beim Herunterladen einer Ressource über HTTP wird nur der Hauptteil der HTTP-Nachricht gezählt, und Header sowie anderer Overhead werden nicht einbezogen. totalSchreibgeschützt-
Ein 64-Bit-Integerwert, der die gesamte Menge der Arbeit darstellt, die der zugrunde liegende Prozess zu leisten hat. Beim Herunterladen einer Ressource über HTTP ist dies der
Content-Length(die Größe des Nachrichtenkörpers) und schließt die Header und anderen Overhead nicht 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("image.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://somewhere.org/i-dont-exist");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("image.jpg").abort();
});
Ergebnis
Verwendung mit XMLHttpRequestUpload
Sie können das load-Ereignis verwenden, um das erfolgreiche Beenden eines Uploads zu erkennen. Ein vollständiges Programmbeispiel, das eine Datei hochlädt und einen Fortschrittsbalken anzeigt, finden Sie auf der Hauptseite von XMLHttpRequestUpload.
// 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;
});
Spezifikationen
| Specification |
|---|
| XMLHttpRequest # event-xhr-load |
| XMLHttpRequest # handler-xhr-onload |
Browser-Kompatibilität
api.XMLHttpRequest.load_event
Loading…
api.XMLHttpRequestUpload.load_event
Loading…