XHR steht für XMLHttpRequest – die ältere Browser-API, mit der JavaScript Daten vom Server holen kann, ohne die Seite neu zu laden. XHR ist die technische Grundlage von AJAX und funktioniert in allen Browsern.
Wie funktioniert XHR?
Ein XHR-Objekt wird erzeugt, konfiguriert und dann an den Server geschickt. Der Antwort-Callback wird über Ereignisse ausgelöst:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/daten', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();Die wichtigsten Eigenschaften sind readyState (Zustand der Anfrage), status (HTTP-Statuscode wie 200 oder 404) und responseText (Antwort als Text). Über onreadystatechange kann man jeden Zwischenzustand abfangen; moderner ist das onload-Ereignis.
Datenformate
Der Name enthält zwar „XML“, gesendet und empfangen wird heute aber meist JSON. Die Antwort wird dann mit JSON.parse() in ein Objekt umgewandelt. Auch reine Text- oder HTML-Antworten sind möglich.
XHR und CORS
Anfragen an eine andere Herkunft (Origin) unterliegen der Same-Origin-Policy. Ob der Server sie erlaubt, regelt CORS über HTTP-Header – für XHR gilt dieselbe Regel wie für jede Browser-Anfrage.
Die moderne Alternative: Fetch
Die neuere Fetch-API löst XHR weitgehend ab. Sie arbeitet mit Promises und lässt sich mit async/await deutlich lesbarer schreiben:
const res = await fetch('/api/daten');
const daten = await res.json();XHR bleibt vor allem in älteren Codebasen, bei Upload-Fortschrittsanzeigen und in Bibliotheken relevant, die maximale Browser-Kompatibilität brauchen. In einer SPA übernimmt heute meist Fetch die Kommunikation mit dem Server.