XMLHttpRequest.response — Eigenschaft · JavaScript-Referenz

Signatur

get XMLHttpRequest.prototype.response

Beschreibung

Die schreibgeschützte Eigenschaft response enthält den Inhalt des Antwortkörpers einer XMLHttpRequest-Anfrage. Welchen Typ der Wert hat, hängt davon ab, was vor dem Aufruf von send() in responseType gesetzt wurde:

"" (Standard) oder "text" → string
"json" → geparstes JavaScript-Objekt bzw. Wert (oder null bei ungültigem JSON)
"arraybuffer" → ArrayBuffer mit den Rohbytes
"blob" → Blob (z. B. für Bilder oder Downloads)
"document" → geparstes HTML- oder XML-Document

Im Gegensatz zu responseText und responseXML kann response jeden Antworttyp liefern. Daher ist sie die empfohlene Eigenschaft für Binärdaten und JSON. Sinnvoll lesen lässt sich der Wert in der Regel erst, wenn readyState den Wert 4 (DONE) hat, also im load-Ereignis. Bei "text" sind während readyState === 3 (LOADING) schon Teildaten verfügbar.

Schlägt die Anfrage fehl oder ist sie noch nicht abgeschlossen, ist response bei Nicht-Text-Typen null. Bei Text-Typen ist sie ein leerer String. Für neuen Code ist meist die Fetch-API vorzuziehen. XHR ist aber weiterhin nützlich, zum Beispiel für Fortschrittsanzeigen beim Hochladen.

Rückgabewert

Typ

Beschreibung

Den Antwortkörper im Format, das responseType vorgibt. null, wenn die Anfrage fehlgeschlagen oder unvollständig ist oder wenn sich JSON nicht parsen ließ.

Beispiele

JSON direkt als Objekt laden

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
xhr.responseType = 'json';

xhr.addEventListener('load', () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    const user = xhr.response; // bereits geparst, kein JSON.parse nötig
    console.log(user.name);
  } else {
    console.error('HTTP-Fehler:', xhr.status);
  }
});

xhr.send();

Leanne Graham

Bild als Blob laden und anzeigen

const xhr = new XMLHttpRequest();
xhr.open('GET', '/bilder/logo.png');
xhr.responseType = 'blob';

xhr.onload = () => {
  if (xhr.status !== 200) return;
  const blob = xhr.response;
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  img.onload = () => URL.revokeObjectURL(img.src); // Speicher freigeben
  document.body.append(img);
  console.log(blob.type, blob.size);
};

xhr.send();

image/png 10240

Binärdaten als ArrayBuffer auswerten (Promise-Wrapper)

const loadBytes = (url) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = () => xhr.status === 200
    ? resolve(xhr.response)
    : reject(new Error(`Status ${xhr.status}`));
  xhr.onerror = () => reject(new Error('Netzwerkfehler'));
  xhr.send();
});

const buffer = await loadBytes('/daten/datei.pdf');
const header = new Uint8Array(buffer, 0, 4);
console.log(String.fromCharCode(...header)); // PDF-Signatur prüfen

%PDF

HTML-Fragment als Document parsen

const xhr = new XMLHttpRequest();
xhr.open('GET', '/partials/nav.html');
xhr.responseType = 'document';

xhr.onload = () => {
  const doc = xhr.response; // Document-Objekt
  const links = doc.querySelectorAll('a');
  console.log(`${links.length} Links gefunden`);
};

xhr.send();

5 Links gefunden

// Wichtig · Fallstricke

Reihenfolge: responseType muss vor send() gesetzt werden. Wird es danach geändert, wirft der Browser einen InvalidStateError.
Ungültiges JSON: Bei responseType = "json" gibt es keine Ausnahme. response ist dann einfach null. Prüfe deshalb immer auf null.
Statuscode prüfen: response ist auch bei HTTP-Fehlern wie 404 oder 500 gefüllt, etwa mit einer Fehlerseite. Werte zuerst xhr.status aus.
Synchrone Anfragen: Bei open(..., false) dürfen im Fenster-Kontext keine anderen Typen als "" bzw. "text" gesetzt werden. Das führt zu einem InvalidAccessError. Synchrones XHR auf dem Hauptthread ist ohnehin veraltet.
"document" ist in Web Workern nicht verfügbar, weil es dort kein DOM gibt.
Sicherheit: Füge geladene HTML- oder Text-Inhalte nicht ungeprüft per innerHTML ein (XSS). Anfragen an fremde Ursprünge unterliegen CORS.
Kompatibilität: Wird in allen modernen Browsern unterstützt. Der Internet Explorer unterstützte "json" nicht. Dort war JSON.parse(xhr.responseText) nötig.

Siehe auch

XMLHttpRequest XMLHttpRequest.responseType XMLHttpRequest.responseText XMLHttpRequest.responseXML XMLHttpRequest.status