Ajax Hello World im Detail

Erzeugen des Ajax Request Objekts

Oops, an error occurred! Code: 2019042216582745909ebf

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

Oops, an error occurred! Code: 2019042216582751e7017e

Ü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

Oops, an error occurred! Code: 201904221658271e0c30bf

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

Oops, an error occurred! Code: 201904221658277815e61e

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

Oops, an error occurred! Code: 20190422165827cda69619

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