CSS, HTML und Javascript mit {stil}

Methoden und Eigenschaften des XMLHttpRequest

XMLHTTP

Teil 1: Grundlagen und Beispiele: XMLHttpRequest

Die wichtigsten Methoden des XMLHttpRequest-Objekts öffnen die Verbindung zum Server und senden den Request.

Methode Beschreibung
abort() Beendet den aktuellen Request
getAllResponseHeaders() Gibt den vollständigen Header (Label und Werte) als String zurück. Die Namen-/Wertpaare sind durch Carriage Return/Linefeed-Zeichen voneinander getrennt.
getResponseHeader("headerLabel") Gibt den String-Wert eines einzelnen Header-Labels zurück
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Legt die Ziel-Url, die Methode und weitere optionale Attribute des anstehenden Requests fest
send(content) Übermittelt den Request, optional mit einem String oder DOM-Objekt-Daten
setRequestHeader("label", "value") Weist dem Header ein Label/Wert-Paar zu, das mit dem Request versendet wird

open()

request.open("GET", file, true);

Die beiden erforderlichen Parameter der open()-Methode sind die HTTP-Methode und die URL für die Verbindung.

GET ist angebracht, wenn es sich im Wesentlichen um die Anfrage von Daten handelt, POST wird benutzt, wenn die Länge der ausgesendeten Daten größer als 512 Bytes ist. Die URL kann eine vollständige oder relative URL sein.

Der dritte optionale Parameter ist ein boolescher Wert, der festlegt, ob die Transaktion asynchron oder synchron durchgeführt werden soll. Die Voreinstellung ist true für einen asynchronen Request: Die Ausführung des Skripts wird sofort nach dem Absetzen der send()-Methode fortgesetzt – ohne auf die Antwort zu warten. Wird der Wert auf false gesetzt, wartet das Skript bis der Request gesendet und die Antwort vom Server angekommen ist. Ein asynchroner Request ist sicherer und wird um das onreadystatechange-Event programmiert.

Die Daten, die vom Server zurück geschickt werden, müssen mit einem Content-Type text/xml geliefert werden. Inhalte, die als text/plain oder text/html gesendet werden, werden von der Instanz des Request-Objekts akzeptiert, sind aber nur als Eigenschaft responseText verfügbar.

send()

request.send("");

Die letzte Zeile der Funktion sendet den Request und ein leeres String-Literal an den Server.

Sobald der Request abgesendet wurde, kann das Skript nach diversen Eigenschaften Ausschau halten, die allen Implementierungen gemeinsam sind. Alle diese Eigenschaften können nur gelesen werden.

getResponseHeader / getAllResponseHeaders

Bei einem HEAD-Request gibt der Server nur den Header einer Resource zurück – gerade genug, um den Content-Type oder das Datum der letzten Änderung (Last-Modified) zu erfahren, ohne das Dokument selbst zu öffnen.

Um einen HEAD-Request auszuführen, wird die open()-Methode mit einem HEAD-Request anstelle von GET oder POST aufgerufen und der Header entweder mit getAllResponseHeaders oder getResponseHeader("Name") um einen individuellen Wert zu lesen. Wenn getAllResponseHeaders aufgerufen wird, enthält die Antwort alle Header-Informationen als Name-/Wertpaar und die einzelnen Paare sind durch CR/LF voneinander getrennt.

var xmlhttp = null;
if(window.XMLHttpRequest){        // Firefox, Safari, ... 
   xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject){  // IE Windows
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp) {
   xmlhttp.open("HEAD", "jsBeispiele/xml/data.xml", true);
   xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4) {
         var res = document.createElement('pre');
         var resText = document.createTextNode(xmlhttp.getAllResponseHeaders());
         res.appendChild(resText);
         httpHead.appendChild(res);
      }
   }
   xmlhttp.send(null);
}

Um einen einzelnen Wert abzurufen, wird xmlhttp.getResponseHeader('name') anstelle von xmlhttp.getAllResponseHeaders() aufgerufen.

xmlhttp.getAllResponseHeaders('Last-Modified');

