Ajax — Grundlagen und Funktionsweise

HMD 255 37

Andy Bosch

Ajax – Grundlagen und Funktionsweise

Ajax – kaum ein anderes Wort hat in der Soft-warewelt für mehr Hype und Wirbel in den letz-ten Monaten gesorgt als diese vier Buchstaben.Man könnte fast meinen, mit Ajax werden alleProbleme und Schwierigkeiten, die heutige Web-Anwendungen haben, auf einen Schlag beseitigt.Doch wenn man sich das Thema Ajax einmaletwas genauer anschaut, stellt man fest, dasses technologisch eigentlich nichts Spektakuläresoder Neues ist. Die Technologie, die hinter Ajaxsteht, gibt es schon seit vielen Jahren. Doch wiefunktioniert Ajax aus technischer Sicht? Und wasbringt Ajax für Vorteile? Genau diesen Fragenwird der folgende Beitrag nachgehen.

Inhaltsübersicht1 Einführung in Ajax

1.1 Was ist überhaupt »Ajax«?1.2 Entstehungsgeschichte von Ajax1.3 Der Paradigmenwechsel

2 Die Technik dahinter2.1 Das XMLHttpRequest-Objekt2.2 Die Bestandteile von Ajax2.3 Ein Beispiel zur Verdeutlichung

3 Ein Blick in die Praxis3.1 Wie sollte Ajax verwendet werden?3.2 Ajax-Frameworks3.3 Limitierungen bei Einsatz von Ajax

4 Fazit und Ausblick5 Literatur6 Weiterführende Literatur und Links

1 Einführung in Ajax

1.1 Was ist überhaupt »Ajax«?Die ersten Unklarheiten entstehen bereits,wenn über die Aussprache des Wortes dis-kutiert wird. Spricht man es deutsch aus

(ah-jah-ks) oder englisch (äi-tschäks)? Da füreinen schriftlichen Beitrag die Aussprache irre-levant ist, überlasse ich es dem jeweiligen Leser,sich für die deutsche oder englische Aussprachezu entscheiden.

Ajax selbst ist zunächst ein Akronym undsteht für: Asynchronous JavaScript and Xml.Aufgrund dieser Aussagen könnte man schlie-ßen, dass Ajax eine Technologie ist, die asyn-chron betrieben wird und XML als Basis voraus-setzt. Doch dieser Eindruck trügt ein wenig.Sicherlich ist die Asynchronität eine der wesent-lichsten Eigenschaften von Ajax, doch kannAjax durchaus auch synchron und auch ohneXML betrieben werden.

Das Wort Ajax unterliegt keiner Spezifika-tion oder einem allgemeinen Standard, in demdas Wort genau definiert ist. Es ist ein Kunst-wort, das sich mittlerweile in der Softwareweltetabliert hat. Wer dieses Wort »erfunden« hat,ist unklar. Relativ sicher ist jedoch, dass den Be-griff Jesse James Garrett (Mitarbeiter der Agen-tur Adaptive Path) in seinem Artikel »Ajax: ANew Approach to Web Applications« im Jahr2005 [Garrett 2005] maßgeblich geprägt hat. Erbeschreibt in seinem Artikel ein Verfahren, wieDaten einer Webseite asynchron aktualisiertwerden können, ohne dass ein kompletter PageReload stattfinden muss. Technisch basiertediese Lösung auf einer JavaScript-Erweiterungund dem Document Object Model (DOM).

Somit könnte man Ajax (stark vereinfachtausgedrückt) auch als eine Erweiterung derJavaScript-Sprache bezeichnen. Diese Erweite-rung ermöglicht es, asynchrone Aufrufe abzu-setzen und damit Webseiten zu aktualisieren.Dass aufgrund dieser minimalen Erweiterungein riesiger Hype entstanden ist, ist einerseitsdurchaus erstaunlich, andererseits muss man


38 HMD 255

aber auch sehen, welche neuen technischenMöglichkeiten sich dadurch ergeben haben.

1.2 Entstehungsgeschichte von AjaxEinen eindeutigen »Geburtstermin« von Ajaxgibt es nicht. Vielmehr haben sich seit etwa1998 zunehmend Verfahren im Web verbreitet,die es ermöglichten, eine Webseite asynchronzu verändern. Dies bedeutet, dass Bereiche einerWebseite neu aufgebaut werden können, ohnedie komplette Seite neu laden zu müssen. Manspricht hier von Partial Page Rendering im Ge-gensatz zu Full Page Reloads. Das Ganze passier-te zudem noch asynchron, sodass der Anwendernicht auf die Rückantwort des Servers wartenmusste. Vielmehr konnte der Anwender unge-stört in der Web-Anwendung weiterarbeiten.

