Unter AJAX-Funktionalitäten wird im Allgemeinen das dynamische Nachladen oder Verändern von Teilen der Webseite verstanden. Das geschieht hauptsächlich, indem per JavaScript Informationen im XML-Format vom Server nachgeladen und mit Hilfe der Informationen Objekte der Webseite verändert werden. Da es mittlerweile zahlreiche Literatur über AJAX und die damit verbundenen Anwendungen gibt, wird hier nicht auf AJAX selbst näher eingegangen, sondern auf mögliche Anwendungsbereiche sowie die Vor- und Nachteile. Die wesentlichen Vorteile der Technologie sind folgende:

• Weniger Traffic zwischen Browser und Server.
• Erhöhte Usability, da ein Neuladen der Webseite nicht nötig ist und Änderungen schneller verfügbar sind.
• Erhöhte Usability bei Formularen, da das klassische Absenden von Formularen Nutzer verwirren sowie Probleme mit dem Zurück-Button des Browsers verursachen kann. Außerdem ist eine „Live“-Validierung möglich.
• Es lassen sich weit bessere Userinterfaces erstellen, zum Beispiel durch Drag & Drop, Slider, Vorschlagsfunktionen oder mit Effekten wie Fade-In.

Wie bei jeder neuen Technologie gibt es auch bei AJAX Nachteile und Unwegbarkeiten bei der Verwendung [1]. Die wichtigsten sind:

• Der Client (Browser) muss bestimmte Anforderungen erfüllen: JavaScript muss aktiviert sein, und ein allgemeines XML­HttpRequest-Objekt sollte unterstützt werden.
• Allgemeine Accessibility-Probleme treten auf, insbesondere in Verbindung mit Screenreadern, die die Änderungen auf der Webseite nicht bemerken.
• Das Rerendering des DOM-Baumes sowie die Anzeige und Berechnungen benötigen Ausführungszeit und Ressourcen. (Langsame Clients berücksichtigen; AJAX Tuning)
• Suchmaschinen können Probleme haben, den Inhalt zu spidern.
• Die Zurück-Funktionalität des Browsers wird unter Umständen unbrauchbar.

Für die meisten Probleme gibt es Vorschläge und allgemeine Lösungsempfehlungen, wie zum Beispiel die Empfehlung, gerade aktualisierte Teile hervorzuheben (Stichwort „Yellow Fade Technic“ [2] oder „Fade Anything Technic“). Mit Hilfe eines Popups werden Benutzer von Screenreadern gegebenenfalls über dynamische Änderungen informiert. Listen mit allgemeinen, vermeidbaren Fehlern bei der Verwendung von AJAX finden sich an verschiedenen Orten im Internet [3]. Der wohl wichtigste Punkt ist das Bereitstellen einer alternativen Version einer Webseite ohne AJAX, denn nur so werden auch Clients unterstützt, die den benötigten Anforderungen nicht genügen.

Eine allgemeine Lösung besteht darin, eine Version der Webseite auszuliefern, die ohne JavaScript und AJAX funktionsfähig ist. Nach einer Prüfung, ob der Client allen Anforderungen genügt, wird die Webseite verändert und dafür gesorgt, dass alle AJAX-Funktionen aktiv sind. Der Vorgang soll „Ajaxsubstitution“ genannt werden und kann prinzipiell auf drei Arten erfolgen: Client-basiert, Server-basiert oder eine Kombination aus beiden. Die Extension „Ajax-Framework“ stellt dafür ein flexibles Konzept zur Verfügung, das es erlaubt, solch barrierearme Webanwendungen fast ohne Mehraufwand zu entwickeln. Das Framework ist zum Beispiel auf der Fondsinformationsplattform von Fondsvermittlung24.de im Einsatz [4]. Es ermöglicht benutzerfreundliches Umschalten der Detailinformationen zu Fonds und hält dabei den Traffic zum Server gering. Auf der Webseite – ein gemeinsames Projekt mit der AOEMedia GmbH – sieht man eindrucksvoll die Möglichkeiten der Erweiterung.

