XMLHttpRequest

XMLHttpRequest ist ein JavaScript Objekt, das von Microsoft entwickelt und von Mozilla, Apple, und Google übernommen wurde. Es wird derzeit im W3C standardisiert. Es bietet einen einfachen Weg, Daten von einem URL zu erhalten. Trotz seines Namens kann man mit XMLHttpRequest jede Art von Daten laden, nicht nur XML, und es unterstützt auch andere Protokolle als HTTP (inklusive file und ftp).

Eine Instanz von XMLHttpRequest erzeugt man ganz einfach so:

var myRequest = new XMLHttpRequest();

Für Näheres zur Verwendung von XMLHttpRequest, siehe Using XMLHttpRequest.

Übersicht: Methoden

Eigenschaften

Nicht-Standard Eigenschaften

Konstruktor

XMLHttpRequest()

Der Konstruktor initiiert ein XMLHttpRequest Objekt. Er muss vor allen anderen Methoden aufgerufen werden.

Gecko/Firefox 16 fügt einen nicht-standard Parameter zum Konstruktor hinzu, der den anonymen Modus einschalten kann (siehe Bug 692677). Das mozAnon flag auf true zu setzen, hat einen ähnlichen Effekt wie der AnonXMLHttpRequest() Konstruktor, der in der XMLHttpRequest Spezifikation beschrieben ist, aber noch in keinem Browser implementiert wurde (Stand September 2012).

XMLHttpRequest (
  JSObject objParameters
);

Parameter (nicht-standard)

objParameters

Es gibt zwei Flags, die gesetzt werden können:

mozAnon

Boolean: Wenn dieses Flag auf true gesetzt ist, wird der Browser weder den Ursprung der Anfrage noch Anmeldedaten übermitteln, wenn er Daten anfordert. Das heisst vor allem auch, dass keine Cookies gesendet werden, sofern sie nicht ausdrücklich mit setRequestHeader hinzugefügt wurden.

mozSystem

Boolean: Dieses Flag auf true zu setzen, ermöglicht das Herstellen von Cross-Site Verbindungen, ohne dass der Server dem mittels CORS zustimmen muss. Erfodert das Setzen von mozAnon: true. D.h. das kann nicht mit dem Senden von Cookies oder anderen Anmeldeinformationen kombiniert werden. Dies funktioniert nur in privilegierten (reviewed) Apps; es klappt nicht auf beliebigen Webseiten, die in Firefox geladen werden.

Methoden

abort()

Bricht die Anfrage ab, falls sie bereits gesendet wurde.

getAllResponseHeaders()

DOMString getAllResponseHeaders();

Liefert alle Antwort-Header als String, oder null falls keine Antwort empfangen wurde.

Anmerkung: Für mehrteilige Anfragen gibt dies die Header des aktuellen Teils der Anfrage zurück, nicht die des ursprünglichen Kanals.

getResponseHeader()

DOMString? getResponseHeader(DOMString header);

Liefert den String mit dem Text des angegebenen Headers, oder null falls die Antwort noch nicht empfangen wurde oder der Header in der Antwort nicht existiert.

open()

Initialisiert eine Anfrage. Diese Methode ist nur zur Verwendung in JavaScript Code; um eine Anfrage aus nativem Code zu initialisieren, ist stattdessen openRequest() zu benutzen.

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

Parameter

method

Die zu benutzende HTTP Methode,  wie "GET", "POST", "PUT", "DELETE", etc. Wird für nicht-HTTP(S) URLs ignoriert.

url

Der URL, an den die Anfrage geschickt werden soll.

async

Ein optionaler boole'scher Parameter mit Defaultwert true, der angibt, ob die Operation asynchron ausgeführt werden soll. Wenn dieser Wert false ist, kehrt die send()Methode nicht zurück, bis die Antwort vollständig empfangen worden ist. Ist er true, kehrt sie sofort zurück, und die Benachrichtigung über die vollendete Transaktion erfolgt mittels Events. Dies muss true sein falls das multipart Attribut true ist, sonst wird ein Fehler ausgelöst.

user

Der optionale Benutzername zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.

password

Das optionale Passwort zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.

overrideMimeType()

Übergeht den vom Server zurückgegebenen MIME Typ. Dies kann beispielsweise benutzt werden, um zu erzwingen, dass ein Stream als text/xml behandelt und geparst wird, selbst wenn ihn der Server nicht als das meldet. Diese Methode muss vor send() aufgerufen werden.

void overrideMimeType(DOMString mimetype);

send()

Sendet die Anfrage. Falls die Anfage asynchron ist (was der Default ist), kehrt diese Methode zurück, sobald die Anfrage gesendet ist. Ist die Anfrage synchron, kehrt diese Methode nicht zurück, bis die Antwort angekommen (oder ein Timeout aufgetreten) ist.

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

Anmerkungen

Falls data ein Document ist, so wird dieses vor dem Senden serialisiert. Beim Senden eines Document senden Firefox Versionen vor Version 3 die Anfrage immer encodiert als UTF-8; Firefox 3 sendet das Document richtigerweise mit dem angegebenen body.xmlEncoding, oder UTF-8 falls keines angegeben wurde.

Falls es ein nsIInputStream ist, muss er kompatibel sein mit der setUploadStream()Methode des nsIUploadChannel. In diesem Fall wird die Länge des Inhalts in einem Content-Length Header zur Anfrage hinzugefügt, dessen Wert mit der available()Methode des nsIInputStream ermittelt wird. Jegliche Header, die am Anfang des Streams enthalten sind, werden als Teil des Nachrichtenkörpers behandelt. Der MIME Typ des Streams sollte vor dem Aufruf von send() angegeben werden, indem der Content-Type Header mit der  setRequestHeader() Methode gesetzt wird.

