HTMLHttpRequest

Das Projekt HTMLHttpRequest von Angus Turnbull ist ein weiterer Vertreter der kompakten JavaScript-Basisframeworks. Es verzichtet auf Zusatzfunktionen und bietet einzig und allein einen Wrapper für das XMLHttpRequest-Objekt der einzelnen Browser. Für Browser, die dieses nicht unterstützen, ist als Rückfallmöglichkeit ein IFRAME-Support eingebaut, sodass teilweise auch ältere Browser für asynchrone Webzugriffe verwendet werden können. Die gesamte Funktionalität wird in so genannte Transport-Objekte gekapselt, die die eigentliche Kommunikation übernehmen. Diese werden von RemoteFileLoader-Objekten erstellt und verwaltet. Für den Entwickler bedeutet dies, dass er in seinem Quellcode ein Objekt der Klasse RemoteFileLoader erstellt und mit dessen Methode loadInto() dafür sorgt, dass HTML-Code von Webdiensten geladen wird und bestimmte Platzhalterelemente in der aktuellen Webseite ersetzt werden.

Herauszustellen ist die Vielzahl der Browser, die von HTMLHttpRequest unterstützt werden. Leider ist jedoch auch in diesem Projekt die Dokumentation etwas zu kurz gekommen, dem Entwickler bietet sich als einzige Informationsquelle der Beispielquellcode auf der Webseite, was das Verständnis des Frameworks sehr erschwert. Zudem ist der Ansatz über das RemoteFileLoader-Objekt auf den ersten Blick etwas ungewöhnlich und für Anfänger somit eher weniger geeignet.

AjaxGear

Die Homepage des AjaxGear-Projekts überzeugt im Vergleich zum eben vorgestellten HTMLHttpRequest mit einer ausführlichen Funktionsbeschreibung. Das Projekt befindet sich zurzeit, wie viele andere AJAX-Frameworks auch, mitten in der Entwicklung und bietet als Basisframework einen Abstraktionslayer zur Serverkommunikation. Von der Art der Implementierung her ähnelt es dem Prototype-Framework, wie sich am Leichtesten an einem  analogen Beispiel zeigen lässt.

1. function performAjaxRequest(params) {
2. var ajaxRequest = new AjaxGear.Ajax();
3. ajax.setMethod("Post");
4. ajax.setPagePath('http://www.example.com/ajax/');
5. ajax.setRequestData(params);
6. ajax.startRequest();
7. ajax.onRequestComplete = handleResponse;
8. }

Wie man erkennen kann, wurde im Vergleich zu Prototype auf einen umfangreichen Konstruktor verzichtet und alle Eigenschaften des Requests in einzelne Funktionen ausgegliedert. Der Request selbst ist dann mithilfe der Funktion startRequest() explizit anzustarten. In letzter Zeit entwickelt sich dieses Projekt immer mehr in Richtung Applikationsframework, da der Autor begonnen hat, es mit Oberflächenkomponenten wie einem Verlaufsbalken und einer Validierungskomponente für HTML-Formulare auszustatten.

Applikationsframeworks

Applikationsframeworks sind, wie bereits erwähnt, als Erweiterung der Basisframeworks zu verstehen. Da die Nomenklatur im AJAX-Umfeld oft nicht ganz einheitlich ist, wird diese Art von Framework oft auch als Toolkit bezeichnet. Ein wichtiger Bestandteil dieser Frameworks sind DHTML-Darstellungselemente wie beispielsweise die bereits erwähnte sortierbare Tabelle. Diese Objekte werden oft als Widgets bezeichnet. Toolkits enthalten eine Vielzahl solcher Widgets, wodurch sie sehr gut zur Entwicklung von Oberflächen geeignet sind. Dies alles ist zwar kein ursprünglicher Bestandteil der AJAX-Philosophie, trotzdem werden diese Frameworks oft dem AJAX-Lager zugeschrieben.

Moo.Fx

Moo.Fx ist, wenn man der Beschreibung des Entwicklers Valerio Proietti auf der Homepage glauben darf, ein sehr kompaktes und leichtgewichtiges Framework zur Erstellung von Effekten für Benutzerschnittstellen. Es enthält eine Vielzahl von Widgets zur einfachen und schnellen Entwicklung von AJAX-Applikationen und basiert auf der bereits vorgestellten Prototype-Bibliothek. Speziell für Moo.Fx wurde diese, unter dem Namen Prototype.Lite, verschlankt und angepasst, es kann jedoch auch die normale Prototype-Bibliothek als Basis verwendet werden. Zur Arbeit mit DOM stellt das Projekt das Modul Moo.DOM zur Verfügung, das mit der Funktion ein sehr mächtiges Werkzeug zum Extrahieren von Elementen aus der DOM-Struktur bietet. Mithilfe beliebig komplexer Selektoren kann so schnell auf die einzelnen Elemente der Webseite zugegriffen werden. Die so gefundenen Objekte können mit Funktionen versehen werden, die bei bestimmten Aktionen (Finden des Elements durch }, Klicken auf das Element) ausgelöst werden. Listing 2 zeigt, wie alle span-Elemente der Klasse elem beim Klick grün gefärbt werden.

