Bearbeiten von „AJAX in TYPO3 Extensions“

== Ü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.

<pre>
<?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;
}
?>
</pre>

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
<pre>
<?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'; ?>
?>
</pre>
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 ''$classPat''h. '''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
<pre>
<?php 
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database 
// ...
?>
</pre>
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

<pre>
<?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>
</pre>
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

== eid ajax mit Prototype 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:
<pre>
typo3conf/ext/myExtKey/
 - ext_localconf.php
typo3conf/ext/myExtKey/eid/
 - ajax.js
 - class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
 - class.myExtKey_pi1.php
</pre>

=== eID Datei ===
'''class.myExtkey_eid.php'''
<pre>
<?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();

?> 
</pre>

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'''
<pre>
...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...
</pre>

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 FrontendPlugi'''n auszuführen:

'''JavaScript (ajax.js)'''
<pre>

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"
}
</pre>

=== 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'''
<pre>
page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js
</pre>

== Weitere Beispiele ==
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.

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

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

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

		// Hier beginnt unser Code
		
		if(!empty($GLOBALS['TSFE']->fe_user->user)){
			$uid = $GLOBALS['TSFE']->fe_user->user[uid];
			$name = $GLOBALS['TSFE']->fe_user->user[name];
			$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
			$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
			$email= $GLOBALS['TSFE']->fe_user->user[email];
			$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;		
		}else{
			$res = 'login=0';
		}

		//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($res));
		//header('Content-Type: text/plain');
		//echo $ajax_return_data;
		echo $res;
		exit;
	}
}
 
$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?> 

</pre>

== Probleme mit cc_debug und JSON 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.