Wie schon oft in der Geschichte der Programmierung werden neue und interessant klingende Konzepte von der Entwicklergemeinde schnell aufgenommen und umgesetzt. Oft bleibt hierbei jedoch die Wiederverwendbarkeit und Portabilität des so entstandenen Quellcodes auf der Strecke, da solch neue Konzepte anfänglich meist nur in einer eng eingegrenzten Gruppe von Systemen oder Programmen eingesetzt werden können. Setzt sich die Idee dann später endgültig durch und breitet sich weiter aus, so wird die Implementierung, meist aus Mangel an feststehenden Standards, immer wieder anders durchgeführt. Dies führt auf lange Sicht zu vielen verschiedenen Entwicklungszweigen, die miteinander inkompatibel sind, was somit die Portabilität der einzelnen Anwendungen stark einschränkt.

Klassische Programmierung mit AJAX

Auch AJAX blieb von dieser Entwicklung nicht verschont. Die erste Implementierung eines AJAX-artigen Konzepts zur asynchronen Kommunikation mit einem Webserver, damals noch nicht unter dem Namen AJAX, wurde von Microsoft im Internet Explorer 4.0 umgesetzt. Das hierfür entwickelte XMLHttpRequest-Objekt, die Basiskomponente der Serverkommunikation, wurde  unter ActiveX realisiert. Als später auch in der Mozilla-Familie eine XMLHttpRequest-Implementierung Einzug hielt, wurde ein eigenständiges JavaScript-Objekt geschaffen, das zwar zur Microsoft-Variante kompatibel ist, aber anders instanziiert werden muss. Listing 1 zeigt, wie ein Programmierer vorgehen musste, um ein XMLHttpRequest-Objekt browserunabhängig innerhalb der eigenen Webseite zu initialisieren. Im gezeigten Beispiel soll dargestellt werden, wie durch das Betätigen eines Buttons die Funktion createRequest() aufgerufen wird, der als erster Parameter der URL eines aufzurufenden Dienstes übergeben wird. Zur Behandlung der Antwort des Servers wird die Funktion handleResponse() genutzt, die am XMLHttpRequest-Objekt als Callbackfunktion registriert wird.

1. Listing 1
2. -----------------------------------------------------------------
3. function createRequest(url) {
4. var httpRequest = false;
5. // Browser prüfen
6. if (window.XMLHttpRequest) {
7. httpRequest = new XMLHttpRequest();
8. }
9. else if (window.ActiveXObject) {
10. try {
11. httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
12. }
13. catch (e) {
14. httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
15. }
16. }
17. else {
18. alert('Unbekannter Browser, kann XMLHTTPRequest Objekt nicht erstellen!');
19. return false;
20. }
21. httpRequest.onreadystatechange = function() { handleResponse(httpRequest);};
22. httpRequest.open('GET', url, true);
23. httpRequest.send(null};
24. }
26. function handleResponse(httpRequest) {
27. if (httpRequest.readyState == 4) {
28. if (httpRequest.status == 200) {
29. // Verarbeitung der Antwort des Server
30. }
31. }
32. }

Wie man sieht, ergeben sich einige Hürden für den Entwickler. Zunächst muss geprüft werden, welchen Browser der Nutzer einsetzt. Wie bereits erwähnt, implementieren einige Browser das Objekt zur asynchronen Serverkommunikation als natives Objekt XMLHttpRequest, andere wie der Internet Explorer nutzen hierzu jedoch das ActiveX-Objekt Msxml2.XMLHTTP beziehungsweise Microsoft.XMLHTTP. Glücklicherweise zeichnen sich in diesem Bereich Änderungen ab, da Microsoft in der aktuell als Beta verfügbaren Version 7 des Internet Explorers ebenfalls ein natives XMLHttpRequest-Objekt implementiert hat. Neben der Umschiffung der Browserhürden fällt auch der Umfang des Beispiels selbst ins Auge. Für diesen Standardfall eines Aufrufs sind schon einige Zeilen Quellcode erforderlich, bei umfangreichen größeren Projekten kann der Code so schnell sehr groß und unübersichtlich werden.

