Ajax-Extension für Typo3 mit Prototype und eID
Im Folgenden möchte ich eine der einfachsten Methoden zum Erstellen von Ajax-Erweiterungen für Typo3, die auf einer seit Typo3 Version 4.x integrierten Prototype-Bibliothek basiert, beschreiben. Um mehr Informationen über die API dieser überraschend einfachen, aber sehr nützlichen Bibliothek zu bekommen, ist ein Besuch von der Prototype-Homepage zu empfehlen. Weiter werden wir eine einfache und kleine Erweiterung erstellen, die eine Begrüßung “#NAME# Wazzzup!!!” angezeigt, wobei #NAME# wird durch die Zeichenkette, die wir mit Hilfe von Ajax absenden, ersetzt.
Und so geht’s los. Erstellen Sie eine einfache Erweiterung für Typo3 mit Kickstarter, dabei erwarte ich, dass es für die Menschen, die ans Erstellen von Ajax-Erweiterungen interessiert sind, keine Probleme bereitet. Ich habe eine Erweiterung mit dem Namen prototype_ajax erstellt, damit ist der interne Name tx_prototype_ajax und die frisch erstellte Erweiterung befindet sich in dem Verzeichnis /typo3conf/ext/prototype_ajax. Öffnen Sie die Datei /typo3conf/ext/prototype_ajax/ext_localconf.php und fügen Sie am Ende der Datei folgende Zeile hinzu:
$TYPO3_CONF_VARS['FE']['eID_include']['my_prototype_ajax'] = 'EXT:prototype_ajax/ajax/ajax.php';
Das Parameter eID_include weist darauf hin, dass es die Datei definiert wird, auf die Typo3 beim Erhalten vom Parameter eID=my_prototype_ajax zugreift. Dabei ist eID jede beliebige Ziechenkette. Diese wird später für die Übertragung von Parametern von index.php verwendet. Würden wir my_prototype_ajax durch mycoolstring in der Datei ext_localconf.php ersetzen, so müssten wir selbstverständlich eID=mycoolstring an index.php übergeben, um die Datei für die Behandlung von weitergehenden Parametern zu identifizieren. In unserem Fall ist es ajax.php, die sich bald in /typo3conf/ext/prototype_ajax/ajax/ befindet. Lassen Sie uns ein Verzeichnis ajax in /typo3conf/ext/prototype_ajax/ und eine Datei ajax.php in deisem Verzeichnis erstellen. Diese Datei wird für die Verarbeitung von Ajax-Anfragen und die Erstellung von Response-Daten verwendet. Diese ist einfach eine Server-Komponente unserer Ajax-Anwendung. Es ist nicht unbedingt notwendig, die Bearbeitung von Anfragen in einer separaten Datei zu platzieren und kann auch in der Master-Datei /typo3conf/ext/prototype_ajax/pi1/tx_prototype_ajax.php geschehen. Aber an dieser Stelle möchte ich das nicht weiterdiskutieren.
Ajax.php:
// Error if script used directly not over index.php and eID if (!defined ('PATH_typo3conf')) die ('Could not access this script directly!') //Get name from GET-Array over Ajax $myname = t3lib_div::_GET('myname'); //Generate output $res = '<strong>Wazzzup '.$myname.'!!!</strong>'; //Serialize data to xml $ajax_return_data = t3lib_div::array2xml(array('data'=>$res)); //Generate HTTP-headers header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Cache-Control: no-cache, must-revalidate'); header('Pragma: no-cache'); header('Content-Length: '.strlen($ajax_return_data)); header('Content-Type: text/xml'); //Send response data echo $ajax_return_data; exit;
Erstellen Sie einen Ordner im Verzeichnis js in /typo3conf/ext/prototype_ajax/, wo sich unsere Datei mit Javascript, die fürs Senden und Anzeigen von Daten mit Hilfe von Prototype verantwortlich ist, in der Zukunft befindet. Die Datei heißt bei mir sendData.js. In sendData.js befinden sich folgende Funktionen:
function getDataOverAjax() { //All data going to serverside app over index.php. var url = ""; //Get name from field with id=myname var myname = $("myname").value; //Generate parameters to send to serverside app over GET var pars = "eID=my_prototype_ajax&myname=" + myname; //Send data over GET and define function to handle servers response var myAjax = new Ajax.Request(url, {method: "get", parameters: pars, onComplete: updateDivData}); } function updateDivData(orgRequest) { //Get data in xml-Format var xmldoc = orgRequest.responseXML; //Get needed parameters from xml var result = xmldoc.getElementsByTagName("data")[0].firstChild.data; //Display content in our div $("workplace").innerHTML = result; }
Bearbeiten Sie die Funktion main() der Hauptdatei unserer Erweiterung /typo3conf/ext/prototype_ajax/pi1/tx_prototype_ajax.php. Nach der Erstellung mit dem Kickstarter sieht Funktion main() wie folgt aus:
function main($content, $conf) { $this->conf = $conf; $this->pi_setPiVarDefaults(); $this->pi_loadLL(); $content='<strong>This is a few paragraphs:</strong> This is line 1 This is line 2 <h3>This is a form:</h3> <form action="'.$this->pi_getPageLink($GLOBALS['TSFE']->id).'" method="POST"> <input name="'.$this->prefixId.'[input_field]" type="text" value="'.htmlspecialchars($this->piVars['input_field']).'" /> <input name="'.$this->prefixId.'[submit_button]" type="submit" value="'.htmlspecialchars($this->pi_getLL('submit_button_label')).'" /> </form> You can click here to '.$this->pi_linkToPage('get to this page again',$GLOBALS['TSFE']->id); return $this->pi_wrapInBaseClass($content); }
Wir ändern main(), damit sie wie folgt aussieht:
function main($content, $conf) { $this->conf = $conf; $this->pi_setPiVarDefaults(); $this->pi_loadLL(); // include Prototype-Library $GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = '<script src="typo3/contrib/prototype/prototype.js" type="text/javascript"><!--mce:0--></script>'; //Include our script $GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] .= '<script src="typo3conf/ext/rqmng/js/get.js" type="text/javascript"><!--mce:1--></script>'; //include div to display response information and fields to send data on serverside app $content=' <div id="workplace"> <input id="myname" name="myname" type="text" value="MyName" /> <input onclick="getDataOverAjax();" name="Get Data over Ajax!" type="button" value="Get Data over Ajax!" /></div> '; return $this->pi_wrapInBaseClass($content);
Damit sind wir fertig und Sie können jetzt die von uns erstellte Erweiterung von TER oder von uns herunterladen, oder das live-Beispiel anschauen.