Um die gewünschte Asynchronität zu er-möglichen, gab es in der Vergangenheit dafürverschiedene Ansätze. So konnte z. B. mithilfeeines Hidden Frame und ausgefeilten Java-Script-Funktionen ebenfalls eine Asynchronitäterreicht werden. Doch haben sich solche Techni-ken nie durchgesetzt, da diese eher als »Pro-grammierer-Hack« galten und nicht als zu-kunftsträchtige Technik. Vielmehr hat sich eineKombination aus verschiedenen (etablierten)Technologien durchgesetzt. Und genau dieseKombination wird unter dem Begriff Ajax zu-sammengefasst. Ajax ist somit eine Zusam-menfassung der Technologien JavaScript, CSS,DOM, XML und XMLHttpRequest. Damit kön-nen in unterschiedlichen Kombinationen dergenannten Technologien unterschiedliche Lö-sungsansätze gefahren werden. Eine wichtigeSäule von Ajax ist mit Sicherheit das XML-HttpRequest-Objekt, das später auch noch ge-nauer erläutert wird. Diese XMLHttpRequest-Technologie ist die eingangs erwähnte Erweite-rung von JavaScript, mit deren Hilfe Asynchroni-tät ermöglicht wurde.

1.3 Der ParadigmenwechselMittels Ajax findet in der Web-Welt zugleichauch ein Paradigmenwechsel statt. Während

Web-Anwendungen bislang als etwas um-ständlich zu bedienen und nicht immer alsintuitiv galten, kann mittels Ajax diesem MankoAbhilfe geschaffen werden. Charakteristisch fürsogenannte Web 1.0-Anwendungen (oder nicht»ajaxifizierte« Web-Anwendungen) sind bzw.waren folgende Einschränkungen:

! Es erfolgte nach einer Benutzeraktion (Klickauf einen Link oder Button) immer einekomplette Seitenaktualisierung (Full PageReload). Das heißt, ein Formular wurde kom-plett zum Server übertragen, dort ausgewer-tet und das Ergebnis in Form einer neuen(HTML-)Seite an den Browser zurückge-schickt. Es wurde immer eine komplette Seitezurückgeschickt, auch wenn sich auf derresultierenden Seite lediglich ein Ausgabe-feld verändert hat.

! Nach einer Benutzeraktion war der Browser»blockiert«, d.h., der Benutzer musste zu-nächst warten, bis ein Request abgearbeitetwar. Erst wenn die Antwort (die Response)zum Browser zurückgesendet wurde, konntewieder eine Eingabe erfolgen.

! Auf Benutzeraktionen wird meist nicht sofortreagiert, sondern erst nach dem Abschickender kompletten Seite. Wenn z. B. in einem For-mular verschiedene Eingabefelder enthaltenwaren, musste der Benutzer erst alle einzel-nen Felder ausfüllen und das komplette For-mular abschicken. Erst dann wurde es aufServerseite validiert und eventuelle Fehler-meldungen (Falscheingaben etc.) zum Brow-ser zurückgeschickt. Eine Validierung von Fel-dern direkt nach der Eingabe war nichtmöglich.

! Die von klassischen Desktop-Anwendungengewohnten Funktionen wie z. B. Drag&Dropsind bzw. waren in einer Web-Umgebungnicht möglich. Um z. B. in einem Shop denWarenkorb zu befüllen, konnte nicht einfachein Artikel per Drag&Drop in den Warenkorb»gezogen« werden, sondern es musste ein»Bestellen-Button« gedrückt werden, der


HMD 255 39

Browser

HTML-Seite

Webserver

Application-Server

Klassisches Modell

einer Web-Anwendung

Modell einer Web-Anwendung

mit Ajax

Http-

Request

Http-

Response

(HTML

+ CSS)

Browser

HTML-Seite

Ajax-Engine

Java

Script-

Call

HTML

+ CSS

Webserver

Application-Server

+ Ajax-Engine

Http-

RequestXML,

HTML

wiederum einen kompletten Page Reloadnach sich zog.

Alle diese Reglementierungen haben in den ver-gangenen Jahren Web- bzw. E-Business-An-wendungen den Beigeschmack gegeben, dassdiese etwas umständlich zu bedienen seien.Zudem seien diese auch nicht so intuitiv ver-wendbar wie Rich-Client oder klassische Desk-top-Anwendungen.

