Anzeige
Anzeige
UX & Design
Artikel merken

TYPO3 und Ajax geschickt kombinieren: Dezentes Ajax

Mit Hilfe von Ajax ist es problemlos möglich, Teilbereiche von Webseiten nachzuladen, ohne dabei auf Frames angewiesen zu sein. Dabei ergeben sich allerdings zahlreiche Fragen: Ist diese Lösung benutzerfreundlich, zugänglich und abwärtskompatibel? Können die Seiten mit vertretbarem Aufwand unterhalten werden? Was geschieht bei deaktiviertem JavaScript? Und vor allem: Werden die Seiten von Suchmaschinen noch gefunden? Eine neue TYPO3-Extension verspricht Antworten und zeigt einen möglichen Weg, die Klippen zu umschiffen.

4 Min. Lesezeit
Anzeige
Anzeige

Der als AJAX bezeichnete Technologiemix aus „Asynchronous JavaScript and XML“ ermöglicht schlanke Web-Applikationen, die sich anfühlen wie gewohnte Desktop-Programme. JavaScript ist für die meisten Screenreader und auch für Suchmaschinen jedoch oft eine unüberwindbare Hürde. Damit ist der Einsatzbereich dieser Technologie beschränkt. Außerdem können Anwender JavaScript in ihrem Browser deaktivieren, was in einigen Computerzeitschriften aus Sicherheitsgründen sogar empfohlen wird. Für die meisten Websites wird somit ein anderes Fundament benötigt. Dies ist jedoch kein Grund, um auf den Einsatz von Ajax zu verzichten.

Anzeige
Anzeige

Für die bessere Verwaltung sowie für eine suchmaschinentaugliche und benutzerfreundliche Aufbereitung von Web-Content liegt es nahe, ein Content Management System wie zum Beispiel TYPO3 einzusetzen. Darüber hinaus kann es sinnvoll sein, den Inhaltsbereich von Seiten zu ändern, während andere Elemente wie etwa Animationen oder Videosequenzen kontinuierlich weiterlaufen. Dies kann mit Frames, mit iframes oder auch mit Flash bewerkstelligt werden – die Nachteile sind jedoch nicht unerheblich [1]. Um diese Nachteile beim Einsatz von Frames, iframes oder Flash zu vermeiden und die Vorteile von zeitgemäßem Code zu nutzen – etwa ein mit der Schriftgröße skalierendes Layout – wurde eine Ajax-basierte Lösung gesucht. Das von TYPO3 bereitgestellte Fundament sollte nicht beeinträchtigt und die Arbeit im Backend nicht erschwert werden. TYPO3 und Ajax sollten dabei konsequent getrennt werden. Zum einen sollte eine Website auch ohne Ajax funktionieren, zum anderen sollen sich Administratoren und Editoren nicht mit Ajax-spezifischen Anforderungen auseinandersetzen müssen.

Das Ergebnis ist eine Lösung, mit der Entwickler ihre TYPO3-Websites mit wenig Aufwand um Ajax-Funktionen erweitern können. Mit der Unterstützung von Mario Rimann entstand in den letzten Monaten unter dem Namen tut_unobtrusiveajax [2] eine sogenannte Tutorial-Extension, die dazu dient, die Ergänzung einer Website um Ajax-Features nachvollziehen zu können.

Anzeige
Anzeige

Schichten trennen

Eine bestehende TYPO3-Website kann mit wenig Aufwand um AJAX-Funktionalität erweitert werden. Dazu müssen in TYPO3 die betroffenen Links und Content-Bereiche markiert, die JavaScripts zum „ajaxifizieren“ der Links eingebunden und ein PHP-Skript zur Verarbeitung der markierten Content-Bereiche erstellt und auf dem Server abgelegt werden. Benötigt werden:

Anzeige
Anzeige
  • Anpassungen der Links, die Content dynamisch laden sollen (class="ajaxLink")
  • Spezielle Kommentare (Hooks), die den dynamischen Inhaltsbereich in allen Seiten umschließen
  • JavaScript, das in jede TYPO3-Seite eingebunden wird
  • Ein einfaches PHP-Skript, das die Teilbereiche zwischen den Hooks auslesen kann

