Ajax Hello World im Detail

Erzeugen des Ajax Request Objekts

In diesem Abschnitt wird das XMLHttpRequest Objekt angelegt. Seit der Version 7 ist dieses auch im Internet Explorer von Microsoft verfügbar. Vorher in der Version 5 und 6 gab es im IE dieses Objekt nicht, es gab jedoch ActiveXObject("Msxml2.XMLHTTP"); bzw. ActiveXObject("Microsoft.XMLHTTP"); die die gleiche Funktionalität über sogar gleichnamige Methoden bereitstellt.

 

Aus Gründen der Kompatibilität zu diesen Versionen sollte man also diese Struktur verwenden. Das bedeutet beim IE 5 und 6 dass mit "new XMLHttpRequest();" bewusst eine Exception ausgelöst wird und im catch Block dann für den IE das Objekt angelegt wird.

 

Unter folgender Url ist eine Spezifikation des XMLHttpRequest Objekts des W3C zu finden:

http://www.w3.org/TR/XMLHttpRequest/

Auslösen eines asyncronen Requests

Über die Methode open wird ein neuer Request erzeugt. Diese Methode hat folgende Parameter:

  • "GET" es handelt sich um einen HTTP GET Request, dazu später mehr.
  • An die Url "http://localhost/ajax-tutorial/eins/test.txt" soll der Aufruf gerichtet sein. Standardmässig ist beim Firefox z.b. nur ein Aufruf einer Adresse möglich die sich unterhalb der gleichen Url wie das Aufrufende Skript befindet.
  • "true" Dieser Parameter sagt, dass dieser Request asyncron ausgeführt werden soll.

Definition einer Callback Funktion

Mit dem Attribut onreadystatechange wird eine Funktion festgelegt, die aufgerufen wird, wenn der request seinen readyState (abschlussStatus) ändert, z.b. wenn er erfolgreich abgeschlossen wurde. In diesem Fall wird mit function(){} eine anonyme Funktion erstellt.

 

Zunächste wird in dieser Funktion der readyState geprüft ob er den gewünschten Wert 4 hat. Laut der W3C spezifikation gibt es 5 Stati:

 

http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-members

 

Innerhalb des Falls 4 (abgeschlossener Transfer) wird nun geprüft ob der HTTP Statuscode den Wert 200 hat. 200 steht für eine Erfolgreiche Übertragung.

 

Die HTTP Statuscodes findet man ebefalls auch beim W3C:

 

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

 

 Wenn alles erfolgreich gelaufen ist wird das Resultat der Abfrage (req.responseText) in das Element mit der id "eins" geschrieben.

HTTP Header und Daten senden

In diesem Bereich werden Felder des HTTP Headers gesetzt. Da keine Daten gesendet werden, ist auch bei send nichts zum senden vorhanden.

Der HTML Inhalt

Im body des HTML Dokuments befindet sich lediglich ein div Container, in diesem Div Container befindet sich ein Button, der die JavaScript Funktion doIt(); bei einem Klick ausführt.

Navigation