Mittels Ajax erfolgt hier ein Paradigmen-wechsel. Mit Ajax ist es möglich, nur Teile einerWebseite zu aktualisieren. Zudem erfolgt dasGanze auch noch asynchron, ohne dass der Be-nutzer auf die Reaktion des Servers wartenmuss. Ebenso lässt sich mit den Ajax zugrunde-liegenden Technologien Drag&Drop realisie-ren. Abbildung 1 zeigt den Unterschied zwi-schen klassischen und Ajax-Anwendungen. Inder klassischen Welt wird immer ein Requestabgesetzt, als Antwort in Form der Responsewird immer eine komplette Seite zurückgelie-

fert. In einer Ajax-Welt dagegen können inner-halb einer Seite mehrere »kleinere« Requestsabgesetzt werden, die als Antwort auch nurkleinere »XML- oder HTML-Schnipsel« zurücklie-fern. Das sogenannte Flackern, bedingt durchden Komplettaufbau einer Seite, entfällt damit.

In Summe wird damit auch für Web-An-wendungen der gleiche Komfort geboten, denauch Desktop-Anwendungen vorweisen kön-nen. Die Kluft zwischen Desktop- und Web-Anwendungen scheint zu verschwinden, in bei-den Welten kann der gleiche Komfort gebotenwerden.

In Abbildung 2 und 3 ist der Unterscheidzwischen synchroner und asynchroner Verar-beitung dargestellt. Bei der synchronen Ver-arbeitung (ohne Ajax) ist die Anwendungblockiert, solange der Request auf dem Serververarbeitet wird. Erst wenn die Response an denBrowser zurückgeschickt wurde, ist eine Weiter-arbeit möglich. Bei asynchroner Verarbeitung

Abb. 1: Klassisches vs. Ajax-Modell einer Web-Anwendung


40 HMD 255

Client

Server

Zeit

Benutzeraktion

Verarbeitung Verarbeitung

Ajax-

Request

Ajax-

Response

Ajax-

Request

Ajax-Engine

asynchrone

Anfrage

asynchrone

Response

asynchrone

Anfrage

asynchrone

Response

Ajax-

Response

Client

Server

Zeit

Benutzeraktion

Verarbeitung

Benutzeraktion

Verarbeitung

Request Response Request

ist die Anwendung nicht blockiert, ein Benutzerkann ohne Unterbrechung weiterarbeiten. So-bald die Response vom Server eintrifft, wird dasErgebnis in die laufende Anwendung eingear-beitet.

2 Die Technik dahinter

2.1 Das XMLHttpRequest-ObjektDie gesamte Technologie hinter Ajax lässt sichvorwiegend auf ein Objekt zurückführen: dasXMLHttpRequest-Objekt. Das XMLHttpRequest-Objekt wurde ursprünglich von Microsoft ent-wickelt und war bis zum Internet Explorer 6 nurüber ein ActiveX-Control ansprechbar. DiesesObjekt ermöglichte es, asynchrone Aufrufe anden Server abzusetzen.

Eine größere Verbreitung fand das XML-HttpRequest-Objekt, als Google Mail (Gmail),Google Suggest und Google Maps diese Tech-nologie sehr intensiv verwendeten. Googlerealisierte damit sehr ansprechende und fürdie damalige (und zum Teil auch noch die heu-tige) Zeit schon fast revolutionäre Web-Ober-flächen.

In der Folge zogen auch die anderen Brow-ser wie Mozilla, Opera oder Safari nach. ImGegensatz zum Microsoft Internet Explorer un-terstützen diese das XMLHttpRequest-Objektnativ anstatt über ein ActiveX-Control. DerInternet Explorer 7 unterstützt mittlerweile dasXMLHttpRequest-Objekt ebenfalls nativ. Diesbedeutet, dass Ajax auch funktioniert, wennActiveX im Browser deaktiviert ist.

Abb. 2: Request/Response-Verhalten bei einer klassischen Web-Anwendung

Abb. 3: Request/Response-Verhalten bei Einsatz von Ajax


HMD 255 41

Letzten Endes muss aber nochmals explizitdarauf hingewiesen werden, dass das XML-HttpRequest-Objekt nichts anderes als eineJavaScript-Erweiterung ist (bzw. es gibt diesesObjekt z. B. auch in VBScript). Korrekterweisemüsste man auch von einer XMLHttpRequest-Technik sprechen, die u. a. in JavaScript realisiertwurde. Somit ist Ajax nicht lauffähig, wenn derBenutzer im Browser JavaScript deaktiviert hat.Da aber mittlerweile auch viele größere Firmenin ihren Standard-Browsereinstellungen Java-Script erlauben, findet Ajax immer mehr Ver-breitung.

2.2 Die Bestandteile von AjaxDas XMLHttpRequest-Objekt ist ein zentralesElement von Ajax. Es existiert zudem noch eineReihe von weiteren Technologien, die unter die-sem Namen zusammengefasst werden und mitdenen Ajax erst möglich wurde:

! JavaScript: Skriptsprache für HTML-Seiten imBrowser

! DOM: API zum Zugriff auf ein strukturiertesDokument

! CSS: Style-Angaben für HTML-Elemente! XML: Aufbauformat für Dokumente

Wie bereits erwähnt, ist Ajax ein reines Kunst-wort, das keine spezielle Technologie be-

schreibt. Vielmehr werden die genanntenTechnologien unter dem Deckmantel Ajax zu-sammengefasst. Der Begriff Ajax ist jedochmittlerweile etabliert: Fachbücher und Facharti-kel verwenden durchgängig diesen Begriff.Natürlich existiert auch in der Online-Enzyklo-pädie Wikipedia ein entsprechender Eintrag.

2.3 Ein Beispiel zur VerdeutlichungGrau ist alle Theorie. Deshalb wird im Folgen-den eine kleine Ajax-Anwendung realisiert. DerFokus in dem folgenden Beispiel liegt dabei aufder Clientseite, sprich auf dem, was im Browserpassiert. Natürlich braucht es für eine vollstän-dige Anwendung auch noch einen Gegenpartauf Serverseite. Der serverseitige Part könntez. B. mittels Java (Java-Servlets), PHP, C# odereines Perl-Skriptes realisiert sein. Im folgendenBeispiel wird die Serverseite mit einem Java-Servlet realisiert.

Die folgende Ajax-Anwendung soll nach derEingabe einer Bankleitzahl den Namen derBank »on-the-fly« ausgeben. Das heißt, sofortnachdem ein Benutzer in einem Formular eineBankleitzahl eingetippt hat, soll der Name derBank ausgegeben werden, ohne dass das For-mular komplett abgeschickt werden muss.

Abbildung 4 zeigt zunächst ein einfachesFormular. Nun soll bei Eingabe einer Bankleit-

Abb. 4: Beispielanwendung zur Banknamen-Ermittlung


42 HMD 255

zahl immer geprüft werden, ob es zur eingege-benen Zahl bereits einen Banknamen gibt. Folg-lich muss nach jedem Tastendruck eine Anfragevom Client (Browser) an den Server abgesetzt

werden. Daher wird zunächst im HTML-Codeder Seite an das Eingabefeld ein Listener an-gehängt:

Im ersten Eingabefeld wird über das Attributonkeyup eine JavaScript-Funktion angegeben,die nach jedem Tastendruck angesprochenwird. In der Methode muss nun ein Aufruf an

den Server erfolgen und ggf. der Rückgabewert(der Bankname) in das vorhandene Formulareingetragen werden. Der Rumpf der JavaScript-Methode sieht wie folgt aus:

Um einen asynchronen Aufruf abzusetzen, ver-wenden wir das dazu notwendige XMLHttp-Request-Objekt. Dieses wird zunächst wie folgtinstanziiert:http_request = new XMLHttpRequest();

Die aktuell eingetragene Bankleitzahl wird alsRequest-Parameter an den Serveraufruf an-gehängt. Komplett sieht die Methode nun wiein Listing 3 aus.

Mit Sicherheit könnte die Methode dahin-gehend noch optimiert werden, dass erst bei ei-ner Mindesteingabelänge ein Request abge-setzt wird. Dies wird jedoch in diesem Beispielnicht berücksichtigt. Da wir hier von asynchro-ner Verarbeitung reden, wird der Request abge-setzt, und die Programmverarbeitung geht wei-ter. Wenn dann die Anfrage vom Server zurück-

kommt, muss dazu auf Clientseite ebenfallseine Methode bereitstehen (eine sogenannteCallback-Methode). In dieser Methode muss dieAntwort des Servers ausgewertet und ggf. dieSeite in bestimmten Bereichen verändert wer-den (dies ist dann das bereits erläuterte PartialPage Rendering). In unserem Beispiel wird überden Befehl

http_request.onreadystatechange = showResponse;

der Name der Callback-Methode auf show-Response gesetzt. Dies bedeutet, dass die Me-thode makeRequest abgearbeitet und derRequest abgesetzt wird. Dann kann sofort dieArbeit in der Seite weitergehen, der Browser istnicht geblockt.

<form id="inputForm"> Bitte geben Sie eine Bankleitzahl ein: <input type="text" value="" onkeyup="makeRequest();" id="field" />

<br/><br/> Ergebnis: <input type="text" value="" id="ausgabefeld" />

<form>