Der Ruf nach Frameworks, die die Arbeit mit AJAX vereinfachen, wurde laut. Sie sollten die jeweilige XMLHttpRequest-Implementierung des Browsers für den Entwickler ausreichend abstrahieren und die Kommunikation mit dem Server so einfach und kompakt wie möglich gestalten. Idealerweise sollten sie zudem Hilfsfunktionen für den Umgang mit dem Document Object Model (DOM) mitbringen, da die JavaScript-Funktionen der Browser selbst hierfür teilweise etwas limitiert sind. Nach und nach entstanden so, beginnend mit kompakten, auf den reinen Kommunikationsteil von AJAX zugeschnittenen Frameworks, immer umfangreichere Modulsammlungen, die heute die Entwicklung von Webapplikationen deutlich vereinfachen. Sie ermöglichen es, unabhängig von der spezifischen Art der AJAX-Engine browserübergreifend schnell und effizient zu entwickeln.

Framework-Gliederung

Die derzeit verfügbaren Frameworks, von denen zur Zeit der Erstellung dieses Artikels weit über 150 verschiedene existieren, können grob in drei Klassen eingeteilt werden. Da sind zum einen die klassischen JavaScript-Clientframeworks, die sich wiederum in zwei Unterklassen, Basis- und Applikationsframeworks, unterteilen lassen. Die kleinen und kompakten Vertreter der Basisframeworks abstrahieren hierbei lediglich die Unterschiede der asynchronen Kommunikationsobjekte des jeweiligen Browsers und bieten sonst, außer eventuellen erweiterten Funktionen zum Umgang mit DOM, keine weitere Funktionalität. Auf diesen aufbauend bieten die Applikationsframeworks neben den Basisfunktionen weitere Funktionalität zur einfacheren Entwicklung von Applikationen. Hierbei handelt es sich sehr oft um Elemente im Bereich der Oberflächengestaltung von Anwendungen, es werden beispielsweise Objekte für sortierbare Tabellen und Baumansichten bereitgestellt. Innerhalb dieses Artikels soll bei der Darstellung dieser Frameworks jedoch nur auf die DOM- und asynchronen Kommunikationsmodule eingegangen werden, für ausführlichere Beschreibungen der Oberflächenelemente sei auf die speziellen Einzelartikel innerhalb dieses Heftes verwiesen.

Als zweite Klasse neben den Client-frameworks existieren die Serverframeworks, die für die jeweils vom Entwickler genutzte Programmiersprache auf Serverseite Schnittstellen zu den JavaScript-Frameworks im Browser herstellen. Hier sind zurzeit für fast alle großen im Bereich Webprogrammierung eingesetzten Sprachen Implementierungen verfügbar. Als dritte und letzte Klasse existieren die Kombiframeworks, welche sowohl den clientseitigen Teil der JavaScript-Frameworks als auch den entsprechenden Serverteil in sich vereinen. Der Entwickler kann somit Webapplikationen „aus einem Guss“ innerhalb seiner Entwicklungsumgebung erstellen.

Je nach geplantem Einsatzzweck, Umfang der Applikation und der zu nutzenden Programmiersprache kann sich der Entwickler nun das für ihn passende Framework aus der Vielzahl von Angeboten heraussuchen. Im Folgenden sollen die einzelnen Frameworkklassen und einige ihrer Vertreter näher vorgestellt werden. Da eine Beschreibung aller verfügbaren Frameworks, all ihrer Funktionalitäten und umfangreiche Beispiele den Rahmen dieses Artikels sprengen würden, werden die nach Ansicht des Autors wichtigsten Funktionen einzelner Frameworks genauer beleuchtet. An kleinen Beispielen wird die Anwendung einiger dieser Funktionen verdeutlicht. Für weitergehende Informationen und mehr Beispiele sei auf die jeweiligen Webseiten der einzelnen Projekte verwiesen, die sich in der Literaturübersicht finden.

Basisframeworks

Basisframeworks beinhalten nur Funktionen, die im Zusammenhang mit den „eigentlichen AJAX-Aufgaben“ (also der asynchronen Kommunikation mit dem Webserver und dem Umgang mit XML) stehen. Erweiterungen, beispielsweise zur Oberflächengestaltung, sucht man hier vergebens. Diese Frameworks sind meist sehr kompakt und bilden in einigen Fällen die Basis für den Kommunikations- und XML-Verarbeitungsteil der nachfolgend vorgestellten Applikationsframeworks. Basisframeworks bieten sich vor allem für diejenigen an, die mit den vom Browser zur Verfügung gestellten Oberflächenkomponenten auskommen und keine erweiterten Funktionalitäten benötigen. Auch für die ersten Schritte im Bereich AJAX-Programmierung im Browser sind sie der ideale Einstiegspunkt.

Prototype

