AJAX in TYPO3 Extensions

Aus Wikizone
Wechseln zu: Navigation, Suche

Übersicht

Links

http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

Typo3 Skripte ohne Rendering

Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen Rendering und Caching-Mechanismen von Typo3 zu vermeiden könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den eid Mechanismus zur Verfügung (siehe unten). Mit diesem wird das Seitenrendering frühzeitig abgebrochen und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter Typo3 - alternatives Rendering

Schnelle Antwort

Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

Der eid Mechanismus und AJAX

Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID Der eID Mechanismus ist der seit der Version 4.x dabei und kann als alternative Rendering Engine betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald eID als Parameter in der URL vorhanden ist (zB. www.domain.de/?eID=schuesselwort) wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen. 

<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID'))    {
    if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]))    {
        require_once(PATH_tslib.'class.tslib_eidtools.php');
        require($classPath);
    }
    exit;
}
?>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]. Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen 

<?php 
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
 	die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>

Steht jetzt also in der Adresse www.domain.de/?eID=schluesselwort geht er in die erste if Abfrage und sieht das $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId] vorhanden ist und speichert 'EXT:myExtKey/meinScript.php' in die Variable $classPath. Danach includiert er die Klasse eidtools und unsere eigene.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir 

<?php 
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database 
// ...
?>

Die erste Zeile initialisert den FrontentUser und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine Verbindung zur Datenbank her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch zB auf alle piBase Funktionen zurückzugreifen können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt 

<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
  function main(){
    $feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object        
    tslib_eidtools::connectDB(); //Connect to database
    echo("hallo welt");
  }
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>

Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

eid ajax Beispiel

Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir: 

typo3conf/ext/myExtKey/
 - ext_localconf.php
typo3conf/ext/myExtKey/eid/
 - ajax.js
 - class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
 - class.myExtKey_pi1.php

eID Datei

class.myExtkey_eid.php 

<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
	var $prefixId      = 'tx_myExtKey_eid';// Same as class name
	var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php';	// Path to this script relative to the extension dir.
	var $extKey        = 'myExtKey';// The extension key.

	function eid_main() {
		$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
		tslib_eidtools::connectDB();

		// Hier beginnt unser Code
		$res = 'Hallo Welt';
		// Hier endet unser Code

		// Wir geben der Anfrage ein XML Objekt zurück
		$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
		header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
		header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
		header('Cache-Control: no-cache, must-revalidate');
		header('Pragma: no-cache');
		header('Content-Length: '.strlen($ajax_return_data));
		header('Content-Type: text/xml');
		echo $ajax_return_data;
		exit;
	}
}
 
$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>

Möchte man in diesem Skript nun auf Funktionen (z.B. Datenbank) aus dem TYPO3-Framework zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

ext_localconf.php

Die Datei muß noch dem System bekannt gemacht werden. Dies tun wir in der ext_localconf.php indem wir folgende Zeile hinzufügen: 

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

Das Frontend Plugin

In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

class.myExtKey_pi1.php 

...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

JavaScript

Jetzt benötigen wir noch etwas JavaScript um die Anfrage vom FrontendPlugin auszuführen:

JavaScript (ajax.js) 


function anfrage()
{
	var myAjax = new Ajax.Request(
	'index.php', // the Request goes to index.php
	{
		method: 'get', //get or post
		parameters: 'eID=gbeventseid',
		onComplete: show // after loading use the anzeige function
	});
}

function show(orgRequest)
//
{
	var xmldoc = orgRequest.responseXML; //use XML Object as answer
	var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
	$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}

Eine Prise TypoScript

Wir benutzen wie gesagt das Prototype Lib. Unsere JavaScript Dateien müssen wir natürlich auch in das Frontend Plugin einbinden. Das machen wir z.B. ganz einfach über TypoScript

TypoScript 

page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js

andere Frameworks

Todo

Probleme mit cc_debug und JASON Objekten

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen: 

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=AJAX_in_TYPO3_Extensions&oldid=19060“