Sie befinden sich hier: Willkommen bei proggen.org! » Ajax Tutorial » Erste Schritte

Seitenleiste

Community

Webtutorials

Inhaltsverzeichnis

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 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Ajax Tests</title>
       <script src="ajax.js"></script>
</head>
 
<body>
	<h1>Ajax in Aktion</h1>
	<a href="javascript:load_file('seite2.htm','content');">Seite 2</a>
	<br /><br />
	<div id="content">Hier steht im Moment noch der alte Inhalt</div>
</body>
</html>

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.