Joomla! Programmierung/Programmierung/Codeschnipsel/Ajax mit MooTools

Für die dynamische Aktualisierung von Elementen Ihrer Internetseite verwenden Sie in einer typischen Ajax-Anwendung Daten, welche sowohl von Ihrem eigenen Server, als auch von einem entfernten Web-Service stammen können.

Eine solche Ajax-Implementierung besteht aus drei Teilen:

1. Ein HTML-Element, dessen Veränderung des Zustandes den Ajax-Request auslöst.
2. Ein weiteres HTML-Element in dem die Response-Daten platziert werden. Für gewöhnlich wird dem Benutzer hier ein Hinweis auf den Status der Anfrage angezeigt, während auf die Antwort des Servers gewartet wird.
3. Der Ajax JavaScript-Code selbst.

HTML Auslöser

Zuerst gilt es das Element, welches den Ajax-request auslösen soll auf der Seite zu identifizieren. Dieses Element muss durch ein eindeutiges id Attribut gekennzeichnet sein. Angenommen Sie haben eine Drop-Down-Box auf Ihrer Seite und Sie möchten eine Ajax-Anfrage auslösen, wenn der Benutzer die ausgewählte Option ändert. Stellen Sie zuerst sicher, dass das Select-Element ein eindeutiges id-Attribut hat:

<select name="drop-down" id="drop-down">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
</select>

Sie können diese Auswahlliste programmgesteuert mit Hilfe der JHtml Klasse wie folgt erzeugen:

<?php
$options = Array();
 
$options[] = JHtml::_('select.option', '1', 'Item 1');
$options[] = JHtml::_('select.option', '2', 'Item 2');
$options[] = JHtml::_('select.option', '3', 'Item 3');
 
echo JHtml::_('select.genericlist', $options, 'drop-down');

HTML Aufnahmecontainer

Zweitens brauchen Sie ein HTML-Element dass die Ausgabe des AJAX Aufrufs aufnehmen wird. Dies kann eine entsprechend platziertes <div> Element sein welches ebenfalls ein eindeutiges ID-Attribut benötigt:

<div id="ajax-container"></div>

Sie können diese id selbstverständlich nutzen um die Ausgabe mit Hilfe von CSS anzupassen.

JavaScript

Drittens müssen Sie den JavaScript-Code hinzufügen der den Ajax-Request enthält und die Antwort in die Bildschirmausgabe hinzufügt.

In der Regel ist es nicht erforderlich die MooTools Bibliothek selbst zu laden, da dies automatisch für Sie von Joomla! erledigt wird, aber manchmal müssen Sie dies manuell tun:

<?php
JHtml::_('behavior.mootools');

Es gibt viele Möglichkeiten um JavaScript-Code in die Ausgabe von Joomla! hinzuzufügen.

Eine Möglichkeit, die komplexes "quoting" vermeidet ist die PHP heredoc Syntax:

<?php
$ajax = <<<EOD
/* <![CDATA[ */
Hier steht Ihr JavaScript code.
/* ]]> */
EOD;
 
JFactory::getDocument()->addScriptDeclaration($ajax);

Hinweis: Es ist jedoch anzumerken, dass der heredoc Syntax nicht eingerückt werden kann. Ein Minimum an "escaping/quoting" ist durch die Einleitung des Strings über doppelte Anführungszeichen möglich.

Durch das Umschliessen des JavaScript codes mit /* <![CDATA[ */ und /* ]]> */ Tags wird gewährleistet, dass der JavaScript code ausgegeben wird ohne bei HTML Validatoren Probleme zu verursachen.

Sie können PHP-Variablen in heredoc Texte einfügen indem Sie sie mit geschweiften Klammern umschließen:

<?php
$ajax = <<<EOD
/* <![CDATA[ */
Hier steht JavaScript code der eine {$this->embedded} PHP Variablen beinhaltet.
/* ]]> */
EOD;
 
JFactory::getDocument()->addScriptDeclaration($ajax);

Der JavaScript-Code muss dem Element das den Ajax-Aufruf auslöst einen Ereignishandler hinzufügen.

Dies geschieht in MooTools mit dem folgenden Aufruf:

window.addEvent('domready', function() {
    document.id('drop-down').addEvent('change', <function-declaration>);
});

Wobei <function-declaration> der JavaScript-Code ist der aufgerufen wird wenn sich der Zustand des Elements das mit drop-down identifiziert ist ändert. Beachten Sie dass Sie stets den Aufruf von addEvent verzögern sollten bis das DOM bereit ist nachdem die Seite geladen wurde. Dies geschieht indem Sie window.addEvent sagen dass es die Ajax addEvent Funktion an den onDOMReady Event hängen soll.

Sie müssen den Ajax-Aufruf nicht unbedingt mit dem onChange Ereignis verknüpfen. Zum Beispiel könnten Sie auch onClick als Auslöser nutzen.

Die <function-declaration> die Sie hinzufügen wird eine Instanziierung der MooTools Ajax-Klasse sein, ähnlich wie dies:

var myHTMLRequest = new Request.HTML({$url}, {
	method: 'get',
	update: $('ajax-container')
}).request();

wobei {$url} eine PHP-Variable ist welche die URL für den Ajax-Request enthält.

In diesem Beispiel wurde das update Argument verwendet um die gesamte Antwort des Servers in das ajax-container Element zu kopieren. Dies ist schnell und bequem aber sehr oft wollen Sie die Antwort in gewisser Weise verarbeiten bevor sie Sie dem Benutzer zeigen.

Üblicherweise ist die Antwort JSON-codiert und Sie müssen die Antwort entschlüsseln und formatieren bevor Sie den ajax-container aktualisieren. Dazu verwenden Sie statt des update Arguments besser das onComplete Argument des Ajax-Objekts.

var myJSONRemote = new Request.JSON({$url}, {
	method: 'get',
	onComplete: <completion-function>
}).request();

Wobei <completion-function> eine JavaScript-Funktion ist die aufgerufen wird, wenn eine Antwort von dem Remote-Server empfangen wird.

Typischerweise verarbeitet diese Funktion die Daten vom Server bevor Sie an das ajax-container Element übergeben werden.

Ein komplexeres Beispiel

Das folgende ist ein vollständigeres Beispiel für eine Ajax-Funktion die Daten vom Server im JSON-Format empfängt, sie dekodiert, und dann die Daten aus der Antwort in einen AJAX-Container schiebt.

window.addEvent('domready', function() {
    document.id('drop-down').addEvent( 'change', function() {
        document.id('ajax-container').empty().addClass('ajax-loading');
        var myJSONRemote = new Request.JSON({$url}, {
            method: 'get',
            onComplete: function(response) {
                var resp = JSON.decode(response);
 
                // Other code to execute when the request completes.
 
                document.id('ajax-container').removeClass('ajax-loading').setHTML(output);
            }
        }).request();
    });
});

Beachten Sie, dass in diesem Beispiel während des Requests eine ajax-loading CSS-Klasse dem ajax-container Element hinzugefügt, und anschließend entfernt wird.

Typischerweise wird durch die Präsenz dieser Klasse ein grafisches Element (ein "Spinner") als Hintergrundbild geladen damit der Benutzer weiss, dass das System noch am Leben ist. Zum Beispiel:

Einen Online-Generator für AJAX-loader Bildchen finden Sie zum Beispiel auf ajaxload.info.

Dieser Artikel basiert auf dem Artikel Ajax_client_code_using_MooTools aus der offiziellen Joomla! Dokumentation und steht unter der Joomla! Electronic Documentation License. In der Joomla! Dokumentation ist eine Liste der Autoren verfügbar.