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 jQuery, 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.

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:

<?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'];

?>
[Get Code]

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.

<input type="button" value="Daten laden" onclick="PluginLoadData();" />

<div id="ajaxTest">
    - hier soll etwas eingefuegt werden -
</div>
[Get Code]

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. jQuery liefert hierfür sehr hilfreiche Funktionen, sodass die Funktion kurz und übersichtlich gehalten werden kann.

function PluginLoadData(){
    $("#ajaxTest").load(
      "PfadZumPlugin/ajaxTestPluginServer.php",
      {cmd: 'time'}
    );
}
[Get Code]

Hier wird die $.load() Methode verwendet, die eine Kurform der $.ajax() Methode ist. Mit $("#ajaxTest") wählt man den zu befüllenden Bereich aus und hat dann schon ein jQuery-Objekt, das darauf zeigt. Die Methode .load() weiß dann, was zu tun ist, sendet ein AJAX-Request und fügt bei erfolgreichem Request die zurückkommenden Daten in das Ziel-DIV ein. Der erste Parameter von .load() ist die Adresse, von wo die Daten kommen, der (optionale) zweite Parameter definiert weitere Variablen (in diesem Fall in Form eines Javasscript-Objekts). Und es könnte sogar noch als dritter Parameter eine Funktion definiert werden, die quasi als Callback die eingehenden Daten noch einmal speziell auswertet.

Für einen allgemeineren Aufruf können natürlich auch die anderen AJAX-Funktionen von jQuery verwendet werden wie $.ajax() .

jQuery

Die einzige Javascript-Bibliothek, die von Haus aus in Stud.IP mitgeliefert wird, ist jQuery. Eine komplette Beschreibung der Möglichkeiten finden Sie in der guten Dokumentation http://docs.jquery.com/ .

 

 

Source: Basis-Wiki-Hilfe | Last change: April 28, 2010, at 01:45 PM, Krassmus | Local view: Basis-Hilfe