AJAX

AJAX ermöglicht es, nur Teile von Webseiten zu aktualisieren. Dadurch lassen sich auch komplexe Webanwendungen erstellen oder verschiedenste Funktionalitäten in einer Seite zusammenfassen. Meist wird AJAX als etwas sehr komplexes und schwieriges dargestellt. Dabei ist es in der Praxis eigentlich recht einfach.


Wir wollen das an einem ganz simplen Beispiel verdeutlichen, bei dem auf Knopfdruck nur die aktuelle Uhrzeit vom Server gelesen und auf der Webseite dargestellt wird.

 

Zuerst brauchen wir eine einfach PHP-Seite, die nur die aktuelle Uhrzeit ohne irgendwelche weiteren HTML-Inhalte liefert. Das ist natürlich denkbar einfach:

<?php
        echo date("H:i:s");
?>

Diese Seite speichern wir als servertime.php

Als nächstes brauchen wir eine HTML-Seite, mit einem DIV-Objekt, in dem die Uhrzeit später angezeigt werden soll sowie einem Button, der eine Java-Skript-Funktion zum Abrufen der Uhrzeit aufruft:

<html>
<head>
<script type="text/javascript">

// Laedt die aktuelle Uhrzeit vom Server
// per AJAX in das DIV-Objekt "txtZeit"
function getTime()
{
}
</script>
</head>

<body>
        Aktuelle Uhrzeit:
        <div id="txtZeit">Uhrzeit...</div>
        <input type="button" onclick="getTime();" value="aktualisieren">
</body>
</html>

Diese Seite tut natürlich noch nichts, da der Code für die Java-Skript-Funktion getTime() natürlich noch fehlt. Diesen wollen wir uns gesondert ansehen, da hierin "das Geheimnis" von AJAX liegt:

// Laedt die aktuelle Uhrzeit vom Server
// per AJAX in das DIV-Objekt "txtZeit"
function getTime()
{
        // Abhaengig vom Browser-Typ und Version das Request-Objekt erstellen
        if (window.XMLHttpRequest){
                // Code fuer IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        } else {
                // Code fuer IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        // Callback-Funktion fuer AJAX
        xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("txtZeit").innerHTML =
                        xmlhttp.responseText;

                }
        }

        // Request absetzen
        xmlhttp.open("GET","servertime.php",true);
        xmlhttp.send();
}

Was passiert innerhalb dieser Funktion? Zuerst wird ein sog. HttpRequest-Objekt angelegt. Leider ist der Weg zur Erstellung dieses Objektes abhängig vom Browser-Typ bzw. davon, ob er fähig ist ein XMLHttpRequest Objekt zu erzeugen oder nicht.

Als nächstes wird eine sog. Callback-Funktion definiert, die immer dann aufgerufen wird, wenn sich der Status des Request-Objektes ändert. Dies ist zum Beispiel der Fall, wenn der Server eine entsprechende Antwort schickt. Eine Kombination aus readyState = 4 und HTML-Status = 200 signalisert das Eintreffen der Antwort einer auf dem Server fehlerfrei verarbeiteten Seite.

Als letztes muss dem Request-Objekt jetzt nur noch gesagt werden, welches Server-Skript ausgeführt werden soll (in unserem Fall das einfach Skript servertime.php) und dann kann der Request abgesendet werden.

Der Browser ruft daraufhin das PHP-Skript auf. Der Server verarbeitet es entsprechend und schickt das Ergebnis an den Browser zurück. Der ruft die Callback-Funtkion auf, wertet den Status aus und schreibt die Ausgabe des PHP-Skriptes in das angegebene HTML-Objekt.