XMLHttpRequest: abort 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: Dieses Feature ist verfügbar in Web Workers, außer in Service Workers.
Das abort
-Ereignis wird ausgelöst, wenn eine Anfrage abgebrochen wurde, beispielsweise weil das Programm XMLHttpRequest.abort()
aufgerufen hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("abort", (event) => {});
onabort = (event) => {};
Ereignistyp
Ein ProgressEvent
. Erbt von Event
.
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der Elternschnittstelle Event
verfügbar.
lengthComputable
Nur lesbar-
Ein boolesches Flag, das angibt, ob die gesamte zu leistende Arbeit und die bereits geleistete Arbeit des zugrundeliegenden Prozesses berechenbar sind. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.
loaded
Nur lesbar-
Ein 64-Bit-Unsigned-Integer-Wert, der die Menge der bereits vom zugrundeliegenden Prozess ausgeführten Arbeit angibt. Der Anteil der erledigten Arbeit kann berechnet werden, indem dieser Wert durch
total
geteilt wird. Beim Herunterladen einer Ressource über HTTP zählt dies nur den Hauptteil der HTTP-Nachricht und schließt Header und anderen Overhead nicht ein. total
Nur lesbar-
Ein 64-Bit-Unsigned-Integer, der die gesamte Menge der Arbeit darstellt, die der zugrundeliegende Prozess gerade ausführt. Beim Herunterladen einer Ressource über HTTP ist dies die
Content-Length
(die Größe des Hauptteils der Nachricht) und schließt die Header und anderen Overhead nicht ein.
Beispiele
Live-Beispiel
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("my-picture.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://example.com/some-path");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("my-picture.jpg").abort();
});
Ergebnis
Spezifikationen
Specification |
---|
XMLHttpRequest Standard # event-xhr-abort |
XMLHttpRequest Standard # handler-xhr-onabort |
Browser-Kompatibilität
BCD tables only load in the browser