XMLHttpRequest.responseType — Eigenschaft · JavaScript-Referenz

Signatur

XMLHttpRequest.responseType

Beschreibung

Die Eigenschaft responseType bestimmt, wie der Browser den Antwortkörper einer Anfrage auswertet und in welcher Form er ihn über xhr.response bereitstellt. Sie ist lesbar und schreibbar. Erlaubt sind nur die festgelegten Zeichenketten "" (Standard, gleichbedeutend mit "text"), "text", "json", "blob", "arraybuffer" und "document".

Sinnvoll ist die Eigenschaft immer dann, wenn man nicht mit reinem Text arbeitet: Mit "json" spart man sich den eigenen Aufruf von JSON.parse(). "blob" eignet sich für Bilder und Dateidownloads, "arraybuffer" für Binärprotokolle oder Audiodaten (z. B. für die Web Audio API). Mit "document" erhält man ein fertig geparstes HTML- bzw. XML-Document.

Man setzt responseType nach open() und vor send(). Ist ein anderer Wert als "" oder "text" gesetzt, lösen responseText und responseXML beim Zugriff eine InvalidStateError-Ausnahme aus. Die Daten liest man dann ausschließlich über response.

Parameter

Name	Typ	Default	Beschreibung
$value	"" \| "text" \| "json" \| "blob" \| "arraybuffer" \| "document"	""	Gewünschter Antworttyp beim Setzen. Unbekannte Werte ignoriert der Browser stillschweigend (mit einer Warnung in der Konsole), der bisherige Wert bleibt dann erhalten.

Rückgabewert

Typ

string

Beschreibung

Der aktuell eingestellte Antworttyp. Davon hängt ab, was xhr.response liefert: string, ein Objekt bzw. einen Wert aus dem geparsten JSON, Blob, ArrayBuffer oder Document.

Beispiele

JSON direkt als Objekt empfangen

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

xhr.addEventListener('load', () => {
  if (xhr.status === 200) {
    // xhr.response ist bereits ein Objekt, JSON.parse entfällt
    console.log(xhr.response.name);
  }
});
xhr.send();

Leanne Graham

Bild als Blob laden und anzeigen

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

const blob = await loadImage('/img/logo.png');
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
img.onload = () => URL.revokeObjectURL(img.src);
document.body.append(img);
console.log(blob.type, blob.size);

image/png 20480

Binärdaten als ArrayBuffer auswerten

const xhr = new XMLHttpRequest();
xhr.open('GET', '/daten/datei.bin');
xhr.responseType = 'arraybuffer';

xhr.onload = () => {
  const bytes = new Uint8Array(xhr.response);
  // Die ersten vier Bytes als Hex-Signatur ausgeben
  const signatur = [...bytes.slice(0, 4)]
    .map((b) => b.toString(16).padStart(2, '0'))
    .join(' ');
  console.log(`Länge: ${bytes.length}, Signatur: ${signatur}`);
};
xhr.send();

Länge: 1024, Signatur: 89 50 4e 47

HTML-Fragment als Document parsen

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

xhr.onload = () => {
  const doc = xhr.response; // Document-Objekt
  const titel = doc.querySelector('h1')?.textContent;
  console.log(titel);
};
xhr.send();

Mein Artikel

// Wichtig · Fallstricke

Reihenfolge: Setzt man responseType erst, wenn die Antwort schon geladen wird oder fertig ist (readyState 3 oder 4), wird eine InvalidStateError-Ausnahme ausgelöst. Deshalb die Eigenschaft immer zwischen open() und send() setzen.
Synchrone Anfragen: Bei open(method, url, false) darf responseType im Fensterkontext nicht gesetzt werden, sonst folgt eine InvalidAccessError-Ausnahme. Synchrone XHR-Anfragen gelten ohnehin als veraltet.
Ungültiges JSON: Ist "json" gesetzt und die Antwort kein gültiges JSON, wird kein Fehler ausgelöst. Stattdessen ist xhr.response einfach null. Den Statuscode und null deshalb immer selbst prüfen.
Zugriff auf andere Eigenschaften: Bei allen Typen außer "" und "text" lösen responseText und responseXML eine Ausnahme aus. Nur response verwenden.
"document" steht in Web Workern nicht zur Verfügung.
Den nicht standardisierten Wert "moz-chunked-arraybuffer" gibt es nur in alten Firefox-Versionen. Er sollte nicht mehr verwendet werden. Für gestreamte Antworten ist fetch() mit ReadableStream die richtige Wahl.
Für neuen Code ist meist die fetch()-API vorzuziehen (response.json(), .blob(), .arrayBuffer()). XHR bleibt vor allem wegen der Upload-Fortschrittsereignisse (xhr.upload.onprogress) nützlich.

Siehe auch

XMLHttpRequest XMLHttpRequest.response XMLHttpRequest.responseText XMLHttpRequest.responseXML XMLHttpRequest.open() Blob ArrayBuffer