Dynamik mit Ajax

Ajax steht für Asynchronous Javascript and XML. Mit dem Verfahren ist es möglich Serveranfragen so zu stellen, daß nicht die ganze HTML-Seite komplettt neu geladen wird, sondern nur Teile davon. Während der Anwender zum Beispiel ein Formular ausfüllt kann im Hintergrund die Eingabe auf dem Server bereits überprüft werden.

Mit Ajax ist es möglich Dynamik auf statische Seiten zu bringen. Dynamik in statische Seiten zu bringen ging auch schon früher mit einfachen Javascript, wie dieses kleine Beispiel aus der Mathematik zeigt: » foldr.com.

Ein anderes Beispiel ist diese » Wetterkarte auf meiner Australienseite, welche beim Mouseover-Event die Grafik austauscht. In diesem Beispiel werden jedoch alle Grafiken beim Laden der Seite in den Speicher geladen, auch solche, die nicht angezeigt werden.

Ajax im Einsatz

Schön wäre es, wenn nur die benötigten Elemente nachgeladen werden. Hier kommt Ajax ins Spiel. Es bietet die Möglichkeit asynchron nur die angeforderten Elemente vom Server nachzuladen. Asynchron bedeutet dass die Seite nicht blockiert wird und zum Beispiel gescollt werden kann.

Zum Beispiel: » Ajax und die Tasmanische Wildnis

Imagemap

Die Karte ist als Imagemap angelegt und für jeden Ort wurde ein MouseOver-Event angelegt. Wird die Maus über das definierte Gebiet bewegt, dann wird die Javascript-Funktion getid(nummer) aufgerufen:

<map name="tas" id="tas">
     <area shape="rect" href="#" coords="381,180, 502,225"
              onmouseover="getid(1)" alt="Central Plateau" />
</map>

<script language="JavaScript" type="text/javascript">
<!--
function getid(id) {
   doRequest('map/data/05tas'+id+'.htm');
}
// automatisch die erste Datei laden
getid(0);
//-->
</script>

Textdatei

Die Textdatei mit den Informationen zu einem Ort ist einfaches html. Sie enthält weder ein Head-Element noch Body-Element, da der Inhalt in das Gesamtdokument eingebunden wird. Es ist damit auch einfach möglich Bilder einzubinden. Anders als bei einem Bildwechsel direkt mit Javascript, muß dazu keine Image-Objekt erzeugt werden, sondern das Bild wird genauso wie in eine html-Seite eingebunden und damit erst beim Aufruf geladen. Die Datei für die id 0 hat zum Beispiel folgenden Inhalt:

<p><img class="reqimg" align="left"src="05_tasmanien/05_0959.jpg"
 width="210" height="140" border="0" alt="">
<em>Waterfall Valley</em></p>
<p>Bewegen Sie die Maus über die Karte um für die einzelnen
 Orte ein Bild anzuzeigen.</p>

XMLHttpRequest

Betrachten wir nun die doRequest-Funktion, über die der Server-Call und die anschließende Verarbeitung der Textdatei erfolgt. Die Javascript-Funktion doRequest befinde sich in der ausgelagerten Datei ajax.js und enthält zwei Blöcke. Zum einen wird in Abhängigkeit vom Browser ein XMLHttpRequest-Object erzeugt:

// Abhängig von Browsertyp ein HttpRequest erzeugen
if (window.XMLHttpRequest) {
   http_request = new XMLHttpRequest();
   // Mimetyp überschreiben
   if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/xml');
   }
} else if (window.ActiveXObject) {
   try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch(e) {
      try {
         http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
   }
}

Im zweiten Teil wird die Funktion gesetzt welche das Ergebnis der Anfrage verarbeiten soll und die Anfrage an den Server wird gestartet:

// Setzen der Callbackfunktion
http_request.onreadystatechange = machwas;
http_request.open('GET', url, true);
http_request.setRequestHeader('Content-Type', 'text/xml');
http_request.send(null);

Die Verarbeitungsfunktion wird gesetzt, in dem onreadystatechange den Funktionsnamen (ohne Klammern) erhält. In diesem Fall heißt die Funktion also machwas. An die Funktion open werden drei Parameter übergeben, in unserem Fall als HTTP-Request-Methode 'GET', da nur eine Datei abgerufen wird. Als zweiter Parameter wird die URL der Datei übergeben, die geholt werden soll. Sie muß auf der gleichen Domain liegen. Mit true wird angegeben, daß der Aufruf asynchron erfolgen soll. Über send können Parameter für eine POST-Anfrage an den Server gesetzt werden. In unserem Fall sind keine vorhanden.

Um den Cache vom Internet Explorers zu umgehen kann noch das "If-Modified-Since"-Datum gesetzt werden:

http_request.setRequestHeader('If-Modified-Since',
 'Sat, 1 Jan 2000 00:00:00 GMT');

Callbackfunktion

Schauen wir uns die Callbackfunktion machwas() an. Sie wird aufgerufen, wenn der Server unsere Anfrage beantwortet hat. Um sicher zu gehen, dass die Anfrage vollständig bearbeitet ist wird der readyState überprüft. Ist es 4 (=vollständig) dann können wir die Antwort des Servers genauer untersuchen. Die geladene Datei soll nur angezeigt werden, wenn sie vorhanden ist. Eine 404-Fehlerseite sehe nicht so gut aus ;-). Dafür wird der Status abgefragt ist der Antwortcode des Servers 200, also ok, dann kann die eigentliche Verarbeitung beginnen und die Funktion changetext(text) wird aufgerufen. An sie wird der Inhalt der abgerufenden Datei, welcher über http_request.responseText ermittelt werden kann, übergeben.

function machwas() {
   // Testen ob das Request objekt mit dem laden fertig ist
   if (http_request.readyState == 4) {
      // War die Anfrage erfolgreich / die URL erreichbar ?
      if (http_request.status == 200) {
         changetext(http_request.responseText);
      }
   }
}

function changetext(text) {
   ergebnisdiv = document.getElementById('ajaxbox');
   ergebnisdiv.innerHTML = text;
}

Textbox im Dokument

<script language="JavaScript" type="text/javascript">
<!--
document.write('<div align=\"center\">
                  <div id=\"ajaxbox\"><\/div><\/div>');
//-->
</script>

<style type="text/css">
<!--
#ajaxbox {width:600px; height:160px; margin-bottom:1em;
          font-size:10pt;
          text-align:justify; padding:3px;}
#ajaxbox img {margin-right:1em; border:1px solid #C0C0C0;}
-->
</style>

Fazit

Sicherlich ist dies kein typisches Ajax-Beispiel, da es nur aus statischen Komponenten besteht. Für jeden Ort muß eine seperate Textdatei angelegt werden. Eleganter wäre es wenn die einzublendene Information über eine Datenbankabfrage ermittelt werden oder die Texte in einer einzigen xml-Datei stehen würden.

Links zu Ajax

• » Ajax bei Wikipedia
• » AJAX:Getting_Started bei developer.mozilla.org