Uncategorized
Tutorial: Typo3 als AJAX-Seite
This post is also available in: Deutsch (German)
In diesem Tutorial bauen wir eine AJAX-getriebene Seite, der eine TYPO3-Instanz zugrunde liegt. Die Motivation dahinter? Klar, AJAX ist auch 2011 noch cool und bietet einige Vorteile – weniger Reloads, weniger Traffic, mehr fancy Animationen.
Damit das funktioniert stellen wir in diesem ersten Teil erst einmal das CMS darauf ein, beliebige Seiten als JSON zu rendern, um so relativ einfach alle benötigten Informationen über die ausgegebenen Seiten transportieren zu können. Gleichzeitig muss die Kommunikation möglichst schlank sein. Fast alles, was wir benötigen, um TYPO3 zum Rendern von JSON-Seiten zu überreden, bringt entweder TYPO3 selbst, zumindest aber PHP von Haus aus mit.
Alles beginnt mit einer Weiche im TypoScript, die das JSON-Rendering anstößt. In der JSON-Welt ist es geläufig, einen entsprechenden GET-Parameter (?json=1) an die auszugebene URL anzuhängen. Das Ziel soll also sein, bei Aufruf einer Seite
http://typo3instance.example.org/meine/seite?json=1
den Inhalt von /meine/seite in JSON zurück zu bekommen. Die TypoScript-Condition muss also den URL-Parameter “json” auf den Wert “1” überprüfen:
[code]
# im ROOT-Template, irgendwo nach der Initialisierung des page-objekts
[globalString = GP:json=1]
<INCLUDE_TYPOSCRIPT: source="FILE: typo3conf/ts/jsonProcessor.inc">
[global]
[/code]
Das TypoScript, das den JSON-Part übernimmt, wurde hier in eine externe TypoScript-Datei ausgelagert, um das ganze etwas übersichtlicher zu halten. Dort passiert dann folgendes:
[code]
# jsonProcessor.inc
includeLibs.jsonTools = fileadmin/scripts/user_jsonTools.php
config.disableAllHeaderCode = 1
config.doctype = none
# setting json header. more additional headers are separated by pipe (|)
config.additionalHeaders = Content-type:application/json
# keep typo3 from "tidying up" perfectly valid json…
config.xhtml_cleaning = 0
# json encoder
page.stdWrap.postUserFunc = user_jsonTools->pageToJson
[/code]
Zunächst wird ein Script geladen, das später das eigentliche JSON-Encoding, aber auch ein paar andere hilfreiche Dienste erledigen wird. Die Datei befindet sich in unserem Falle im fileadmin-Ordner. Zu deren Inhalten kommen wir später.
Wichtig wird es gleich bei den Angaben zur Seitenkonfiguration. Zunächst wird alles außerhalb des <body>-Tags wegkonfiguriert. So vermeiden wir einen deutlichen Overhead in der Übertragung der Seiten (disableAllHeaderCode).
Anschließend wird der DocType und HTTP-Header (Content-Type) auf JSON eingestellt, damit die Clients (idR. Browser) wissen, um welchen Inhaltstypen es sich bei der Response handelt (doctype und additionalHeaders).
Der nächste Schritt hat mich einige Nerven gekostet, denn standardmäßig versucht TYPO3 direkt vor der Ausgabe der Seite noch auf biegen und brechen, valides HTML zu erzeugen. Was normalerweise ja lobenswert ist (in der Praxis aber auch nicht wirklich funktioniert 😉 –Anm.), bricht einer validen JSON-Response den Nacken. Daher wird das xhtml_cleaning-Feature schnell ausgestellt.
Abschließend wird der Seite mit der postUserFunc-Einstellung mitgeteilt, dass jede Antwort zuletzt durch eine Benutzerdefinierte UserFunc geschliffen werden soll.
Die Klasse user_jsonTools befindet sich dabei in der PHP-Datei, die wir in der ersten Zeile eingebunden haben, und enthält diese UserFunc.
Schauen wir uns diese Datei einmal an:
[code lang=”php”]
<?php
include_once(PATH_site.’typo3/sysext/cms/tslib/class.tslib_content.php’);
class user_jsonTools {
function pageToJson ($content = ” , $conf = array()) {
global $TSFE;
$cObj = t3lib_div::makeInstance(‘tslib_cObj’);
$arrReturn = array();
$arrReturn[‘title’] = $TSFE->page[‘title’];
$arrReturn[‘content’] = $content;
$arrReturn[‘urlSegment’] = $cObj->currentPageUrl();
return json_encode($arrReturn);
}
}
?>
[/code]
In den meisten Fällen werden wir den Titel und Inhalt der Seite brauchen. Die URL der aktuellen Seite geben wir dazu, um später besser durch die AJAX-Seite navigieren zu können.
TSFE und cObj brauchen wir, um an die Seiteneigenschaften zu kommen. $content wird aus dem Framework automatisch über die userFunc mitgegeben. Ganz am Ende sorgt das json_encode dafür, dass alle Informationen schön kompakt in einen JSON-String encodiert und alle innenliegenden Zeichen nach Erfordernis maskiert werden. Macht PHP (ab 5.2) automatisch, müssen wir uns also nicht drum kümmern. Juhu!
Die Methode kann natürlich nach belieben ergänzt werden. Ich habe zum Beispiel noch die Page-IDs der Rootline (für die Navigation) und weitere Seiteneigenschaften mitgegeben, die ich im Frontend brauche.
Soweit, so gut. Nachdem der TYPO3-Cache geleert ist, könnt Ihr das ganze Testen, indem Ihr an eine beliebige URL des TYPO3-Auftritts einen Parameter ?json=1 hängt. Kommt JSON als Antwort, so stehen die Chancen gut, dass alles geklappt hat. Einige Browser werden versuchen, die Antwort aufgrund des geänderten Content-Types herunter zu laden. Mir hat daher die Firefox-Extension JSONView große Dienste geleistet.
Wie sind eure Erfahrungen mit dem Thema? Ist TYPO3 wirklich so geeignet für AJAX-Lastige Seiten? Was sind Eure Alternativen?