XMLHttpRequestEventTarget: abort-Event
Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.
Das abort-Event wird ausgelöst, wenn eine Anfrage abgebrochen wurde, zum Beispiel weil das Programm XMLHttpRequest.abort() aufgerufen hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("abort", (event) => { })
onabort = (event) => { }
Ereignistyp
Ein ProgressEvent. Erbt von Event.
Ereigniseigenschaften
Neben den unten aufgeführten Eigenschaften sind Eigenschaften der Elternschnittstelle, Event, verfügbar.
lengthComputableSchreibgeschützt-
Ein boolesches Flag, das angibt, ob die gesamte zu leistende Arbeit und die bereits geleistete Arbeit durch den zugrunde liegenden Prozess berechenbar ist. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.
loadedSchreibgeschützt-
Ein 64-Bit-Unsigned-Integer-Wert, der die Menge der bereits durch den 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 wird nur der Körper der HTTP-Nachricht gezählt, nicht jedoch die Header und andere Overheads. totalSchreibgeschützt-
Ein 64-Bit-Unsigned-Integer, der die Gesamtmenge der Arbeit darstellt, die der zugrunde liegende Prozess auszuführen versucht. Beim Herunterladen einer Ressource über HTTP ist dies die
Content-Length(die Größe des Nachrichtentextes) und schließt nicht die Header und andere Overheads 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("/shared-assets/images/examples/balloon.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://example.com/some-path");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("/shared-assets/images/examples/balloon.jpg").abort();
});
Ergebnis
Verwendung mit XMLHttpRequestUpload
Sie können das abort-Event verwenden, um den Upload zu stoppen, bevor er abgeschlossen ist. Für ein vollständiges Codebeispiel, das eine Datei hochlädt und eine Fortschrittsleiste anzeigt, siehe die Hauptseite für XMLHttpRequestUpload.
// In case of an abort we hide the progress bar
// Note that this event can be listened to on the xhr object too
function errorAction(event) {
progressBar.classList.remove("visible");
log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("abort", errorAction);
Spezifikationen
| Specification |
|---|
| XMLHttpRequest # event-xhr-abort |
| XMLHttpRequest # handler-xhr-onabort |
Browser-Kompatibilität
api.XMLHttpRequest.abort_event
Loading…
api.XMLHttpRequestUpload.abort_event
Loading…