Ajax Tests
Ajax in Aktion
Seite 2
Hier steht im Moment noch der alte Inhalt
Man sieht: Die HTML-Seite lädt die externe Javascript-Datei //ajax.js// mit.
Es gibt einen Link, der auf die Javascriptfunktion //load_file(file,target)// verweist, sowie einen div-Container.
===== Die load_file() Funktion =====
Die Datei //ajax.js// muss so aussehen:
function load_file(file, target)
{
var request_object = 0;
if (window.XMLHttpRequest)
{
request_object = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
request_object = new ActiveXObject("Microsoft.XMLHTTP");
}
if(request_object)
{
request_object.open("POST", file);
request_object.onreadystatechange = function()
{
if (request_object.readyState == 4 && request_object.status == 200)
{
document.getElementById(target).innerHTML = request_object.responseText;
}
}
request_object.send(null);
}
}
Diese Funktion ist in einigen Variationen im Internet zu finden, doch das Prinzip ist immer gleich:
Zuerst wir eine Variable //request_object// angelegt und mit einer Null, also false, gefüllt. Dann prüfen wir, ob der Browser des User den XMLHttpRequest unterstützt. Da der Internet Explorer 6 dies nicht tut, wird in der elseif-Verzweigung nach dem ActiveXObject gefragt, dass Microsoft in dieser Version statt dem XMLHttpRequest verwendet. Je nach Browser wird die Variable //request_object// nun zu einem XMLHttpRequest-Objekt oder einem ActiveX-Objekt.
In der folgenden if-Verzweigung (//if(request_object)//) wird geprüft, ob dies erfolgreich war.
Nun wird der Inhalt der zu ladenden Seite angefordert.
Doch was hat es mit //request_object.readyState == 4 && request_object.status == 200// auf sich?
Die sogenannte readyState-Eigenschaft des request_object gibt den Fortschritt des Downloads an:
^ readyState ^ Information ^
| 0 | nicht eingeleitet |
| 1 | Daten werden geladen |
| 2 | Daten wurden geladen |
| 3 | interaktiv |
| 4 | abgeschlossen |
Die Eigenschaft status des request_objects sind die normalen HTTP-Statuscodes der zu ladenden Datei. Ich gebe hier nur die häufigsten an:
^ status ^ Information ^
| 200 | alles hat geklappt |
| 204 | kein Inhalt |
| 401 | unautorisiert |
| 403 | verboten |
| 404 | nicht gefunden |
| 409 | Zeitüberlauf |
| 500 | interner Serverfehler|
Wenn also die Eigenschaft //readyState// den Wert 4 hat und die Eigenschaft //status// auf 200 steht, dann ist der Download erfolgreich gewesen, und der Inhalt, der in der Eigenschaft //responseText// steht, kann per //document.getElementById(target).innerHTML// in einen div-Container oder ein anderes Element mit einer bestimmten ID geschrieben werden.