AJAX in Stud.IP
Die Abkürzung AJAX steht für "Asynchronous Javascript and XML" und beschreibt eine Technik, die den asynchronen Datenaustausch zwischen Browser und Server ermöglicht. Hierdurch lassen sich einzelne Elemente einer Website direkt im Browser über HTTP-Anfragen aktualisieren, ohne die komplette Seite erneut übertragen zu müssen.
Webanwendungen, die mit AJAX arbeiten, sind für den Benutzer intuitiver und flüssiger bedienbar und kommen damit in die Nähe gewöhnlicher Desktop-Anwendungen. Hinzukommt eine aufgrund des seltenen Ladens der kompletten Seite verringerte Serverlast.
Voraussetzungen
Um AJAX-Anwendungen ausführen zu können, muss der Browser JavaScript und die sogenannte XMLHttpRequest-API unterstützen. Dies ist heutzutage praktisch bei allen Browsern der Fall. Der Internet Explorer beispielsweise verfügt für letzteres seit Version 5.0 über ein ActiveX-Plugin und seit 7.0 über native Unterstützung, ohne die Notwendigkeit von zusätzlichen Plugins.
Andere Browser, beispielsweise auf der Gecko-Engine oder dem Webkit basierend, bieten ebenfalls native Unterstützung von AJAX-Anwendungen.
Obwohl die Vorraussetzungen auf Browserseite praktisch in allen Fällen erfüllt sind, ist es notwendig, dem Benutzer Alternativen zur auf AJAX basierenden Anwendung zu bieten. So wäre es zum Beispiel möglich, dass JavaScript aus Sicherheitsgründen deaktiviert ist. Auch ist genau zu überprüfen, ob eine AJAX-Anwendungen den Richtlinien des barrierefreien Internets folgen kann. Oft unterstützen die bei Sehbehinderungen eingesetzen Screenreader keine JavaScript-Funktionalitäten.
In Stud.IP steht eine globale Variable $GLOBALS['auth']->auth['jscript'] zur Verfügung, die angibt, ob der vom Benutzer verwendete Browser JavaScript unterstützt bzw. zulässt.
Bestandteile von AJAX
AJAX ist lediglich der Oberbegriff für die Kombination einer Reihe von Techniken. Hierzu gehören unter anderem:
- (X)HTML
- Document Object Model, ein Modell, über welches sich auf Objekte und Daten einer HTML-Seite zugreifen lässt
- JavaScript, um das DOM verändern zu können
XMLHttpRequest-API, für den asynchronen Datenaustausch zwischen Browser und Server
Implementierung in Stud.IP
Stud.IP verwendet das JavaScript-Framework Prototype, welches unter anderem Funktionen zur einfachen Implementierung von AJAX-Anwendungen zur Verfügung stellt. Die entsprechende Bibliothek ist standardmäßig geladen und steht direkt zur Verfügung.
Nachfolgend eine kurze Einführung in die Verwendung von AJAX in einem Plugin.
Serverseite
Auf der Serverseite sollte sich eine seperate PHP-Datei um die asynchrone Kommunikation mit dem Browser kümmern. Diese muss die Berechtigungen des Benutzers überprüfen, Anfragen des Browser entgegennehmen und Antworten auf diese zurückliefern. Im Folgenden ein Beispiel hierzu:
(:source lang=php:)
<?php
page_open(array('sess' => 'Seminar_Session', 'auth' => 'Seminar_Default_Auth', 'perm' => 'Seminar_Perm', 'user' => 'Seminar_User'));
$perm->check('autor');
if (!array_key_exists('cmd', $_REQUEST)) die;
echo date("H:i:s", time()) . " Uhr mit Befehl " . $_REQUEST['cmd'];
?>
In Zeile 3 und 4 werden zuerst die Stud.IP spezifischen Sicherheitsfunktionen aufgerufen. Es werden die aktuelle Session und die Berechtigung des Benutzers überprüft. In Zeile 6 wird dann sichergestellt, ob vom Browser in seiner Anfrage ein Parameter mit dem Namen cmd übergeben wurde. Über solche Parameter ist es möglich, Informationen vom Client zum Server zu übermitteln. Die Namen dieser Parameter, in diesem Fall cmd, sind beliebig wählbar. In diesem Beispiel wird vorausgesetzt, dass dieser Parameter vom Client übermittelt wurde. In Zeile 8 wird schließlich eine Ausgabe an den Browser zurückgesendet.
Die vorhandene Plugin-Klasse muss nun neben der normalen HTML-Ausgabe das entsprechende JavaScript an den Browser liefern und die Überprüfung auf eventuell nicht unterstütztes bzw. deaktiviertes JavaScript durchführen.
Clientseite
In der im Browser des Benutzers geladenen HTML-Seite muss dem zu veränderten Element eine eindeutige ID zugewiesen sein. Diese dient zum Zugriff auf das entsprechende Element, um es zum Beispiel zu manipulieren oder vom Server erhaltene Daten einzufügen.
In diesem Fall wird ein Button verwendet, der beim Klick auf ihn die entsprechende JavaScript-Funktion aufruft.
(:source lang=php:)
<input type="button" value="Daten laden" onclick="PluginLoadData();" />
<div id="ajaxTest">
- hier soll etwas eingefuegt werden -
</div>
Als letztes ist natürlich die JavaScript-Funktion erforderlich, die sich um die Abwicklung der HTTP-Anfrage und das Einfügen der neu erhaltenen Daten in die Seite kümmert. Prototype liefert hierfür sehr hilfreiche Funktionen, sodass die Funktion kurz und übersichtlich gehalten werden kann.
(:source lang=php:)
function PluginLoadData(){
new Ajax.Request("PfadZumPlugin/ajaxTestPluginServer.php", {
method:"get",
parameters: {cmd: 'time'},
onSuccess: function(transport){
$("ajaxTest").update(transport.responseText);
}
});
}
In Zeile 2 wird ein Ajax.Request erzeugt. Dies ist ein von Prototype zur Verfügung gestelltes Objekt, welches mit der Adresse der auf dem Server hinterlegten PHP-Datei aufgerufen wird. In Zeile 3 wird die Art der HTTP-Anfrage festgelegt und in Zeile 4 ein Parameter mit dem Namen cmd und dem Wert "time" übergeben. Wenn die Anfrage erfolgreich ist (Zeile 5) werden entsprechende Prototype-Funktionen aufgerufen, um den vom Server zurückgelieferten Text in das HTML-Element mit der ID ajaxTest einzufügen.
Protoype
Prototype ermöglicht HTML-Elementen die Zuweisung diverser Effekte mittels prototype-basierter Methoden, wodurch auch komplexere Effektketten bzw. -kombinationen kein Problem darstellen. Eine komplette API-Dokumentation ist unter http://prototypejs.org/api zu finden.
