Dieser Text soll einen
knappen Einblick in AJAX geben,
eine vielverheißende neue
Web-Programmiertechnik, die in jüngster Zeit als Mittel zur
Dynamisierung von HTML-Seiten wachsenden Zuspruch findet. Was steckt da
drin? Gibt es ein leichtverständliches Wirkprinzip? Worin liegt
der Mehrwert? Was ist der Haken dabei? Ganz kurz: Kennen muß
man neben JavaScript und HTML auch PHP, nützen kann CSS, aber das
ist alles, d.h. XML ist optional. Eine neue Sprache oder so etwas ist
AJAX nicht, sondern eine Methodik, mit der eine Webseite sich mit
weiterer Information vom Server anreichern kann, während der Nutzer sie betrachtet.
Schauen Sie sich im Quelltext dieses Dokuments das JavaScript im Header
an! (Weiter unten
ist das
Skript aufgelistet, damit Sie es beim Drucken dieser Seite dabeihaben!)
Das wichtige darin sind zwei
Funktionen (die auch anders heißen dürfen):
requesT() : Sendet eine Anforderung ("request") ab, startet auf dem Server das Programm ajx.php receivE()
: Verarbeitet das zurückkommende Ergebnis im Browser
Nun steckt man bloß einen
Aufruf der Methode
requesT() hinter eine Verknüpfung, eine Graphik oder einen Button oder was immer, wo sonst irgend ein normaler
Link
sein könnte, z.B. so wie hier:
Der Link hinter den Aktionen
lautet javascript:requesT('abc') bzw. javascript:requesT('xyz').
Wird auf
[Aktion A] bzw. [Aktion B] geklickt, dann bekommt
der Webserver über requesT() diesen Auftrag: ajx.php?eingabe=abc bzw. ajx.php?eingabe=xyz
Auf dem Server wird
dann das Programm ajx.php gestartet und ihm in der
Variablen eingabe der
Wert abc bzw. xyz übergeben.
Und wie sieht es aus, das Programm ajx.php ? In diesem Fall ganz kurz:
<?php
// Aufruf erfolgt mit ?eingabe=wert
switch($_REQUEST['eingabe'])
{
case 'abc':
echo "abc|Die Aktion ist
<b>erledigt</b>";
break; case
'xyz':
echo "xyz|Diese Aktion konnte nicht ausgeführt
werden";
break; }
?>
Was hier
mit dem echo-Befehl ausgegeben wird, geht dann an die
JavaScript-Funktion receivE(). Schauen Sie sich also
receivE() an (im Quelltext
dieses Dokuments oder unten im Listing). Sie untersucht den empfangenen String, also z.B. abc|Ergebnis der Aktion abc:
Die Aktion ist
<b>erledigt</b>
und spaltet ihn bei dem
Zeichen
'|' auf. Damit kann nun ganz beliebig umgegangen werden. Der
Inhalt wird in diesem Fall noch etwas aufbereitet und an das
DOM-Element erg übergeben. Wenn man also z.B. ein
Element <div
id="erg">...</div> in der betr. Seite hat, in
dem momentan irgendetwas
(oder nichts) steht, hier z.B. dieses:
>>>
Hier wird das Ergebnis des PHP-Programms ajx.php
erscheinen <<<
dann wird das nach
einem Klick plötzlich so aussehen:
Ergebnis von Aktion abc:
Die Aktion ist erledigt
Damit ist das
Wesentliche beschrieben. Dieses Handlungsmuster kann man ganz beliebig
ausbauen!
Das aufgerufene PHP-Programm kann avanti-Jobs
umfassen und alles
mögliche zurückgeben, was dann die Funktion receivE() an beliebigen Stellen ins
Dokument einbauen kann.
Leicht könnte
man dem
Request mehr als einen Parameter mitgeben:
function
requesT(abc,cde) {
http.open('get', 'bjx.php?input1='+abc+'&input2='+cde);
http.onreadystatechange = receivE;
http.send(null); }
Das PHP-Programm bjx.php hätte dann zwei
Parameter input1 und input2 auszuwerten. Man kann ferner
auch mehrere Request- und Receive-Funktionen einrichten.
Die Funktion
receivE() kann man frei ausgestalten, so
daß sie viel mehr oder ganz andere Dinge tut, als nur den
Inhalt eines <div> zu ersetzen. Wichtig ist dabei das
"Document Object Model (DOM)", mit dem man in JavaScript auf alle
Inhalte des aktuellen Dokuments lesend und schreibend zugreifen kann,
wie es hier am Beispiel des <div> zu sehen ist. Fast jedes HTML-Tag kann mit einem Attribut id="..."
versehen werden und ist damit dann ansprechbar aus JavaScript heraus.
Auf diese einfache Weise kann JavaScript den Inhalt (auch das Aussehen)
der aktuell geladenen Seite stark verändern, ohne die Seite neu zu
laden!
Wir haben noch nicht erklärt, was denn
"Asynchronous" bedeuten soll und wieso von XML die Rede ist.
Beides sind wichtige
Aspekte, allerdings braucht man sie nicht zu kennen, um mit AJAX viel zu erreichen,
und vermutlich auch und gerade in Verbindung mit allegro-Datenbanken,
denn das PHP-Programm auf dem Server kann mit avanti
kommunizieren, das
ist der wichtige Punkt.
Für
die Geschäftsbereiche Erwerbung und Ausleihe könnte
die Technik möglicherweise recht fruchtbar sein. AJAX-Anwendungen
können natürlich sehr viel komplexer
werden als hier im Beispiel gezeigt. Die Kunst beim Programmieren
besteht darin, hier wie auch sonst, unnötige
Komplexität zu
vermeiden! Zwischen AJAX und XML besteht keine zwingende Kopplung!
XML ist zwar allerfeinste Sahne, wer aber auf die Linie achten will, kann eine fettfreie Alternative wählen:
JSON. (Da gibt es respektlose Gesellen, die sagen, XML sei zum Datenaustauschen so gut geeignet wie eine Zange zum Nägeleinschlagen!)
Relevant ist XML oder JSON nur hinsichtlich der Datenübermittlung vom aufgerufenen PHP-Programm zu der JavaScript-Funktion receivE().
Diese soll ja aus den empfangenen Daten etwas machen. Die Daten
kommen als lange Zeichenfolge an, und wenn darin viele Elemente
stecken, will man dafür nicht jedesmal viel programmieren, sondern
jedes Element mit einem Griff herausfischen können. Sind die Daten XML
oder (besser noch) JSON, kann man dafür kompetente
JavaScript-Funktionen nutzen, das ist der Punkt. Und wo ist der Haken? Das ist
der Back-Button des Browsers. Er macht nicht, wie man intuitiv
erwartet, den letzten Klick rückgängig - versuchen Sie es
oben mit dem Beispiel! Allerdings ist das auch gar nicht seine wahre Funktion,
sondern er holt die vorher geladene Seite zurück. Eine per AJAX
veränderte Seite ist eben keine neu geladene Seite. Das zieht ein
weiteres Problemchen nach sich: eine mit AJAX veränderte Seite
läßt sich nicht, so wie sie gerade aussieht, "bookmarken". Und noch eins kann als Problem empfunden werden: JavaScript muß eingeschaltet sein. In summa : Wenn diese Dinge
keine Rolle spielen, kann AJAX eine Anwendung mit aufwendiger
Oberflächengestaltung eleganter, schneller und ruhiger erscheinen
lassen, auch auf trägen Geräten an langsamen Drähten.
So
sieht das JavaScript aus, das in dieses Dokument eingebaut ist: Was schwarz ist, braucht man nicht zu verstehen, sondern kann man unverändert abkupfern, nur das Rote ist anwendungsspezifisch!
<script language="javascript">
// ******
Allgemeiner Teil (immer gleich) ***** function
createReqObj() // erzeugt ein "request object" { brws = navigator.appName;
if(brws == "Microsoft Internet Explorer") rq = new
ActiveXObject("Microsoft.XMLHTTP"); else rq
= new XMLHttpRequest(); return rq; }