Ajax Tests

====== Erste Schritte ====== ===== Die Umgebung ===== Zunächst legen wir eine Datei //index.htm// an, anhand derer die Möglichkeiten von Ajax gezeigt werden. Wir benötigen einen Link oder Button der auf eine Javascriptfunktion verweist, die dann die geforderten Inhalte nachlädt. //index.htm//





	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.