SideBarMenu

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

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. Normalerweise wird das einfach eine Plugin-Action sein (kann aber auch eine einzelne PHP sein). Zum Beispiel:

class MyPlugin extends StudIPPlugin implements SystemPlugin {

    public function insert_action()
    {
        $output = array('html' => "<p>Button wurde gedrückt um".date("G:i", Request::get("time"))." Uhr</p>");
        echo json_encode(studip_utf8encode($output));
    }

}

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>

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(
        STUDIP.ABSOLUTE_URI_STUDIP + "plugins.php/myplugin/insert",
        {time: Math.floor(Date.now() / 1000)}
    );
}

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 wichtigste 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/ .

Letzte Änderung am 28.04.2015 13:37 Uhr von Krassmus.