Lionstarrs Linux Blog

Überall im Internet tauchen diese neuen Javascript Applikationen auf, die nicht nur durch Effekte (wie sie z.B. von Scriptaculous bereitgestellt werden) sondern auch durch einfache Bedienungsweise glänzen. Eine Internetseite ist nun manchmal eine Anwendung – und umgekehrt.

Aber wie diese Funktionalität einbauen, ohne dass man etwas davon versteht? Die Antwort lautet: Ajax -Libraries benutzen. Davon gibt es mehrere, die durch unterschiedliche Vorteile glänzen. In diesem Tutorial benutze ich XAJAX, eine PHP Klasse, die es sehr einfach und verständlich macht AJAX Applikationen zu schreiben. Außerdem kommt Scriptaculous (und damit auch Prototype) zum Einsatz, aber nur wegen der Effekte.

Bevor wir anfangen zu Programmieren sollten wir ersteinmal klären was AJAX heißt. AJAX ist eine Abkürzung für [A]synchronous [J]avascript [A]nd [X]ML. Das steht dafür, dass nun nicht mehr einzelne Webseiten vom Server zum Client übertragen werden, sondern teilweise auch nur XML-Dokumente, die die Veränderung in der schon vom Client geladenen Seite beschreiben. Beispiel: Ich ändere eine Option. Statt dass ich nun die Seite neu lad, bekomme ich als Antwort ein XML Dokument, was Javascript “den Befehl” gibt, Option geändert anzuzeigen.

Aber nun genug der Theorie. Da viele sicher ersteinmal sehen wollen, was das Ergebnis ist, ihr findet es hier. Was passieren sollte, wenn Javascript aktiviert ist: Wenn man auf das erste mal auf Öffnen drückt, wird der Inhalt des entsprechenden Fieldsets vom Server nachgeladen und per Effekt Appear aus Scriptaculous eingeblendet. Danach aber, wird durch Öffnen und Schließen nur geändert, ob der Inhalt sichtbar ist.

Was ist der Vorteil? Dadurch, dass ein Fieldset nur bei Bedarf nachgeladen wird spart man Bandbreite – aber es erhöht sich natürlich die Anzahl der Verbindungen, da für jedes zum ersten Mal geöffnete Fieldset eine neue Verbindung zwischen Server und Client hergestellt werden muss.

Um dieses Beispiel auf eurem eigenen Webspace nachzuvollziehen brauch ihr den kommentieren PHP Code, XAJAX, Scriptaculous und Prototoype.