Der Schlüssel für den unaufdringlichen Einsatz von Ajax liegt im Laden einer voll funktionsfähigen Seite und dem nachträglichen „ajaxifizieren“ der Dokumentstruktur per JavaScript. Listing 1 zeigt einen Link vor der DOM-Manipulation, Listing 2 einen Link mit Event-Handler nach der Veränderung des DOM.

HTML
<li class="ajaxLink"><a xhref="index.php?id=56">ajaxed link 1</a>

Listing 1

HTML
<a xhref="javascript:void(0);onclick="javascript:sndReq('index.php?id=56');"">ajaxed link 1</a>

Listing 2

Die DOM-Manipulation, die Ajax aktiviert, wird beim Laden der Seite ausgelöst. Im Sinne von „unobtrusive JavaScript“ [3] wird einerseits Rücksicht auf bereits vorhandenes JavaScript genommen und andererseits die Manipulation ausschließlich bei Ajax-fähigen Clients ausgeführt [4].

Anzeige
Anzeige

Suchmaschinen, Screenreader und Besucher mit deaktiviertem JavaScript oder mit generell nicht kompatiblen Clients navigieren die Website ohne Ajax. Die Website ist somit zugänglich und abwärtskompatibel. Suchmaschinen können die einzelnen Seiten zudem erfassen.

JAVASCRIPT
if(window.onload){
	var existingOnload = window.onload;
}else{
	var existingOnload = function(){}; //do nothing
}
function secondOnload() {
	existingOnload();
	getElementsByClassNameAndReplace("ajaxLink");
}
var W3CDOM=(document.createElement && document.getElementsByTagName); 
//zusätzliche Abfragen wie z. B. Browser/Versionen könnten hier eingesetzt werden
if(W3CDOM){
	window.onload = secondOnload;
}

Listing 3

Sofern die DOM-Manipulation der Seite durchgeführt wurde, verweisen die Navigationslinks bzw. die mit class=“ajaxLink“ ausgezeichneten Links nun nicht mehr direkt auf eine Seite. Ajax übergibt statt dessen die Linkadresse als Parameter an den Server, wo ein PHP-Skript die angesteuerte Seite aufruft, den Teilbereich zwischen den gesetzten Hooks ausliest und an den Client zurückliefert. Mit Hilfe von JavaScript wird das erhaltene Fragment an der richtigen Stelle ersetzt, ohne dass die Seite neu geladen wird.

TYPO3 HTML-TEMPLATE
<div id="stuffToLoad">
	<!--uniqueContentSTART-->
		###CONTENT###
	<!--uniqueContentEND-->
</div>

Listing 4

PHP
function getPageContent($sUrl) {
	return implode(file($sUrl), "");
}	
function parseContentByTagName($sContent) {
	preg_match_all(
		'/<!--uniqueContentStart-->([\n\r\w\W.]*?)<!--uniqueContentEnd-->/i',
			$sContent,
			$aContent
	);
	return implode($aContent[0], "");
}

Listing 5

Je nach Fall kann es sinnvoll sein, im gleichen Arbeitsgang weitere Elemente auszuwechseln, etwa den Seitentitel.

Anzeige
Anzeige

Fazit

Der Teufel steckt wie immer im Detail. Um die History und die Bookmark-Funktionalität des Bowsers zu erhalten, wurde das JavaScript „dhtmlHistory.js“ eingesetzt [5]. Zusätzliche Workarounds waren nötig, um „simulateStaticDocuments“ und „realUrl“ zu unterstützen. Damit funktioniert die mit der Extension beschriebene Lösung für einfache Websites. Im konkreten Anwendungsfall können weitere Anpassungen nötig werden, etwa für die Unterstützung von Mehrsprachigkeit oder bei speziellen Anforderungen an das Seiten-Layout. Diese Spezialfälle werden in der Tutorial-Extension nicht abgehandelt. JavaScript-Kenntnisse vorausgesetzt, sollte man die Tutorial-Scripts jedoch schnell an die eigenen Bedürfnisse anpassen können.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige