web business 2.0 - das magazin von active value

AJAX, ein wesentliches Element moderner Web2.0-Applikationen, ist eine Technik, um Daten auf einer Webseite auszutauschen, ohne einen kompletten Reload der Seite zu erzwingen. Mittlerweile sind etliche Bibliotheken vorhanden, die die Integration von AJAX in eine Webseite vereinfachen.
Eine (darüberhinaus auch noch recht schlanke) Variante solcher Bibliotheken ist moo.ajax. Mit Hilfe eines einfachen Beispiels zeigen wir einmal, wie man eine Webseite in 4 simplen Schritten mit moo.ajax “ajaxifiziert”.

1. Integration der Javascript-Files in den Head-Bereich.
   
<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.ajax.js"></script>

2. Deklarieren eines Elements, dessen Inhalt per AJAX geändert werden soll
   
<div id="someid">
Inhalt vorher
</div>

3. Ein Element, das die AJAX-Aktion auslösen soll (z.B. ein Link)
   
<a href="javascript://" onClick="new ajax ('data.php', {update: $('someid')});">Klick mich</a>

4. Eine PHP-Datei data.php, die den geänderten Text zurückgibt
   
<?php
print "Text nachher";
?>


Beispiel in Aktion

Download: Komplettes Beispiel

Das hier gezeigte Beispiel liesse sich natürlich auch ohne AJAX mit JavaScript alleine realisieren. In realen Anwendungen liefert die PHP-Datei auch nicht nur ein einfaches “Print” zurück, sondern holt sich z.B. Daten aus einer Datenbank. Das Grundprinzip ist allerdings bei allen AJAX-Anwendungen gleich.