AJAX in TYPO3 Extensions

Übersicht

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.

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 $TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:meinExtKey/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:meinExtKey/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.

Achja, um auch zB auf alle piBase Funktionen zurückzugreufen 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
    // ...
  }
}

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

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

== Guter Aufbau für eid Strukturen ==
Ordner /eid im Plugin Verzeichnis.

Grundaufbau der eid Datei (z.B. class.extkey_eid.php):
<pre>
<?php
/***************************************************************
*  Copyright notice
*
*  (c) 2010 Your name <email@example.com>
*  All rights reserved
*
*  This script is part of the TYPO3 project. The TYPO3 project is
*  free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 2 of the License, or
*  (at your option) any later version.
*
*  The GNU General Public License can be found at
*  http://www.gnu.org/copyleft/gpl.html.
*
*  This script is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
if (!defined ('PATH_typo3conf')) 	die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

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

	function eid_main() {
		$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
		tslib_eidtools::connectDB();
		var_dump($GLOBALS['TSFE']->fe_user);
	}
}
 
$extensionkey = t3lib_div::makeInstance('tx_extensionkey_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).

Eine erste Anfrage

Mit Prototype

Ergänzende Quelle z.T: http://www.sk-typo3.de/Ajax-mit-prototype-und-eID.328.0.html

Prototype ist seid Typo3 4.x dabei. So kann man es einbinden:

TypoScript

page.includeJS.proto = typo3/contrib/prototype/prototype.js

Für ein kleines Beispiel wollen wir obiges PHP-Grundgerüst nutzen.

Das Skript soll erst mal irgendetwas mehr oder weniger vernünftiges zurückgeben. Z.B. ein xml Objekt und dazu ein paar sinnvolle HTML-Header für den Browser. Dazu löschen wir den var_dump und fügen folgendes an dieser Stelle ein:

// Hier beginnt unser Code
$res = ‘Unsere Antwort';
// 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;

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