1. Listing 2
2. -----------------------------------------------------------------------
3. // span.elem selektiert alle span-Elemente der Klasse 'elem'
4. // .action definiert die damit verbundenen Aktionen
5. $S('span.elem').action ({
6. // die initialize-Funktion wird direkt beim Finden aufgerufen
7. initialize: function(){
8. // this referenziert auf das aktuelle Objekt, in diesem
9. // Fall wird der Inhalt des Elements verändert
10. this.innerHTML = "span gefunden!";
11. }
13. onclick: function(){
14. // beim Klicken wird die aktuelle Farbe auf grün gesetzt
15. this.style.color = "green";
16. }
17. });

Die kommunikationsspezifischen Funktionen werden im Modul Moo.Ajax gekapselt. Um eine Anfrage an den Server zu erstellen, wird ein neues Objekt der Klasse ajax erzeugt, dem neben dem URL weitere Optionen (wie zum Beispiel postBody für zu übergebende Parameter oder die Callback-Funktionen) übergeben werden. Die Entsprechung für das bei Prototype gezeigte Beispiel lässt sich mit Moo.Ajax wie folgt umsetzen:

1. new ajax ('http://www.example.com/ajax', {
2. postBody: params,
3. onComplete: handleResponse
4. });

Durch seine geringe Größe und die damit verbundene Übersichtlichkeit ist das Projekt gut für Einsteiger geeignet, aber auch fortgeschrittene Programmierer werden sicher Gefallen an der Arbeit mit Moo.FX finden. Wer jedoch eine Vielzahl an Widgets benötigt, ist bei größeren Projekten wie Script.aculo.us oder Dojo besser aufgehoben.

MochiKit

Auch bei MochiKit handelt es sich um einen Vertreter der Applikationsframeworks. Das Projekt besteht aus vielen einzelnen Modulen, die spezialisierte Aufgaben innerhalb des Frameworks übernehmen. Beispielsweise werden Module zur Oberflächengestaltung (MochiKit.Style, MochiKit.Visual), zur Signalbehandlung (MochiKit.Signal) oder zum Formatieren von Zeichenketten (MochiKit.Format) bereitgestellt. Besonderes Augenmerk soll hier jedoch auf die Module MochiKit.DOM zur XML-Bearbeitung und MochiKit.Async zur Serverkommunikation gelegt werden. MochiKit.DOM bietet mit der createDOM()-Funktion eine schnelle Möglichkeit, DOM-Elemente zu erstellen. Für die gebräuchlichsten HTML-Tags wie table, a oder p sind bereits Aliase definiert, was die Arbeit weiter vereinfacht. Die Erstellung eines Abschnitts mit fett gedrucktem Text kann somit wie im folgenden Beispiel erfolgen:

1. var example = P(
2. {'class' : 'sample'},
3. "Der nachfolgende Text ist ", STRONG(null, "fettgedruckt!")
4. );

MochiKit.DOM nutzt im Hintergrund die DOM-Methoden des jeweiligen Browsers, um daraus folgenden HTML-Code zu erstellen:

1. <p class="sample">Der nachfolgende Text ist <strong>fettgedruckt!</strong></p>

Mit der Funktion swapDom() kann dann ein bisher im DOM-Tree enthaltenes Element durch das eben erstellte Element ersetzt werden. Somit wird durch swapDOM(document.getElementById(“oldElement“), example) das Element mit der ID oldElement durch das eben erstellte neue Element ersetzt. Neben diesen Funktionen stellt MochiKit.DOM weitere Hilfsfunktionen wie removeElement() zum gezielten Entfernen von Elementen aus dem DOM-Tree, setNodeAttribute() zum gezielten Ändern von Attributen und viele weitere mehr zur Verfügung. Ihre Verwendung ist auf der Webseite des Projekts ausführlich dokumentiert.

MochiKit.Async wurde bei der Entwicklung sehr stark vom Python-Framework Twisted inspiriert. Zentraler Baustein ist das Deferred-Objekt, das die gesamte asynchrone Kommunikation kapselt. Die Besonderheit ist hier, dass die Callbacks, die von der Abfrage ausgelöst werden, erst nach der Erstellung der Abfrage definiert werden. Dazu gibt es für asynchrone HTTP-Anfragen die Funktion doSimpleXMLHttpRequest(), die ein Deferred-Objekt als Rückgabewert hat. Diesem Objekt kann dann die gewünschte Callback-Funktion, die bei erfolgreichem Aufruf genutzt werden soll, mit der Funktion addCallback() übergeben werden. Falls ein Fehler auftreten sollte, kann der diesen behandelnden Callback, der innerhalb von MochiKit „Errback“ genannt wird, mit der Funktion addErrback() definiert werden. Für Python-Programmierer bietet sich dieses Framework dank der Verwendung vieler Konzepte dieser Sprache an. Ansonsten ist es eher für fortgeschrittene Programmierer geeignet, da die Implementierung einiger Funktionen auf den ersten Blick etwas schwierig zu verstehen ist. Das Projekt selbst greift dem Entwickler jedoch mit einer sehr ausführlichen Dokumentation und Screencasts, die die Arbeit mit MochiKit live demonstrieren, unter die Arme.