function makeRequest() { curBLZ = document.forms[0].elements[0].value // hier muss der Aufruf an den Server erfolgen ...}

Listing 1: HTML-Formular mit JavaScript-Aufruf

Listing 2: Methodenrumpf für einen Ajax-Aufruf


HMD 255 43

In der URL des Ajax-Aufrufes wird ein Java-Servlet adressiert, das für die Verarbeitung des

Requests zuständig ist. In Listing 4 ist diesesServlet abgebildet.

Listing 4: Java-Servlet

public class BLZServlet extends HttpServlet { ...

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter();

String param = request.getParameter("blz"); String result = "?";

// An dieser Stelle würde ein Datenbankzugriff oder // ein Zugriff auf die Business-Schicht erfolgen, die // zur BLZ den Banknamen zurückliefert. result = "Kreissparkasse Waiblingen";

// Dokument aufbauen out.println("<?xml version=\"1.0\" ?><root>" + result + "</root>"); }}

function makeRequest() {

curBLZ = document.forms[0].elements[0].value http_request = false;

http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); }

http_request.onreadystatechange = showResponse;

url = "http://localhost:8080/HMDAjax/BLZServlet" + "?blz=" + curBLZ; http_request.open( 'GET', url, true ); http_request.send( null );}

Listing 3: Vollständige Methode für einen Ajax-Aufruf


44 HMD 255

Im Java-Servlet wird zunächst die angefragteBLZ über den Request-Parameter ausgelesen.Daraufhin würde eine Funktionalität notwen-dig sein, die den Banknamen zur übergebenenBLZ ermittelt (im Beispiel nicht ausprogram-miert). Die Antwort wird dann in ein kurzes

XML-Dokument gepackt und an den Client zu-rückgeschickt. Sobald die Response im Browserzurückkommt, wird die showResponse-Metho-de aufgerufen (im JavaScript-Block in der HTML-Seite).

Zunächst wird über den Status abgefragt, obdie Anfrage an den Server erfolgreich war. Istdies der Fall, kann das empfangene XML-Doku-ment geparst und der Bankname aus der Re-sponse ausgelesen werden. Anschließend wirdüber den DOM-Pfad der Bankname in die beste-hende HTML-Seite eingetragen. Das war dannauch schon alles! Das ist Ajax!

3 Ein Blick in die Praxis

3.1 Wie sollte Ajax verwendet werden?Das Beispiel der Banknamen-Ermittlung zeigteines sehr deutlich: Mit Ajax lassen sich (für dieWeb-Welt) beeindruckende Ergebnisse erzielen,die bislang so nicht möglich waren. Allerdingsist der Arbeitsaufwand relativ hoch. Es müssenJavaScript-Funktionen geschrieben werden so-wie serverseitige Komponenten (z. B. Servletsoder PHP-Funktionen), und der Testaufwand istauch nicht zu unterschätzen. Zudem hat unserBeispiel ein großes Manko: Es läuft noch nichtin allen Browsern. Um das Beispiel in allenBrowsern lauffähig zu machen, müsste nocheiniges an JavaScript-Code programmiert wer-

den. Denn das XMLHttpRequest-Objekt kannnicht in jedem Browser wie in diesem Beispielgezeigt instanziiert werden. Korrekterweisemüsste dies wie in Listing 6 geschehen.

Spätestens beim Anblick von Listing 6 solltejeder Programmierer merken, dass dieser An-satz nicht optimal ist. Es wird jede Menge Java-Script-Code erzeugt, der sehr aufwendig in derWartung ist (Anpassungen an neue Browser-versionen etc.) und zudem auch in jedem Pro-jekt ähnlich bis gleich ist. Daher sollte der Weg,Ajax »von Hand« zu entwickeln, möglichst ge-mieden werden. Vielmehr empfiehlt es sich, aufbestehende Frameworks zuzugreifen. SolcheAjax-Frameworks bieten eine Menge Komfort,indem Ajax-Aufrufe bereits gekapselt sind undfür verschiedene Browserversionen automa-tisch korrekt angewendet werden. Zudem sindsolche Frameworks im Allgemeinen bereits sehrgut getestet und mittlerweile auch schon sehrausgereift.

Der Vorteil bei Einsatz von Ajax-Frameworksist offensichtlich: Der Entwickler muss sichnicht mit allen Details der Ajax-Entwicklung be-schäftigen, er kann ein »höheres« API verwen-

function showResponse() { if (http_request.readyState == 4) { if (http_request.status == 200) { var xmldoc = http_request.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); document.forms[0].elements[1].value = root_node.firstChild.nodeValue; } else { alert('Bei dem Request ist ein Problem aufgetreten.'); } }}

Listing 5: Callback-Methode


HMD 255 45

