Ajax Hello World im Detail

Erzeugen des Ajax Request Objekts

try {
    req = new XMLHttpRequest();
}
catch (e) {
    try {
        req = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (failed) {
            req = null;
        }
    }
}

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

req.open("GET", 'http://localhost/ajax-tutorial/eins/test.txt', true);

Ü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

req.onreadystatechange = function() {
    switch (req.readyState) {
        case 4:
            if (req.status != 200) {
                alert("Fehler:" + req.status);
            } else {
                alert(req.responseText);
                //schreibe die antwort in den div container mit der id content
                var result = '<strong>' + req.responseText + '</strong>';
                document.getElementById('eins').innerHTML = result;
            }
            break;

        default:
            return false;
            break;
    }
};

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

 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 req.send(null);

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

<body>
   <div id="eins" style="width: 80%; height: 80%; border: dashed 1px;">
      <input type="button" onclick="doIt();" value="Mach was!"/>
   </div>
</body>

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