Mit der grossflächigen Verbreitung des Internet haben Web-basierte Anwendungen erhebliche Fortschritte gemacht. Online-Banking zum Beispiel ist heute selbstverständlich. Trotz hervorragender Eigenschaften wie Standortunabhängigkeit und geringer Systemanforderungen auf Client-Seite konnten Web-Anwendungen konventionell konstruierte Softwarepakete, zum Beispiel Office, bisher nicht verdrängen. Dies könnte sich mit der Verbreitung von AJAX ändern, da sich damit die Benutzerfreundlichkeit von Web-Applikationen erheblich steigern lässt.
Web-Anwendungen reagieren meist nur langsam und bieten eingeschränkte Interaktivität. Auf einen Klick mit der Maus folgt in der Regel eine längere Pause, weil die ganze Seite neu geladen wird. AJAX hat das Potential, dieses und einige weitere Probleme mit Web-Anwendungen zu lösen. Die Abkürzung AJAX steht für «asynchronous JavaScript and XML», AJAX kombiniert somit verschiedene bestehende Web-Technologien und ist vom Prinzip her seit Jahren möglich. Populär wurde die Programmiertechnik aber erst in letzter Zeit. In einer konventionellen Web-Anwendung fordert der Client eine Seite mit dem HTTP-Befehl GET vom Server an. Der Webserver holt die benötigten Daten vom Datenbankserver und liefert sie, meist kombiniert mit statischen Elementen, in Form einer vollständigen HTML-Seite an den Browser zurück. Der gesamte Ablauf wiederholt sich jedesmal, wenn der User eine neue Eingabe vornimmt.
Eine Web-Anwendung, die mit AJAX-Technik arbeitet, wickelt einen Teil der Funktionalität auf Client-Seite ab und kommuniziert mehrstufig mit dem Webserver. Vereinfacht dargestellt läuft ein AJAX-Call wie folgt ab:
1. Client
• Der Benutzer gibt in einem Eingabefeld ein Zeichen ein.
• Das Eingabefeld ruft über ein JavaScript-Ereignis (Maus-Klick) eine AJAX-Funktion auf. Diese sendet den Inhalt des Eingabefelds direkt an den Server (über HTTP mit GET).
• Gleichzeitig wird eine Java–Script-Hilfsfunktion erzeugt, welche die Antwort des Servers entgegennehmen und die Daten für die Anzeige im Browser aufbereiten kann.
2. Server
• Der Server wertet die gelieferten Daten aus und führt bei Bedarf eine Datenbankabfrage durch.
• Er liefert rohe, unformatierte Daten an den Client zurück, zum Beispiel eine Liste mit den Ergebnissen der Datenbankabfrage.
3. Client
• Die vorgängig generierte Hilfsfunktion setzt die zurückgelieferten Daten in das Browserobjekt ein, und sie erscheinen am passenden Platz im Browserfenser.
• Der ganze Rest des Fensterinhalts bleibt unverändert; er muss somit auch nicht jedesmal vom Server übermittelt werden.
AJAX eignet sich überall dort, wo eine hohe Interaktivität gefragt ist. Eigentlich kann jedes Objekt im Browser eine Serveraktion auslösen: Mit assoziativen Listen kann dem Benutzer zum Beispiel bereits während des Eintippens eines Suchbegriffs eine kontextabhängige Auswahl möglicher Eingaben in Listenform angeboten werden.
AJAX kann auch die Dateneingabe auf Online-Formularen erheblich erleichtern: Sobald ein Feld ausgefüllt ist, wird es sofort abgespeichert. Dies hilft, den Verlust eingegebener Daten zu vermeiden – typisches Negativbeispiel sind die Bestellformulare vieler Online-Shops, die nach einer Fehleingabe nochmals von Anfang an neu ausgefüllt werden müsssen.
Die Anzeige der Eigenschaften von Bildschirmobjekten lässt sich mit AJAX verbessern, indem die Eigenschaftsdaten erst beim Aufruf geladen werden: Wenn der Mauszeiger über einem Element schwebt (das «hover»-Ereignis), zeigt der Browser üblicherweise eine einzeilige Zusatzinformation an (das «title»-Attribut des Elements). Mit AJAX lässt sich diese Information auf mehrere Zeilen erweitern; es können sogar beliebige, formatierte Text- und Bildinformationen angezeigt werden.
Von AJAX können aber auch statische Webseiten profitieren: Die Technik ermöglicht es, versteckte Informationen wie Dropdown-Listen erst bei Bedarf zu übertragen, zum Beispiel wenn der Benutzer die Liste anklickt. Damit wird der Übermittlungsvorgang signifikant beschleunigt.
Im Prinzip ist es sogar möglich, mit AJAX komplette Anwendungen zu erstellen, zum Beispiel eine ausgewachsene Tabellenkalkulation – jedes Tabellenelement würde dann sofort nach einer Eingabe vom Server neu berechnet.
Der wichtigste HTTP-Befehl für AJAX
Da die Programmierung mit
AJAX-Technik vollständig im Kontext des Browsers erfolgt,
sind die Server nicht direkt betroffen. Trotzdem gilt es einiges
zu berücksichtigen.
•
JavaScript-Verteilung: Die auf dem Client benötigten Programme müssen in geeigneter Form vom Server geliefert werden.
Bei umfangreichen Anwendungen ist es ratsam, die Clientprogramme zu gruppieren und nur bei Bedarf zu übermitteln. Die Kommunikation wird dadurch entlastet.
•
AJAX-Antworten: AJAX-Anfragen müssen vom Server anders beantwortet werden als herkömmliche HTTP-Requests. Die Header-Informationen können entfallen, es muss lediglich ein einfacher Textwert oder eine kurze HTML-Sequenz geliefert werden. Der Server muss deswegen zwischen normalen GET- und POST-Anfragen und AJAX-Anfragen unterscheiden können. Der Einsatz eines separaten Programms zur korrekten Abwicklung der verschiedenen Anfragen (Get-Broker) ist dabei hilfreich.
Der Einsatz der AJAX-Programmiertechnik bringt auch Probleme mit sich. Bereits ohne AJAX ist die Komplexität in einer Client-Server-Umgebung erheblich: Es muss in der Regel gleichzeitig auf Client und auf Server programmiert werden. Meist sind dabei viele Programmiersprachen im Einsatz: Der Datenbankserver versteht SQL, auf dem Webserver kommen Sprachen wie PHP, Perl und Java auf unterschiedlichen Plattformen wie J2EE oder .Net zum Einsatz, die Darstellung auf dem Client wird per HTML und CSS definiert. Beim Einsatz von AJAX wird auch noch auf dem Client programmiert – der Entwickler muss sich zusätzlich mit Konzepten wie DOM, XML und JavaScript befassen.
Obwohl beim Einsatz von AJAX die Kommunikation meist schlank gehalten werden kann, entstehen Verzögerungen und Laufzeiteffekte. Unangenehm wirkt sich aus, dass die verfügbare Bandbreite sehr stark variieren kann. Bei der Definition von AJAX-Projekten ist es deswegen ratsam, die Rahmenbedingungen bezüglich minimaler Bandbreite zu definieren. In einer komplexen Anwendung können mehrere AJAX-Objekte gleichzeitig auf dem Bildschirm «liegen». Der Benutzer kann schnell hintereinander verschiedene AJAX-Ereignisse auslösen, welche dann gleichzeitig ablaufen. Diesem Umstand muss bei der Programmierung Rechnung getragen werden: Verschiedene Ereignisse sollten unabhängig voneinander ablauffähig sein.
AJAX eröffnet die Möglichkeit, Web-Anwendungen benutzerfreundlicher zu gestalten. Dieser Umstand wird zusammen mit der stetig steigenden Bandbreite helfen, dass sich Web-Anwendungen schneller auf dem Markt verbreiten. Namhafte Player, zum Beispiel Google, haben bereits erheblich in AJAX investiert. Die Open-Source-Groupwaresuite Zimbra setzt durchgängig auf AJAX und gilt als Musterbeispiel für den Einsatz der Technik.
Die Integration von AJAX in Entwicklungsplattformen dagegen ist eben erst angelaufen (siehe dazu unsere separate Marktübersicht auf Seite 34). Sind leistungsfähige Plattformen verfügbar, wird dies der AJAX-Technik weiteren Schub verleihen.
Es lohnt sich für Systementwickler, AJAX im Auge zu behalten. Hat sich die Programmiertechnik erst mal etabliert, wird dem Benutzer ein breiteres und besseres Angebot an Web-Anwendungen zur Verfügung stehen.
•
Intra ProCASH: Die Intranet Demo-Plattform http://intra.procash.ch setzt viele AJAX-Objekte ein. In der Kontaktverwaltung zum Beispiel erzeugt der Suchbegriff bei jeder Zeicheneingabe automatisch Vorschläge in Listenform. Die Detailinformationen der Kontakte werden mittels eines AJAX-Fensters dynamisch angezeigt. Da
AJAX eine Browser-Technik ist, lässt sich der Quellcode meist offen von jeder AJAX-betriebenen Seite herunterladen und für eigene Projekte umnutzen. Der Autor stellt unter www.prologon.ch/
AJAX zahlreiche Anwendungsbeispiele samt Source-Code zur Verfügung.
•
Google: Bei Anwendung von Google gibt man mehrere Suchbegriffe ein und klickt auf Suchen. Google wertet die Eingabe aus und listet die Fundstellen auf. Eigentlich könnte aber bereits während der Eingabe gesucht und dem Benutzer eine Hilfe angeboten werden.
Mit Suggest (www.google.com/webhp?complete=1&hl=en) hat Google eine AJAX-Pilotanwendung implementiert: Suggest wertet jede Eingabe eines Buchstabens aus und bietet dem User eine Liste von Vorschlägen an.
Markus Feier ist Geschäftsführer der Prologon (www.prologon.ch) und stellt in dieser Eigenschaft Web-Anwendungen her. Er unterrichtet die Fächer Betriebssysteme und Datenbanktechnik an einer höheren Fachschule.