Bekanntester Vertreter dieser Klasse ist das von Sam Stephenson entwickelte Prototype. Dieses Framework genießt einen hohen Bekanntheitsgrad, bauen doch viele umfangreichere Applikationsframeworks auf Prototype oder einer davon leicht abgewandelten Version auf. Entstanden ist es im Rahmen des Projekts Ruby on Rails, kann aber völlig unabhängig davon eingesetzt werden. Die Nutzung von Prototype im Rahmen der Webprogrammierung gestaltet sich recht unproblematisch. Nachdem man die Datei von der Homepage heruntergeladen und auf seinem Webserver beispielsweise im Verzeichnis /prototype hinterlegt hat, genügt das Einbinden der Zeile

1. <script src="/prototype/prototype.js" type="text/javascript"></script>

im Head-Teil der eigenen  HTML-Seite, um auf die gesamte Funktionsvielfalt des Frameworks zugreifen zu können. Dem Entwickler steht nun beispielsweise die Funktion zur Verfügung, die die bekannte JavaScript-DOM-Funktion document.getElementById() ersetzt und erweitert, da nun auch mehrere Argumente möglich sind. Im Umgang mit einzelnen DOM-Elementen ergeben sich durch die Funktionen der Klasse Element deutliche Erleichterungen für den Programmierer. Exemplarisch hierfür sei die Funktion Element.removeClassName() genannt, die gezielt Objekte anhand ihres Klassennamens aus dem DOM-Tree entfernt. Für den Umgang mit HTML-Formularen, die bei der Entwicklung von AJAX-Applikationen recht häufig zum Einsatz kommen, wurden auch viele neue Funktionen wie zum Beispiel geschaffen. Mit dieser Funktion kann gezielt auf einzelne Formelemente über ihren Namen zugegriffen werden.

Neben diesen DOM-relevanten Funktionen liegt das Hauptaugenmerk von Prototype natürlich in der asynchronen Kommunikation, welche das Standbein von AJAX-Anwendungen ist. Für diese Aufgabe ist die Klasse Ajax zuständig, die ein Objekt Request zum Stellen einer Anfrage an den Server zur Verfügung stellt. Diesem Objekt werden bei der Erstellung als erster Parameter der URL und als zweiter Parameter die Aufrufdetails und Callback-Funktionen in einem anonymen Objekt übergeben. Eine Beispielfunktion, die einen fiktiven Dienst unter http://www.example.com/ajax/ anspricht und bei erfolgreicher Beantwortung der Anfrage die Callback-Funktion handleAjaxResponse aufruft, ist im folgendem Listing dargestellt:

1. <script src="/prototype/prototype.js" type="text/javascript"></script>

Die vom Server gesendete Antwort kann dann innerhalb der Callback-Funktion, die diese Antwort als Parameter übergeben bekommt, ausgewertet werden. Wie man sieht, ist dieser Quellcode deutlich kompakter und übersichtlicher als das zuvor gezeigte Beispiel. Neben dieser Art des Aufrufs stellt Prototype auch Objekte wie PeriodicalExecuter und Ajax.Updater zur Verfügung, die das wiederholte automatische Aufrufen von Funktionen ermöglichen. Diese Funktionalität wird beispielsweise bei sich immer wieder aktualisierenden Komponenten wie Börsentickern benötigt.

Als eine Art Exceptionhandler bietet Prototype die so genannte Try.these-Funktion an. Ihr können als Argument eine Reihe von weiteren Funktionen übergeben werden, die dann der Reihe nach abgearbeitet werden. Schlägt der Aufruf einer dieser Funktionen fehl, so wird einfach mit der nächsten Funktion fortgefahren. Dies kann beispielsweise beim Umgang mit verschiedenen XML-Implementierungen der einzelnen Browser oder auch bei der Bearbeitung von unbekannten XML-Strukturen in Antwortnachrichten hilfreich sein.

Wie man an dieser Funktionsauswahl und den kurzen Beispielen sieht, gelingt es Prototype mit einfachen Mitteln, dem Programmierer den Umgang mit AJAX deutlich zu erleichtern. Ein großer Kritikpunkt an Prototype ist jedoch die Dokumentation. Sie ist von offizieller Seite, bis auf den JavaScript-Sourcecode, praktisch nicht vorhanden. Mittlerweile existieren zum Glück jedoch einige unabhängige Seiten im WWW, die sich der Dokumentation dieses kleinen, aber mächtigen Frameworks angenommen haben. Das Projekt ist so auch für Einsteiger im Bereich AJAX-Entwicklung gut geeignet.