XMLHttpRequest: loadend Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 nicht erfolgreich (nach abort oder error).

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("loadend", (event) => {});

onloadend = (event) => {};

Ereignistyp

Ein ProgressEvent. Erbt von Event.

Event ProgressEvent

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind die Eigenschaften der Elternschnittstelle, Event, verfügbar.

lengthComputable Schreibgeschützt

Ein boolescher Wert, der angibt, ob die gesamte zu erledigende Arbeit und die bereits geleistete Arbeit des zugrunde liegenden Prozesses berechenbar sind. Mit anderen Worten, er gibt an, ob der Fortschritt messbar ist oder nicht.

loaded Schreibgeschützt

Ein 64-Bit-Integer-Wert, der die Menge der bereits vom zugrunde liegenden Prozess geleisteten Arbeit angibt. Der Anteil der erledigten Arbeit kann berechnet werden, indem man den Wert dieser Eigenschaft durch total teilt. Beim Herunterladen einer Ressource über HTTP wird hier nur der Hauptteil der HTTP-Nachricht gezählt und schließt nicht die Header und andere Overhead mit ein.

total Schreibgeschützt

Ein 64-Bit-Integer, der die gesamte Menge an Arbeit darstellt, die der zugrunde liegende Prozess im Gange ist zu leisten. Beim Herunterladen einer Ressource über HTTP ist dies die Content-Length (die Größe des Hauptteils der Nachricht) und schließt nicht die Header und anderen Overhead mit ein.

Beispiele

Live-Beispiel

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();
});

Ergebnis

Spezifikationen

Specification
XMLHttpRequest Standard
# event-xhr-loadend
XMLHttpRequest Standard
# handler-xhr-onloadend

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch