Schneller, höher, weiter

Mit Daten

Ganz im Sinne der AJAX-Erfinder ist das obige Beispiel nicht. Serveranfragen im Hintergrund sollen natürlich vor allem dazu dienen, dynamische Inhalte die aktuelle Webseite zu integrieren. Das PHP-Skript in Listing 3 soll dafür den Test-Service realisieren. Es gibt bei jeder Anfrage eine zufällig Zahl zwischen 1 und 100 aus.

<?
  srand(time());
  $random = (rand()%100);
  print $random;
?>

Haben Sie es unter dem Namen random.php im gleichen Verzeichnis auf dem Server gespeichert wie die anderen Dateien, müssen Sie die Variable url in ajax.js entsprechend ändern. Die entsprechende Zeile lautet dann:

var url = "http://localhost/~oli↩
ver/ajax/random.php";

Damit der Browser den geänderten Javascript-Code lädt, müssen Sie die ganze Seite mit dem Reload-Button neu laden. Klicken Sie auf den Link, zeigen die Dialogfenster wieder den jeweiligen Status des Request-Objekts.

An die gelieferten Server-Daten können Sie naturgemäß erst gelangen, wenn die Übertragung abgeschlossen ist, also im Zustand 4. Der Callback-Handler prüft also am besten bei jeder Zustandsänderung, ob dieser Endzustand schon erreicht ist, und verarbeitet erst am Ende die Nutzdaten.

Auslesen lässt er sich über die Variable readyState des Request-Objekts. Die Nutzdaten liefert das Feld responseText in ASCII-Textform. Die Funktion checkResult() sieht damit so aus, wie in Listing 4 zu sehen.

function checkResult()
{
  if (request.readyState == 4) {
     alert("Antwort: " + request.responseText);
  }
}

Wenn Sie die Seite im Browser neu laden und auf den Link klicken, gibt nun ein Dialogfenster die vom Server zufällig erzeugte Zahl aus.

Die Webseite verändern

Nun haben Sie zwei der drei Schritte zur AJAX-Anwendung schon hinter sich: mit einem Request-Objekt eine Anfrage an den Server schicken und irgendwann die Antwort empfangen und verarbeiten. Bleibt noch die Aktualisierung der Webseite selbst. Schließlich sollen die Nutzdaten an der dafür vorgesehenen Stelle optisch ansprechend auftauchen und nicht nur in Form aufspringender Dialogboxen.

Auch diese Aufgabe übernimmt Javascript-Code, der auf verschiedene Weise Inhalt und Struktur der HTML-Seite verarbeiten kann. Browserintern repräsentiert das so genannte Document Object Model (DOM) den Aufbau jeder Seite (Abbildung 3). Dieser baumartige Aufbau jedes Dokuments ermöglicht es, in Javascript jedes beliebige HTML-Element zu referenzieren, auszulesen und zu verändern. Eigener Code kann in den Baum auch Elemente einbauen, die dann in der HTML-Seite neu erscheinen. Den Elementenbaum beliebiger Seiten können Sie sich in Firefox mit Tools | DOM Inspector ansehen (Abbildung 3).

Abbildung 3: Über den Menüpunkt Tools | DOM Inspector können Sie sich in Firefox das Document Object Model von HTML-Seiten anzeigen lassen.

Fürs erste soll es genügen, ein bestehendes Element so zu verändern, dass es das Ergebnis der AJAX-Anfrage anzeigt. Besonders einfach geht das, wenn das zu verändernde Element eine eindeutige ID trägt, über die es sich in Javascript ansprechen lässt. In der HTML-Datei aus Listing 1 ist dazu das Span-Element mit der ID random vorgesehen.

Die Javascript-Funktion getElementById() des Gesamtdokuments liefert darüber bequem eine Referenz auf das HTML-Element. Der dann folgende Befehl setzt dessen Attribut innerHTML auf den erhaltenen Zufallswert.

var randomDiv = document.getElem↩
entById("random");
randomDiv.innerHTML = request.re↩
sponseText;

Schreiben Sie diese beiden Zeilen statt der alert-Funktion in die obige Version von checkResult(), ist die AJAX-Anwendung komplett: Der Javascript-Code schreibt das Ergebnis direkt in die HTML-Seite, statt sie komplett neu zu laden.