Das Schema stellt die Abstraktion einer Webanwendung mit verschiedenartigen Inhaltselementen dar.

Um im Folgenden das Framework näher zu erläutern, ist es nötig, die zu Grunde liegende abstrakte Sicht auf eine Webanwendung vorzustellen: Normalerweise besteht eine Webseite aus verschiedenen Inhaltselementen (Contentelements = CE), die wiederum verschachtelt sein können. Für das AJAX Framework unterscheiden wir zwei Arten von CEs: Dynamische Inhaltselemente (DCE) verändern den Inhalt in Abhängigkeit von bestimmten Aktionen des Nutzers. Interaktive Inhaltselemente (ICE) stellen dem Nutzer verschiedene Interaktionsmöglichkeiten, wie beispielsweise Links oder Formulare, zur Verfügung.
Eine solche Sicht auf eine Webseite liegt dem AJAX Framework zu Grunde. Für die genannten Elemente einer Webseite gibt es jeweils eine abstrakte Klasse sowie verschiedene Hilfsklassen, die hier näher vorgestellt werden:

• Site: Ist der eigentliche Container aller Inhaltselemente und enthält die Clientscripte (JavaScript).
• CE: Kann im Allgemeinen jeglichen Inhalt wie Bild, Text oder auch andere CE beinhalten. Sie haben einen eindeutigen Namen, der sich auch als Element-ID des umschließenden DIV-Containers auf der Webseite wieder findet (CE ist die Elternklasse von DCE und ICE).
• DCE: Liefern Inhalt in Abhängigkeit von verschiedenen Parametern (in TYPO3 sind das Extensions, die so genannten piVars) und Einstellungen (in TYPO3 TypoScript). Hierhinter liegt meist die Businesslogik der Anwendung (Beispiel: Ein Element, das das Bild einer Galerie in Abhängigkeit von bestimmten Parametern zeigt).
• ICE: Spezielles Inhaltselement, das Teil des Userinterfaces ist und Interaktionsmöglichkeiten bereitstellt. Sie triggern Änderungen auf der Webseite, beispielsweise das Ändern eines DCE. Die Änderungen können durchaus komplex sein und mehrere verschiedene Aktionen nach sich ziehen. Das Besondere an ICEs ist, dass es zwei Versionen geben muss: eine für AJAX und eine klassische Version. ICEs sind Links und Formulare (Beispiel: Links zum Bildwechsel in einer Galerie).

Die allgemeine Sicht und die verschiedenen möglichen Ansätze sollen hier nicht vertieft werden. Stattdessen soll die konkrete Umsetzung einer Webseite und die Nutzung der Extension „FE AJAX Framework“ erklärt werden: Die Erweiterung setzt auf die AJAX-Bibliothek Xajax [5] und verwendet clientseitig die Lightweight Effektbibliothek Moofx [6], die auf dem bekannten Prototype JavaScript aufsetzt. In der Erweiterung selbst gibt es eine Reihe von Klassen, darunter mehrere abstrakte und im Unterverzeichnis „xajax“ die konkrete Implementation unter Verwendung von Xajax.

Ziel des Frameworks ist, ohne viel Mehraufwand strukturierte AJAX-Anwendungen entwickeln zu können, die auch auf nicht ajaxfähigen Clienten funktionsfähig sind. Außerdem soll es die eigentlichen Ajaxfunktionen abstrahieren, um die Entwicklung zu entlasten. Dazu ist, wie erwähnt, die abstrakte Sicht auf die Webseite hilfreich.

Bei dem Entwurf einer Anwendung (hier als TYPO3 Extension) müssen lediglich die benötigten Inhaltselemente identifiziert und in getrennten Klassen implementiert werden. Die Ausgaben der verschiedenen Inhaltselemente werden dann kombiniert und ergeben die eigentliche Webseite beziehungsweise Webanwendung. Im Prinzip ist das Vorgehen ähnlich wie ohne den Einsatz des Frameworks. Durch die Aufteilung in verschiedene CE-Klassen ist es später einfach, bestimmte Teile der Webseite anzusprechen und zu verändern.

Prinzipiell funktioniert das Framework so, dass zuerst der gesamte Inhalt der Webseite von TYPO3 ausgeliefert wird – die Ausgabe der Extension besteht aus der Kombination der verschiedenen Inhaltselemente. Jetzt wird mit Hilfe verschiedener JavaScript-Funktionen geprüft, ob der Browser den Anforderungen genügt. Ist das der Fall, werden die interaktiven Inhaltselemente (ICE) ersetzt (im Text Ajaxsubstitution genannt) und damit ist die Ajaxfunktionalität aktiv.

Genügt der Browser den Anforderungen nicht, findet auch keine Ersetzung statt und die Links bleiben normale Links. Nach

UML Diagramm der wichtigsten Entities und Klassen in dem Framework. Man erkennt die zentrale Rolle des Elementloaders und die zwei Varianten der Auslieferung der Inhaltselemente.

der Ajaxsubstitution passiert zum Beispiel Folgendes: Betätigt der Nutzer einen Link, so sorgt das Framework dafür, dass die in dem interaktiven Inhaltselement definierten Aktionen ausgeführt werden. Das betrifft zum Beispiel das Neuladen eines beliebigen anderen Inhaltselements.

Die zentrale Klasse in dem Framework ist der so genannte Elementloader, dem die verschiedenen Inhaltselemente bekannt sein müssen. Er sorgt zum Beispiel dafür, dass die Ausgabe nur einzelner Inhaltselemente an den Browser gesendet werden kann. Sicherlich ist die Definition der einzelnen Inhaltselemente wichtig, dafür stehen jeweils verschiedene Basisklassen zur Verfügung. Die wichtigste Funktion eines Inhaltsobjekts ist „getContent()“, die den eigentlichen Inhalt zurückgibt. Besonderes Augenmerk liegt hier bei den ICEs: Da Xajax zum Einsatz kommt, können die Aktionen direkt in dem ICE definiert werden.

Weiterhin stehen Hilfsklassen zur Verfügung, die zum Erstellen von Links verwendet werden sollten. So wird sichergestellt, dass die Inhaltsobjekte immer die gleichen Parameter erhalten – sie müssen sich also bei der Entwicklung nicht darum kümmern, ob ein AJAX-Aufruf aktiv ist oder nicht. Die CE-Objekte haben jeweils die gleiche Umgebung (konkret: $this->conf und $this->piVars). Weiterhin ist es im Framework möglich, ein Inhaltselement effektvoll aus- und wieder einblenden zu lassen, während es neu geladen wird.

Der eigentliche Ajaxaufruf wird von der Datei „fe_ajax.php“ behandelt. Sie ist über den eID-Mechanismus [7] in TYPO3 eingebunden und sorgt für die Basis-Initialisierung der TYPO3-Umgebung (Datenbank, Contentobjekte, Templateparsing) und des Elementloaders.

Die Screenshots zeigen die Beispielextension mit dem Ablauf nach Linkaktivierung.

Verwendung und Funktionsweise lassen sich am besten an einem kurzem Beispiel erläutern, das sich auch in der Extension „danp_feajaxexample“ findet: Die Beispiel-Webanwendung soll aus einem Bild, das mit Hilfe von Links gewechselt werden kann, bestehen. Außerdem enthält es zur weiteren Veranschaulichung eine Tabelle mit integrierten Links, auf die hier nicht näher eingegangen wird. Wenn Sie die Erweiterung testen, werden Sie feststellen, dass alle Links auch mit deaktiviertem JavaScript entsprechend funktionieren.

Wir identifizieren für unser Beispiel also ein DCE „image“ mit dem anzuzeigenden Bild und ein ICE „imagelinks“ mit den Links zum Wechseln des Bildes. Diese implementieren wir als eigenständige Klasse, am besten in einem eigenen Ordner „elements“. Hier die Definition des DCE image:

