XMLHttpRequest.responseText — Eigenschaft · JavaScript-Referenz

Signatur

XMLHttpRequest.responseText

Beschreibung

responseText enthält den Antwortkörper einer XMLHttpRequest-Anfrage als Text. Der Browser dekodiert die empfangenen Bytes dabei anhand des im Content-Type-Header angegebenen Zeichensatzes (Standard: UTF-8). Solange noch keine Daten eingetroffen sind, ist der Wert ein leerer String "".

Die Eigenschaft ist nur verfügbar, wenn responseType den Wert "" (Standard) oder "text" hat. Bei jedem anderen Wert (z. B. "json", "blob", "arraybuffer") wirft der Zugriff eine InvalidStateError-DOMException. In diesem Fall nutzt man stattdessen response.

Eine Besonderheit: Während readyState den Wert 3 (LOADING) hat, enthält responseText bereits den bisher empfangenen Teil der Antwort. Damit lassen sich lange laufende Übertragungen (z. B. Log-Streams) schrittweise verarbeiten. Den vollständigen Inhalt hat man erst bei readyState === 4 (DONE) bzw. im load-Event.

Für neuen Code ist die Fetch-API mit Response.text() meist die bessere Wahl; responseText bleibt aber relevant für bestehenden Code, Upload-Fortschrittsanzeigen und ältere Umgebungen.

Rückgabewert

Typ

string

Beschreibung

Der (ggf. bis dahin nur teilweise) empfangene Antworttext. Leerer String "", wenn noch nichts empfangen wurde oder die Anfrage fehlgeschlagen ist.

Beispiele

Textdatei laden und ausgeben

const xhr = new XMLHttpRequest();
xhr.open('GET', '/daten/hinweis.txt');

xhr.addEventListener('load', () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Inhalt:', xhr.responseText);
  } else {
    console.error(`Fehler ${xhr.status}: ${xhr.statusText}`);
  }
});

xhr.addEventListener('error', () => console.error('Netzwerkfehler'));
xhr.send();

Inhalt: Wartungsarbeiten am Sonntag von 2 bis 4 Uhr.

JSON-Antwort manuell parsen

const ladeBenutzer = (id) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `/api/benutzer/${id}`);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.onload = () => {
    if (xhr.status !== 200) return reject(new Error(`HTTP ${xhr.status}`));
    try {
      resolve(JSON.parse(xhr.responseText));
    } catch (err) {
      reject(new Error('Ungültiges JSON: ' + err.message));
    }
  };
  xhr.onerror = () => reject(new Error('Netzwerkfehler'));
  xhr.send();
});

const benutzer = await ladeBenutzer(42);
console.log(benutzer.name);

Ada Lovelace

Teilantworten während des Ladens verarbeiten

const xhr = new XMLHttpRequest();
let verarbeitetBis = 0;

xhr.open('GET', '/logs/stream');
xhr.onprogress = () => {
  // Nur den neu hinzugekommenen Teil auswerten
  const neu = xhr.responseText.slice(verarbeitetBis);
  verarbeitetBis = xhr.responseText.length;
  neu.split('\n').filter(Boolean).forEach((zeile) => console.log('Log:', zeile));
};
xhr.onload = () => console.log('Stream beendet, Gesamtlänge:', xhr.responseText.length);
xhr.send();

Log: Server gestartet Log: Verbindung angenommen Stream beendet, Gesamtlänge: 48

InvalidStateError bei falschem responseType

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/status');
xhr.responseType = 'json';
xhr.onload = () => {
  try {
    console.log(xhr.responseText);
  } catch (err) {
    console.log(err.name); // responseText ist hier nicht erlaubt
    console.log(xhr.response); // stattdessen response nutzen
  }
};
xhr.send();

InvalidStateError { ok: true }

// Wichtig · Fallstricke

Nur bei responseType "" oder "text": Andernfalls wirft der Zugriff eine InvalidStateError-Ausnahme. Für JSON, Blobs oder Binärdaten response verwenden.
Status prüfen: Auch bei HTTP-Fehlern (404, 500) enthält responseText den Fehlerkörper des Servers. Immer zusätzlich status auswerten.
Teilinhalte: Bei readyState === 3 ist der Text unvollständig. Beim schrittweisen Verarbeiten wächst der String stetig – bei sehr großen Antworten kann das viel Speicher kosten.
Zeichenkodierung: Fehlt ein charset im Content-Type, wird UTF-8 angenommen. Mit overrideMimeType('text/plain; charset=ISO-8859-1') lässt sich das vor send() erzwingen.
Sicherheit: Den Text niemals ungeprüft per innerHTML ins DOM einfügen oder mit eval() ausführen – Gefahr von XSS. textContent bzw. JSON.parse() verwenden.
CORS: Bei ursprungsübergreifenden Anfragen ohne passende Access-Control-Allow-Origin-Header bleibt responseText leer und das error-Event wird ausgelöst.
Kompatibilität: In allen Browsern verfügbar, jedoch nicht in Service Workern (dort gibt es kein XMLHttpRequest). In Node.js nur über Polyfills.

Siehe auch

XMLHttpRequest XMLHttpRequest.response XMLHttpRequest.responseType XMLHttpRequest.responseXML XMLHttpRequest.readyState XMLHttpRequest.status XMLHttpRequest.overrideMimeType() Response.text()