Grundlegend gibt es zwei Bereiche, in denen TYPO3 und AJAX aufeinander treffen können: im Backend, indem schon jetzt viele Bereiche auf AJAX setzen, und im Frontend. Für beide Fälle werden die gängigsten Möglichkeiten angesprochen und jeweils in einem Beispiel verdeutlicht. Als Grundlage dazu wird das JavaScript-Framework jQuery verwendet. Selbstverständlich kann auch jedes andere Framework verwendet werden, das eine AJAX-API anbietet. Seit TYPO3 4.3.3 ist neben Prototype auch ExtJS zum festen Bestandteil des TYPO3-Cores geworden. Für die kommenden Beispiele ist eine Extension mit dem Key „myext“ Voraussetzung. Das kann eine einfache, über den Kickstarter erstellte Extension sein, die mindestens eine pi1 für das Frontend und eine mod1 für das Backend enthält. Die fertige Beispiel-Extension steht auf der Website des Autors zum Download bereit [1].

Um die AJAX-API von jQuery nutzen zu können, muss die Library erst einmal eingebunden werden. In diesem Artikel wird Googles „AJAX Libraries API“ [2] benutzt:

page.includeJSlibs {
 jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
 jquery.external = 1
}

In den folgenden Beispielen wird davon ausgegangen, dass es einen Button gibt, der beim Klick einen AJAX-Request absetzt und dessen Ergebnis in einem Alert ausgibt. Dazu wird dem Button eine ID „triggerEvent“ als Attribut vergeben, das als Identifier für den Trigger (Auslöser) fungiert. Der Event-Listener dazu sieht so aus:

$('#triggerEvent').bind('click', function() {
	// mache was
});

Jetzt kommt AJAX ins Spiel. Innerhalb des Event-Listeners befindet sich der AJAX-Request:

$.ajax({
	url: '',
	success: function(result) { alert(result) }
});

Dieser Aufruf enthält alle grundlegenden Eigenschaften. Natürlich gibt es noch weitere, diese sind in der jQuery-AJAX-API [3] dokumentiert.

Der eID-Mechanismus ist eine Möglichkeit, um im Frontend mit AJAX zu arbeiten. Er ist seit der TYPO3 Version 4.0 an Bord und sorgt für eine minimale Basis-Initialisierung der Frontend-Umgebung (Datenbank, Frontend User, TCA). Perfekt also für einen AJAX-Request. Voraussetzung ist, das man die eID (Extension ID) registriert. Die Registrierung wird in die „ext_localconf.php“ implementiert, die Bestandteil der Extension „myext“ ist.

$TYPO3_CONF_VARS['FE']['eID_include']['helloworld'] = 'EXT:myext/ajax/class.tx_myext_helloworld_fe_eid.php';

Somit ist der Key „helloworld“ als eID-Skript registriert und kann über die URL „/?eID=helloworld“ im AJAX-Request angesprochen werden.

$.ajax({
	url: '/?eID=helloworld',
	success: function(result) { alert(result) }
});

Die Grundlagen für „class.tx_myext_helloworld_fe_eid.php“ im Verzeichnis „ajax“ sehen so aus:

class tx_myext_helloworld_fe_eid {

	public function main() {      
		return 'Hello World';
	}
}

$output = t3lib_div::makeInstance('tx_myext_helloworld_fe_eid');
echo $output->main();

Beim Klick auf den Button wird also die Klasse „tx_myext_helloworld_fe_eid“ aufgerufen und in der Methode „main“ ein „Hello World“ als Plaintext zurückgegeben, was im AJAX-Request in der Funktion „success“ im Alert ausgegeben wird.

Der „typeNum“ sollte jedem etwas sagen, denn jede TYPO3-Webseite basiert auf einem. Standard ist immer der „typeNum 0“. Über TypoScript können beliebig viele weitere definiert werden. Über den GET-Parameter „type“ in der Domain wird dieser „typeNum“ angesprochen. Für einen AJAX-Request könnte dieser so aussehen:

includeLibs.tx_myext_helloworld_fe_typenum = EXT:myext/ajax/class.tx_myext_helloworld_fe_typenum.php

ajaxCall = PAGE
ajaxCall {
	typeNum = 5000
	10 = USER_INT
	10.userFunc = tx_myext_helloworld_fe_typenum->main

	config {
		disableAllHeaderCode = 1
		xhtml_cleaning = 0
		admPanel = 0
		debug = 0
		no_cache = 1
	}
}

Was hier passiert ist Folgendes: Wird die Domain mit dem GET-Parameter „type=5000“ aufgerufen, wird die „userFunc“ ausgeführt und dessen Ergebnis im Browser ausgegeben. Damit das Ergebnis komplett Plaintext ist, werden über das config-Objekt noch einige Einstellungen vorgenommen.

Da es jetzt einen „typeNum“ für den AJAX-Request gibt, kann in dem Event-Listener die URL eingetragen werden:

$.ajax({
	url: '/?type=5000',
	success: function(result) {
		alert(result);
	}
});

Wird nun auf den als Trigger definierten Button geklickt, wird in einem Alert der Rückgabewert der „userFunc“ ausgegeben. Dem AJAX-Call kann man natürlich auch noch Daten mit übergeben. Möchte man die Extension mit mehreren verschiedenen „typNums“ nutzen, lässt sich das wie folgt realisieren:

switch ($GLOBALS['TSFE']->type) {
	case 5000: // fuer typeNum 5000
		break;
	case 5001: // fuer typeNum 5001
		break;
	// ...
}

Der Vorteil bei dem Weg über „typeNum“ ist, dass einem die komplette Frontend-Umgebung zur Verfügung steht und nicht wie bei eID nur eine minimale Basis-Initialisierung.

Der Mechanismus für die ajaxID im Backend ist dem eID-Mechanismus im Frontend sehr ähnlich. Auch hier muss zunächst eine Registrierung stattfinden. Das passiert wie beim eID ebenfalls in der „ext_localconf.php“:

$TYPO3_CONF_VARS['BE']['AJAX']['tx_myext::helloworld'] = t3lib_extMgm::extPath($_EXTKEY) . 'ajax/class.tx_myext_helloworld_be_ajaxid.php:tx_myext_helloworld_be_ajaxid->main';

In der Datei „class.tx_myext_helloworld_be_ajaxid.php“, die im Ordner „ajax“ liegt, gibt es eine Klasse mit dem Namen „tx_myext_helloworld_be_ajaxid“, in der eine Methode „main“ vorhanden ist, die das entsprechende Ergebnis zurückliefern soll. Der AJAX-Request für diese ajaxID sieht so aus:

$.ajax({
	url: '/typo3/ajax.php?ajaxID=tx_myext::helloworld',
	success: function(result) { alert(result); }
});

Ein komplett lauffähiges Beispiel für alle drei Möglichkeiten findet sich in der Extension „myext“ unter [1].

Firebug eignet sich bei der Entwicklung als optimaler AJAX-Deugger.

Die heutigen JavaScript-Frameworks und deren AJAX-APIs sowie die drei optimalen Einbindungen in TYPO3 ermöglichen dem Entwickler schnell und vor allem effizient mit AJAX zu arbeiten.

Der Autor

Julian Kleinhans ist Fachinformatiker im Bereich Anwendungsentwicklung und arbeitet als TYPO3-Entwickler bei Bergisch Media in Heiligenhaus. Seit 2003 ist auch er mit dem TYPO3-Virus infiziert. Neben seinem neuen Webblog http://blog.kj187.de betreibt er auch die deutschsprachige TYPO3-Tutorials-Plattform http://www.typo3-tutorials.org