den, um in den Genuss der Ajax-Funktionalitä-ten zu kommen. Zudem erhöht sich dadurch dieEntwicklungsgeschwindigkeit, da man auf vor-handenes Wissen und vorhandene Routinenaufsetzen kann.

3.2 Ajax-FrameworksÜber eine Google-Suche nach Ajax-Frameworksbekommt man mittlerweile eine riesige Ergeb-nismenge zurückgeliefert. Sieht man sich vielesogenannte Ajax-Frameworks näher an, stelltman schnell fest, dass es genau betrachtet vor-wiegend JavaScript-Frameworks sind. Diese bie-ten nur zusätzlich noch eine Unterstützung vonAjax. Des Weiteren muss unterschieden wer-den, ob ein Framework lediglich die Clientseitevereinfacht oder zugleich Funktionen für dieServerseite bereitstellt. Während clientseitigeAjax-Frameworks noch weitgehend program-miersprachenneutral sein können (bezogen aufdie serverseitige Programmierung), ist bei Fra-meworks, die auch die Serverseite abdecken,eine Spezialisierung auf eine Programmierspra-che notwendig. Daher werden im Folgendenexemplarisch allgemeine (clientseitige) undserverseitige Ajax-Frameworks dargestellt.

Allgemeine Ajax-Frameworks

DojoEins der bekanntesten Frameworks ist Dojo[Seemann 2007]. Dojo ist zunächst ein sehrmächtiges JavaScript-Framework, das u. a. Ajaxunterstützt. Dojo wird über die Dojo-Founda-tion unterstützt, der u. a. IBM und AOL angehö-ren. Daran zeigt sich schon, dass Dojo eines derwichtigeren Frameworks auf dem Markt ist.Dojo selbst ist Open Source.

Script.aculo.usEbenfalls ein sehr bekannter Vertreter der Ajax-Frameworks ist Script.aculo.us. Allerdings han-delt es sich hierbei eher um eine Effektenbiblio-thek als um ein Ajax-Framework. Bekannt ist esvorwiegend aufgrund der vielfältigen Effekte,die diese Bibliothek anbietet. So können z. B.einzelne Elemente in eine Seite eingeblendetwerden (mit Fade-in-Effekten oder Roll-over-Effekten), und es gibt eine Unterstützung fürDrag&Drop. Ein Teil des Frameworks beziehtsich dann auf Ajax.

Diese Aufzählung ließe sich beliebig fort-setzen. Fast täglich kommen neue Frameworkshinzu. Vor einem Einsatz eines Frameworks soll-

// Für native Unterstützung // (Mozilla, Opera, Safari, IE 7if (typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest();} else { // dann über ActiveX (IE 6 und früher) try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlHttp = null; } }}

Listing 6: Korrekte Instanziierung des XMLHttpRequest-Objektes


46 HMD 255

te daher zunächst gründlich geprüft und getes-tet werden, ob die projektspezifischen Anforde-rungen damit abgedeckt werden können.

Programmiersprachenspezifische Ajax-FrameworksAjax dient vorwiegend dazu, asynchron Funk-tionalität auf dem Server aufzurufen. In denvorhergehenden Erklärungen und Beispielenwurde jedoch primär die Clientseite demon-striert. Ajax passiert natürlich vorwiegend aufder Clientseite. Dennoch wird ein Part auf Ser-verseite benötigt, der den Request entgegen-nimmt und eine Antwort zurücksendet. Die Ser-verseite kann in unterschiedlichen Technolo-gien umgesetzt sein. Ein Ajax-Aufruf kann z. B.mittels

! CGI-Skript,! Java-Servlet,! PHP-Funktion,! VB-Routineserverseitig verarbeitet werden. Um diese ser-verseitigen Aufrufe ebenfalls zu vereinfachen,gibt es eine Reihe von Frameworks, die vordefi-nierte Schnittstellen anbieten und so eine ser-verseitige Routine sehr einfach ansprechen undauslösen können. Es würde den Rahmen diesesBeitrages bei Weitem sprengen, ein Beispiel fürjede Technologie/Programmiersprache aufzu-zeigen. Daher werde ich mich im Folgenden aufdie Sprache Java beschränken.

DWRDWR (Direct Web Remoting) ist ein reines Ajax-Framework. Wie beschrieben sind die meistensogenannten Ajax-Frameworks eher JavaScript-Frameworks, die mitunter auch Ajax anbieten.Mit DWR existiert jedoch ein Open-Source-Fra-mework, das sich ausschließlich auf den Einsatzvon Ajax spezialisiert hat. DWR deckt dabei so-wohl die Clientseite wie auch die Serverseite ab.Clientseitig werden natürlich wieder entspre-chende JavaScript-Funktionen angeboten, dieServerseite wird mithilfe von Java-Routinen um-gesetzt. Technisch gesehen ist DWR serverseitig

ein Java-Servlet, das unterschiedlichste weitereJava-Klassen (statische Klassen, Enterprise JavaBeans etc.) aufrufen kann.

DWR baut eine Infrastruktur auf, mit der einAnwendungsentwickler sehr leicht asynchronFunktionen aus dem Client heraus auf dem Ser-ver aufrufen und das Ergebnis in der Webseiteverarbeiten kann.

Ajax4JsfAjax4Jsf ist ebenfalls ein Open-Source-Frame-work [Jacobi & Fallows 2006]. Auch diesesFramework deckt die Client- und die Serverseiteab. Ajax4Jsf basiert auf der Technologie JSF(JavaServer Faces). JavaServer Faces ist ein UI-Framework, das Teil der Java Enterprise Edition(ab Version 5) ist. Der Vorteil bei Einsatz vonAjax4Jsf ist, dass keinerlei JavaScript mehr vomEntwickler programmiert werden muss. MittelsJSF werden dynamische Webseiten (JSP-Seiten)durch sogenannte Tags beschrieben, die letztenEndes als HTML gerendert werden. Diesen Tagskann bei Einsatz von Ajax4Jsf zusätzliche Funk-tionalität mitgegeben werden, z. B. dass eineFunktion asynchron ausgeführt oder der Be-reich einer Webseite neu gerendert wird.

Meiner Meinung nach ist dieser Weg sehrzukunftsweisend. Man muss das Rad nicht je-des Mal neu erfinden und sich mit den Detailsvon Ajax und JavaScript auseinandersetzen.Man verwendet vielmehr Frameworks, die dengesamten Ajax-Overhead kapseln und eine sehreinfache Schnittstelle nach außen anbieten. BeiEinsatz von JSF geht die Kapselung bereits soweit, dass komplette Komponenten (z. B. Ein-gabefelder oder Buttons) eingesetzt werden,die intern dann auf Ajax-Funktionalität zugrei-fen können.

3.3 Limitierungen bei Einsatz von Ajax

Beim Einsatz von Ajax stößt man jedoch sehrschnell auch an Grenzen, an denen erkanntwird, dass Browser und HTML für Ajax ur-sprünglich nicht bestimmt waren. Eine Voraus-setzung, damit Ajax funktionieren kann, ist


HMD 255 47

logischerweise JavaScript. Es gibt immer nochgenügend Firmen und Personen, die standard-mäßig JavaScript deaktiviert haben. Aber ohneJavaScript gibt es kein Ajax. Unterstellt maneinmal, dass JavaScript aktiviert ist, existierendennoch weitere bekannte Probleme:

! Setzen von Bookmarks! Verwendung des Browser-Back-Buttons

(History-Funktion)

Bei Bookmarks liegt das Problem daran, dassBrowser die Bookmarks aufgrund der Adressesetzen, die in der Adresszeile angezeigt wird (diesogenannte URL). Bei Verwendung von Ajaxwird jedoch die Adresse nicht verändert. Es wirdzwar der Seiteninhalt aktualisiert, jedoch bleibtdie angezeigte URL immer dieselbe. Dies fällt inunserem einfachen Beispiel mit der Bankleit-zahl nicht sonderlich auf, in komplexeren An-wendungen ist dies jedoch sehr offensichtlich.Ajax verändert lediglich den DOM-Baum, alsoden Seiteninhalt, ohne die Adresszeile zu ver-ändern. Ein Setzen von Bookmarks ist somitnur auf die Startseite möglich, da alle weite-ren »Navigationen« per Ajax nicht erkannt wer-den.

Das zweite genannte Problem (Browser-Back-Button) hat dieselben Ursachen wie dasBookmark-Problem. Ein Anwender kann langein einer Ajax-Anwendung arbeiten. Drückt erdann jedoch einmal den Browser-Back-Button,landet er nicht wie erwartet einen Arbeits-schritt zurück, sondern auf der letzten URL, dieer besuchte. Das kann mitunter eine komplettandere Adresse sein. Grund ist auch hier, dassdie History, die sich ein Browser merkt (die dannüber die Back- und Forward-Buttons verwendetwird), auf der URL aufbaut. Da aber bei einerkomplett »ajaxifizierten« Anwendung dieAdresse nie ausgetauscht wird, wird auch keineHistory geschrieben.

LösungsansätzeUm die geschilderten Probleme oder Limitie-rungen in den Griff zu bekommen, haben die

verschiedenen (Ajax-)Frameworks unterschied-liche Lösungsansätze implementiert. Es darf je-doch nicht verschwiegen werden, dass dieseunterschiedlichen Lösungsansätze oftmals ein»Hack« sind. Eine technisch korrekte und ein-wandfreie Lösung ist nur sehr schwer zu reali-sieren. Interessant in diesem Zusammenhangist auch das Framework »Really Simple History«[Neuberg 2005], das ebenfalls einen sehr be-merkenswerten Lösungsansatz aufweist.

4 Fazit und Ausblick

Ajax wird zu Recht als einer der Eckpfeiler vonWeb 2.0 bezeichnet. Mit Ajax haben sich Mög-lichkeiten aufgetan, mit denen auch Browser-anwendungen reichhaltig und intuitiv gestaltetwerden können. Das große Manko, das Wartenauf die Antwort des Servers, das bislang oftmalsgegen die Umsetzung einer Anwendung alsWeb-Anwendung gesprochen hat, wurde besei-tigt. Zwar muss zugegeben werde, dass sich diegesamte Ajax-Entwicklung noch in den Anfän-gen befindet, aber mit den Möglichkeiten, diees heute schon gibt, lassen sich bereits sehrgute Ergebnisse erzielen.

Allerdings darf nicht verschwiegen werden,dass es auch eine Kehrseite der Medaille gibt.Mit Ajax kommt für die Softwareentwicklungeine weitere Dimension hinzu. Entwickler müs-sen sich mit einer weiteren Technologie be-schäftigen, was die Komplexität von Software-projekten erhöhen wird. Auch der Testaufwandfür Softwareprodukte muss bedacht werden,denn es müssen alle Funktionen, die »ajaxifi-ziert« sind, mit unterschiedlichen Browsern aufunterschiedlichen Betriebssystemen getestetwerden. Gegebenfalls ist auch eine Variante inder Software vorzusehen, die es ermöglicht,dass die Anwendung auch ohne JavaScript (alsoauch ohne Ajax) bedient werden kann. Zugege-ben, mit einem intelligenten Einsatz von Ajax-Frameworks kann der Entwicklungs- und Pfle-geaufwand minimiert werden, dennoch wirdbei einer Entscheidung für den Einsatz der Ajax-


48 HMD 255

Technologie ein Projekt nicht unbedingt kosten-günstiger in der Entwicklung.

Wenn man jedoch die Möglichkeiten be-trachtet, die einem der Einsatz von Ajax bringt,kann eine Kosten-Nutzen-Betrachtung durch-aus sehr positiv für den Einsatz von Ajax spre-chen. Und wenn ein Anwender erst einmal ge-sehen hat, welche Möglichkeiten ihm durchAjax eröffnet werden, möchte er diese Möglich-keiten nicht mehr missen.

5 Literatur[Garrett 2005] Garrett, J. J.: Ajax: A New Approach

to Web Applications, Adaptive Path LLC, 18. Feb-ruar 2005, http://adaptivepath.com/publications/essays/archives/000385.php.

[Jacobi & Fallows 2006] Jacobi, J.; Fallows, J. R.: JSFund Ajax. Rich Internet Komponenten entwi-ckeln mit JavaServer Faces und Ajax. Mitp-Ver-lag, 2006, ISBN 382661691X.

[Neuberg 2005] Neuberg, B.: AJAX: How to handlebookmarks and back buttons, 2005, www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html?page=1.

[Seemann 2007] Seemann, M.: Dojo Toolkit –schnell + kompakt. entwickler.press, 2007, ISBN3939084492.

6 Weiterführende Literatur und LinksKoch, S.: JavaScript – Einführung, Programmierung

und Referenz – inkl. Ajax. 4. Aufl., dpunkt.ver-lag; Heidelberg, 2006, ISBN 3898643956.

Mintert, S.; Leisegang, C.: Ajax – Grundlagen, Fra-meworks und Praxislösungen. dpunkt.verlag,Heidelberg, 2006, ISBN 3898644049.

Steyer, R.: AJAX mit Java-Servlets und JSP. So brin-gen Sie Speed in Ihre Webpräsenz. Addison-Wesley, 2007, ISBN-10: 3827324181.

Wenz, C.: AJAX – schnell + kompakt. entwickler.press, 2006, ISBN 3935042922.

Ajax-Framework DWR, http://getahead.ltd.uk/dwr/.Ajax-Framework für JavaServer Faces, https://ajax

4jsf.dev.java.net/.Dojo-Framework, http://dojotoolkit.org/.JavaServer Faces-Technologie, http://java.sun.com/

javaee/javaserverfaces/.

Dipl.-Betriebswirt (BA) Andy BoschBytes2Business GmbHWankelstr. 1470563 [email protected]

Documents

Ajax — Grundlagen und Funktionsweise