class tx_danpfeajaxexample_image extends tx_danpfeajax_dce_xajax 
{
		function getContent() {
     
	$imgPath=t3lib_extMgm::siteRelPath('danp_feajax_example').'res/';
			if (is_numeric($this->piVars['showimage'])) {
				$content= '<img xsrc="'.$imgPath.$this->piVars['showimage'].'.jpg">';
			}
			...

In einem DCE können die wichtigsten TYPO3-Klassen verwendet werden, also auch ein CObject, unabhängig davon, ob das DCE von einem Ajaxcall aufgerufen wird oder von einer normalen TYPO3-Umgebung. Nun die Definition des ICE imagelinks:

class tx_danpfeajaxexample_imagelinks extends tx_danpfeajax_ice_xajaxsimplechanger {
		function init() {
			$this->setChangedCE('image');  
		}  
		function getContent() {
			$content.= $this->getLink('Image 1 with Effect',array('showimage'=>'1')).' | ';
			$this->linkHelperObj->waitMessageOff();
			$content.= $this->getLink('Image 2 without',array('showimage'=>'2')).' | ';
			$this->linkHelperObj->waitMessageOn();
			$content.= $this->getLink('Image 3 with Effect',array('showimage'=>'3'));
			return $content;
		}
	}

Für die Definition des ICE „imagelinks“ genügt der gezeigte Code. Da hier lediglich ein anderes DCE geändert werden soll, wird hier einfach die Basisklasse „*ice_xajaxsimplechanger“ verwendet. Andere Beispiele mit eigener Definition mehrerer Aktionen sind in der Beispielextension enthalten.

Jetzt fehlt noch der Elementloader und seine Initialisierung. Es ist zwingend notwendig, dass der Elementloader alle nötigen Inhaltselemente kennt, denn er ist für ihre Auslieferung zuständig. Aus dem Grund werden die Inhaltselemente in der Datei „definitions.php“ mit ihrem eindeutigen Namen aufgezählt. Weiterhin muss für die Webseite der Elementloader im TYPO3-Template gesetzt werden:

config.ajaxElementloaderPath=EXT:danp_feajax_example/pi1/class.tx_danpfeajaxexample_elementloader.php
config.ajaxElementloaderClassName = tx_danpfeajaxexample_elementloader

Jetzt wird lediglich noch die eigentliche Ausgabe der Beispielextension erzeugt, was mit Hilfe des Elementloaders schnell erledigt ist. Hier der Quellcode der Extensionklasse danp_feajaxexample_pi1:

//Elementloader instanzieren und initialisieren
$elementloader=t3lib_div::makeinstance('tx_danpfeajaxexample_elementloader');
$elementloader->init(&$conf);
$elementloader->setPiVars($this->piVars);
//Seitenobjekt instanzieren und Javascript hinzufügen  
$xajaxSite=$elementloader->getInitialisedSiteObject();
$xajaxSite->addHeaderCode();
//einfaches Zusammenbauen der Ausgabe:
$content.=$elementloader->getDCEContent('image');
$content.=$elementloader->getICEContent('imagelinks');

Das Framework gibt dem Webentwickler Werkzeuge an die Hand, um schnell zu einer strukturierten Webanwendung mit dynamischen AJAX-Funktionen zu kommen. Es hilft durch das strukturierte Vorgehen, eine saubere Anwendung zu erhalten und entlastet durch das automatische Handling aller AJAX-Funktionalitäten. Prinzipiell ist das Framework so ausgelegt, dass auch andere Implementationen als die auf Xajax basierende denkbar sind. Zurzeit unterstützt die Erweiterung clientseitige Ajaxsubstitutionen von Links. In weiteren Ausbaustufen ist eine umfangreiche Unterstützung von Formularen sowie die Verbesserung der Usability geplant, wie zum Beispiel die Unterstützung des Browser-Zurück-Buttons bei Ajaxaufrufen.

Der Autor

Daniel Pötzinger studierte angewandte Informatik und ist seit 2001 überzeugter TYPO3-Nutzer. Er ist Geschäftsführer von Pötz-Media (www.poetz-media.de), ein Unternehmen für TYPO3-Dienstleistungen. Außerdem betreibt er einen TYPO3-Blog unter www.typo3-media.com.