Eigenschaften

Eigenschaft Beschreibung
onreadystatechange Event Handler für ein Ereignis, dass bei jeder Änderung des Zustands feuert
readyState Status des Objekts (integer):
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText String mit Daten, die vom Server zurück gegeben werden
responseXML DOM-kompatibles Document-Objekt mit Daten, die vom Server geliefert werden
status Ein numerischer Code, der vom Server zurückgegeben wird, so wie 404 für "Not Found" oder 200 für "OK"
statusText Eine Nachricht als String, die den Statuscode begleitet

Die Eigenschaft readyState zeigt grob den Fortschritt während des Requests an. Das entscheidende Signal beim Beenden der Transaktion ist 4.

Das folgende Listing ist ein minimales Gerüst für die Funktion des Event Handlers onreadystatechange, die eine Bearbeitung des Response-Inhalts nur dann erlaubt, wenn alle Bedinungen korrekt erfüllt sind.

xmlObj.onreadystatechange = function(){
   if (xmlObj.readyState == 4) {
      updateObj('xmlObj', 
        xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
   }
}

Der Zugriff auf die Daten, die der Server zurückliefert, erfolgt über die Eigenschaften responseText oder responseXML. Ersteres ist eine Darstellung als String, während responseXML ein vollwertiger XML-Knoten des DOMs ist.

Neben der Bestätigung, dass die Transaktion abgeschlossen wurde, brauchen wir eine Aussage über Erfolg/Mißerfolg der Transaktion via der status- und/oder statusTextEigenschaften. Sinnvolle Werte für die positive Bestätigung sind 200 und OK.

Wenn es Bedenken ob eines möglichen Timeouts vom Server gibt, kann man die the sendXMLHttpRequest()-Funktion durch einen globalen Timestamp erweitern und dann die Event Handler-Funktion ändern, damit bei jedem Feuern des Ereignisses die verstrichene Zeit berechnet wird. Wenn die akzeptable Grenze überschritten wird, wird die Methode request.abort() benutzt, um die send-Operation zu canceln und den Benutzer über einen Fehler zu benachrichtigen.

Sicherheit: Javascript Sandbox

Wenn das XMLHttpRequest-Objekt innerhalb eines Browsers agiert, adaptiert der XMLHttpRequest die Sicherheitsstrategien einer typischen Javascript-Anwendung – die »Sandbox«-Politik.

  1. In den meisten Browsern kann eine Seite, die Skriptcode enthält, nur über das http: Protokoll geladen werden, so dass es nicht ohne Weiteres möglich ist, die Seiten auf der lokalen Platte zu testen (file: protocol). Mozilla erfordert, dass der Zugriff auf das Objekt in UniversalBrowserRead-Sicherheitsprivilegien erfolgt. IE hingegen öffnet ein modales Fenster, um den Benutzer von einem potentiellen Sicherheitsproblem zu benachrichtigen und ein Abbrechen der Funktion anzubieten.
  2. Desweiteren muss die URL, die die Daten liefert, dieselbe sein wie die des Skripts. Unglücklicherweise bedeutet das, das clientseitige Skripte keine Web Service-Daten von anderen Seiten abrufen und in eine Seite einbinden können. Alles muss von derselben Domaine kommen. Unter diesen Bedingungen muss man seine Benutzer immerhin nicht mit Nachrichten zu möglichen Sicherheitsrisiken in Angst und Schrecken versetzen.

Aspekte: History und Bookmarks

Schon die HTML-Technik der Frames und iFrames bot einen Ansatz, um Teile einer Seite stehen zu lassen und nur relevante Daten auszutauschen. Frames gehören mittlerweile zu den unerwünschten Elementen, da ihr Einsatz mit einer Reihe von schwerwiegenden Nachteilen verbunden ist. Seiten, die aus HTML-Frames aufgebaut sind, lassen sich nicht bookmarken und setzen die History des Browsers außer Kraft.

Auch beim Einsatz des XMLHttpRequest funktioniert die History des Browsers nicht mehr.