Der beste Weg, um binäre Inhalte zu senden (wie beim Hochladen einer Datei), ist die Verwendung von ArrayBuffern oder Blobs in Verbindung mit der send() Methode. Wenn jedoch stringifizierbare Rohdaten gesendet werden sollen, ist die sendAsBinary() Methode zu verwenden.

setRequestHeader()

Setzt den Wert eines HTTP Anfrage-Headers. Aufrufe von setRequestHeader() müssen nach open(), aber vor send() erfolgen.

void setRequestHeader(
   DOMString header,
   DOMString value
);

Parameter

header

Der Name des zu setzenden Headers.

value

Der Wert des zu setzenden Headers.

Nicht-Standard Methoden

init()

Initialisiert das Objekt für die Verwendung aus C++ Code.

[noscript] void init(
   in nsIPrincipal principal,
   in nsIScriptContext scriptContext,
   in nsPIDOMWindow ownerWindow
);

Parameter

principal

Das Prinzipal, das für die Anfrage benutzt werden soll; darf nicht null sein.

scriptContext

Der Skript-Kontext, der für die Anfrage benutzt werden soll; darf nicht null sein.

ownerWindow

Das Fenster, das zu der Anfrage gehört; darf null sein.

openRequest()

Initialisiert eine Anfrage. Diese Methode ist zur Verwendung in nativem Code; um eine Anfrage in JavaScript Code zu initialisieren, ist stattdessen open() zu verwenden. Siehe Dokumentation für open().

Eine Variante der send() Methode, die binäre Daten schickt.

void sendAsBinary(
   in DOMString body
);

Diese Methode, zusammen mit der readAsBinaryString Methode der FileReader API, ermöglichen das Lesen und den Upload jeglicher Dateitypen und das Stringifizieren der Rohdaten.

Parameter

body

Der Körper der Anfrage als DOMstring. Diese Daten werden durch Beschneiden (Entfernen des höherwertigen Bytes jedes Zeichens) in Einzel-Byte-Zeichen umgewandelt.

sendAsBinary() polyfill

Da sendAsBinary() ein experimentelles Feature ist, kommt hier ein Polyfill für Browser, die sendAsBinary() nicht unterstützen, dafür aber typisierte Arrays.

/*\
|*|
|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polifyll ::
|*|
|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
|*|
\*/

if (!XMLHttpRequest.prototype.sendAsBinary) {
  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
    }
    /* sende als ArrayBufferView...: */
    this.send(ui8Data);
    /* ...oder als ArrayBuffer (altmodisch)...: this.send(ui8Data.buffer); */
  };
}

Anmerkungen

• Standardmässig begrenzt Firefox 3 die Anzahl gleichzeitiger XMLHttpRequest Verbindungen pro Server auf 6 (frühere Versionen begrenzen dies auf 2 pro Server). Manche interaktiven Websites können eine XMLHttpRequest Verbindung offen halten, so dass das Öffnen mehrerer Sitzungen auf solchen Sites dazu führen kann, dass der Browser auf eine Art und Weise hängen bleibt, dass das Fenster nicht mehr neu gezeichnet wird und Steuerelemente nicht mehr reagieren. Dieser Wert lässt sich ändern durch Editieren der Voreinstellung network.http.max-persistent-connections-per-server in about:config.
• Ab Gecko 7.0 werden Header, die durch setRequestHeader() gesetzt wurden, mit der Anfrage mitgeschickt, wenn einer Umleitung gefolgt wird. Zuvor wurden diese Header nicht gesendet.
• XMLHttpRequest ist in Gecko implementiert mittels der nsIXMLHttpRequest, nsIXMLHttpRequestEventTarget, und nsIJSXMLHttpRequest Schnittstellen.

Events

onreadystatechange als eine Eigenschaft der XMLHttpRequest Instanz wird von allen Browsern unterstützt.

Seither wurden einige zusätzliche Event Handler in verschiedenen Browsern implementiert (onload, onerror, onprogress, etc.). Diese werden in Firefox unterstützt. Für Genaueres, siehe nsIXMLHttpRequestEventTarget und Using XMLHttpRequest.

Neuere Browser, inklusive Firefox, unterstützen das 'Horchen' nach XMLHttpRequest Ereignissen mittels der Standard addEventListener APIs zusätzlich zum Setzen von on* Eigenschaften auf eine Handler Funktion.

Browser Kompatibilität

Gecko Anmerkungen

Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) entfernte die Unterstützung für die Verwendung der responseType und withCredentials Attribute bei der Durchführung synchroner Anfragen. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.

Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) und spätere unterstützen die Verwendung von XMLHttpRequest zum Lesen von data: URLs.

Siehe auch

• MDN Artikel über XMLHttpRequest:
  • AJAX - Getting Started
  • Using XMLHttpRequest
  • HTML in XMLHttpRequest
  • FormData
• XMLHttpRequest Referencen von W3C und Browserherstellern:
  • W3C: XMLHttpRequest (base features)
  • W3C: XMLHttpRequest (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2)
  • Microsoft documentation
  • Apple developers' reference
• "Using the XMLHttpRequest Object" (jibbering.com)
• XMLHttpRequest - REST and the Rich User Experience
• HTML5 Rocks - New Tricks in XMLHttpRequest2