8    Ajax

Die Ajax-Technik ermöglicht u. a. den Austausch bestimmter Teile einer Internetseite mit Daten vom Webserver, ohne die Seite vollständig neu aufbauen zu müssen.

Ajax steht für Asynchronous JavaScript and XML. Diese Technik bietet eine asynchrone Datenübertragung zwischen Browser und Webserver. Das ermöglicht Ihnen, Teile einer Internetseite zu ändern, ohne die gesamte Seite neu erstellen und übermitteln zu müssen. Auf diese Weise reduziert sich der Entwicklungsaufwand, verringert sich der Netzverkehr und die Internetseiten werden schneller und flexibler. Die Ajax-Technik wird seit Jahren erfolgreich im Web eingesetzt und ist ein selbstverständlicher Bestandteil vieler Internetseiten.

Zum Ablauf: Aus einer Internetseite heraus wird eine Anforderung an den Webserver gesendet. Dieser sendet eine Antwort zurück. Die Antwort wird in der weiterhin angezeigten Internetseite ausgewertet und führt zur Änderung eines Teils der Seite. Zentraler Bestandteil des gesamten Ablaufs ist ein Objekt des Typs XMLHttpRequest.

Alle Seiten in diesem Kapitel werden über einen Webserver aufgerufen, von dem Sie Daten anfordern, um sie in die Seiten einzufügen. Die Daten können auf dem Webserver in verschiedenen Formen vorliegen:

8.1    Hallo Ajax

Anhand des ersten Beispiels Hallo Ajax erläutere ich Ihnen den für das gesamte Kapitel geltenden grundsätzlichen Ablauf.

Es wird eine HTML-Seite mit einem Hyperlink dargestellt. Die Seite (siehe Abbildung 8.1) enthält einen Absatz. Achten Sie darauf, dass mindestens ein Zeichen innerhalb des Absatz-Containers steht, z. B. ein normales Leerzeichen, oder, wie hier, ein explizites Leerzeichen. Ansonsten kann der Absatz nicht mithilfe von Ajax gefüllt werden.

Dauerhaft angezeigte Seite

Abbildung 8.1    Dauerhaft angezeigte Seite

Nach Betätigung des Hyperlinks wird eine Anforderung an den Webserver gesendet. Dieser sendet einen Text als Antwort. Der gesendete Text wird in den (zunächst leeren) Absatz eingesetzt und erscheint auf der Seite, wie Sie es in Abbildung 8.2 sehen.

Seite ergänzt aus PHP-Datei

Abbildung 8.2    Seite ergänzt aus PHP-Datei

Zunächst die HTML-Seite mit dem JavaScript-Code:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Ajax, erstes Beispiel</title>
   <script>
      function anfordern()
      {
         var req = new XMLHttpRequest();
         req.open("get", "ajax_hallo.php", true);
         // req.open("get", "ajax_hallo.txt", true);
         req.onreadystatechange = auswerten;
         req.send();
      }

      function auswerten(e)
      {
         if(e.target.readyState == 4 && e.target.status == 200)
            document.getElementById("idAbsatz").firstChild.nodeValue =
               e.target.responseText;
      }
   </script>
</head>
<body>
   <p><a id="idLink" href="#">Bitte klicken</a></p>
   <p id="idAbsatz">&nbsp;</p>
   <script>
      document.getElementById("idLink")
         .addEventListener("click", anfordern);
   </script>
</body></html>

Listing 8.1    Datei »ajax_hallo.htm«

Dazu das antwortende PHP-Programm:

<?php
   header("Content-type: text/html; charset=utf-8");
   echo "PHP-Datei: Hallo Ajax";
?>

Listing 8.2    Datei »ajax_hallo.php«

In der Datei ajax_hallo.htm stehen der Hyperlink und der leere Absatz. Durch Betätigung des Hyperlinks wird die Funktion anfordern() aufgerufen. Darin wird zunächst ein neues XMLHttpRequest-Objekt erzeugt. Die Methode open() dieses Objekts eröffnet die Kommunikation mit der antwortenden Seite, hier mit ajax_hallo.php, mithilfe der GET-Methode. Der dritte Parameter der Methode open() steht im Normalfall auf true. Damit wird dafür gesorgt, dass die Kommunikation asynchron abgewickelt wird. Andere Abläufe müssen dann nicht auf das Ende der Anforderung warten.

Dem Eventhandler onreadystatechange wird ein Verweis auf die Funktion auswerten() zugewiesen. Nach dem Senden ändert das XMLHttpRequest-Objekt mehrmals seinen Status. Auf dieses Änderungsereignis reagiert der genannte Eventhandler. Kurz gesagt: Bei jeder Statusänderung wird die Methode auswerten() aufgerufen.

Die Methode send() des XMLHttpRequest-Objekts sendet die Anforderung an den Webserver. Weitere Daten werden zunächst nicht übermittelt. Das Senden sollte erst erfolgen, nachdem der Eventhandler registriert ist. Auf diese Weise bleibt kein Ereignis unbemerkt.

An die Methode auswerten() wird ein Ereignisobjekt übermittelt. Die Eigenschaft target dieses Objekts verweist auf das XMLHttpRequest-Objekt. Es werden zunächst dessen Eigenschaften readystate und status betrachtet. Die Auswertung ist erst dann interessant, wenn readystate den Wert 4 (= complete) und status den Wert 200 angenommen hat. status repräsentiert den Wert des Statuscodes des Hypertext Transfer Protocols (HTTP). 200 steht für Ok, 404 für Page not found, 500 für Internal Server Error usw.

Die Eigenschaft responseText des XMLHttpRequest-Objekts enthält die Antwort des Webservers, in diesem Fall den Text Hallo Ajax, der mithilfe des PHP-Schlüsselworts echo ausgegeben wird. Dieser Text wird in den (zunächst leeren) Absatz gesetzt.

Sie können statt der Ausgabe einer PHP-Datei auch den Inhalt einer Textdatei vom Webserver anfordern und in ein vorhandenes Dokument einsetzen. Dazu müssen Sie den Aufruf der Methode open() in der Funktion anfordern() tauschen, also die Kommentarzeichen für die zweite Zeile entfernen und für die dritte Zeile setzen. Die Textdatei sieht wie folgt aus:

TXT-Datei: Hallo Ajax

Listing 8.3    Datei »ajax_hallo.txt«

Hinweis

Einige Hinweise zur Übertragung von Internetseiten zwischen Browser und Webserver: