XMLHttpRequest.abort() — Methode · JavaScript-Referenz

Signatur

XMLHttpRequest.prototype.abort()

Beschreibung

Mit abort() brechen Sie eine Anfrage ab, die bereits mit send() abgeschickt wurde und noch nicht fertig ist. Das ist nützlich, wenn das Ergebnis nicht mehr gebraucht wird, etwa wenn der Nutzer die Seite verlässt, auf „Abbrechen“ klickt oder bei einer Live-Suche schon einen neuen Suchbegriff eingegeben hat.

Wird die Anfrage abgebrochen, während sie noch läuft (readyState ist 1 mit gesendeter Anfrage, 2 oder 3), passiert Folgendes in dieser Reihenfolge:

readyState wird auf 4 (DONE) gesetzt und ein readystatechange-Event wird ausgelöst.
Falls ein Upload läuft, werden auf xhr.upload die Events abort und loadend ausgelöst.
Auf dem XMLHttpRequest-Objekt selbst werden abort und loadend ausgelöst. Die Events load und error werden nicht ausgelöst.
Danach wird readyState ohne weiteres Event auf 0 (UNSENT) zurückgesetzt. status ist 0, die Antwort ist leer.

Wird abort() aufgerufen, wenn keine Anfrage läuft (also vor send() oder nach dem Abschluss), gibt es keine Fehlermeldung und die Events abort und loadend werden nicht ausgelöst. Deshalb kann man abort() gefahrlos auch „auf Verdacht“ aufrufen. Das Objekt kann danach mit einem neuen open()-Aufruf wiederverwendet werden.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Anfrage nach eigener Zeitgrenze abbrechen

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/report');

xhr.addEventListener('load', () => {
  clearTimeout(timer);
  console.log('Fertig:', xhr.status);
});

xhr.addEventListener('abort', () => {
  console.log('Abgebrochen, readyState:', xhr.readyState, 'status:', xhr.status);
});

xhr.send();

// Nach 3 Sekunden abbrechen, falls noch keine Antwort da ist
const timer = setTimeout(() => xhr.abort(), 3000);

Abgebrochen, readyState: 0 status: 0

Live-Suche: veraltete Anfrage verwerfen

let currentXhr = null;

const search = (term) => {
  // Vorherige, noch laufende Suche abbrechen (bei fertiger Anfrage passiert nichts)
  currentXhr?.abort();

  const xhr = new XMLHttpRequest();
  currentXhr = xhr;
  xhr.open('GET', `/api/search?q=${encodeURIComponent(term)}`);
  xhr.responseType = 'json';
  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log(`Treffer für "${term}":`, xhr.response);
    }
  };
  xhr.send();
};

document.querySelector('#suche').addEventListener('input', (e) => {
  search(e.target.value);
});

Datei-Upload per Button abbrechen

const input = document.querySelector('#datei');
const cancelBtn = document.querySelector('#abbrechen');

input.addEventListener('change', () => {
  const formData = new FormData();
  formData.append('file', input.files[0]);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');

  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      console.log(`Fortschritt: ${Math.round((e.loaded / e.total) * 100)} %`);
    }
  };

  const cancel = () => xhr.abort();
  cancelBtn.addEventListener('click', cancel);

  xhr.onabort = () => console.log('Upload vom Nutzer abgebrochen');
  xhr.onloadend = () => cancelBtn.removeEventListener('click', cancel);

  xhr.send(formData);
});

Fortschritt: 12 % Fortschritt: 37 % Upload vom Nutzer abgebrochen

// Wichtig · Fallstricke

Kein error-Event: Ein Abbruch löst abort aus, nicht error. Wer nur onerror behandelt, bekommt den Abbruch nicht mit. Aufräumarbeiten sollten in loadend stehen, denn dieses Event kommt in jedem Fall.
readystatechange beachten: Beim Abbruch kommt noch ein readystatechange mit readyState === 4 und status === 0. Code, der nur auf readyState === 4 prüft, hält die abgebrochene Anfrage sonst für abgeschlossen. Prüfen Sie zusätzlich status.
Serverseitig: abort() beendet nur die Verbindung auf Seite des Clients. Hat der Server die Anfrage schon erhalten (z. B. einen POST), kann er sie trotzdem vollständig ausführen. Deshalb eignet sich abort() nicht, um Aktionen mit Nebenwirkungen zuverlässig zu verhindern.
Synchrone Anfragen (open(…, false)) blockieren den Haupt-Thread und lassen sich währenddessen nicht mit abort() abbrechen.
Moderne Alternative: Bei fetch() übernimmt AbortController mit AbortSignal diese Aufgabe, zum Beispiel mit AbortSignal.timeout(). Für einfache Zeitlimits bietet XHR außerdem die Eigenschaft timeout mit dem Event timeout.
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten, sowie in Web Workern. In Node.js gibt es XMLHttpRequest nicht von Haus aus.

Siehe auch

XMLHttpRequest XMLHttpRequest.send() XMLHttpRequest.open() XMLHttpRequest.timeout XMLHttpRequest.readyState