XMLHttpRequest: error Event

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 error-Ereignis wird ausgelöst, wenn die Anfrage auf einen Fehler stößt.

Syntax

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

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

onerror = (event) => {};

Ereignistyp

Ein ProgressEvent. Erbt von Event.

Event ProgressEvent

Ereigniseigenschaften

Neben den unten aufgelisteten Eigenschaften sind auch die Eigenschaften der Schnittstelle Event verfügbar.

lengthComputable Schreibgeschützt

Ein boolesches Flag, das angibt, ob die Gesamtarbeit, die zu erledigen ist, und die bereits vom zugrunde liegenden Prozess geleistete Arbeit berechenbar sind. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.

loaded Schreibgeschützt

Ein 64-Bit-unsigned Integer-Wert, der die bereits vom zugrunde liegenden Prozess geleistete Arbeit angibt. Das Verhältnis der erledigten Arbeit kann berechnet werden, indem der Wert dieser Eigenschaft durch total geteilt wird. Beim Herunterladen einer Ressource über HTTP wird dabei nur der Hauptteil der HTTP-Nachricht gezählt, und es sind keine Header und kein weiterer Overhead enthalten.

total Schreibgeschützt

Ein 64-Bit-unsigned Integer, der die Gesamtmenge der Arbeit repräsentiert, die der zugrunde liegende Prozess ausführt. Beim Herunterladen einer Ressource über HTTP entspricht dies der Content-Length (der Größe des Hauptteils der Nachricht) und schließt keine Header und keinen weiteren Overhead 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("example-image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/notfound.jpg");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("example-image.jpg").abort();
});

Ergebnis

Spezifikationen

Specification
XMLHttpRequest Standard
# event-xhr-error
XMLHttpRequest Standard
# handler-xhr-onerror

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch