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
document.getElementById('eins').innerHTML = '<strong>'+
req.responseText
+'</strong>';
}
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.
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.
