Ajax

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Einführung

Der Begriff Ajax ist fest verbunden mit dem Begriff Web 2.0 und ermöglicht ein Desktop-ähnliches Verhalten von Webanwendungen.

Ajax ist inoffiziell eine Abkürzung für "Asynchronous JavaScript and XML". Dieser Name passt deshalb gut, da Ajax keine neue Technik definiert, sondern geschickt altbekannte Techniken kombiniert und so komplett neue Möglichkeiten schafft.

Zu den Techniken gehören, wie der Name schon sagt, Javascript und XML. Des Weiteren werden DOM und JSON benutzt. Den Begriff Ajax verwendete das erste Mal Jesse James Garrett (Mitarbeiter der Agentur "Adaptive Path") in seinem Aufsatz Ajax: A New Approach to Web Applications. Dabei war die Kombination der Techniken schon vorher bekannt und wurde auch benutzt, aber Jesse James Garrett gab der Kombination das erste Mal einen Namen und eine Vorgabe, wie sie einzusetzen wäre.

Seit diesem Zeitpunkt entwickelt sich eine breite Produktpalette von Ajax-Anwendungen und eine große Anzahl von Frameworks zur Unterstützung der Entwickler. Ajax hat einige besondere Eigenschaften, die es bei den Entwicklern so beliebt macht:

Ajax kann asynchron benutzt werden. Das heißt, dass der Benutzer einer Webanwendung ganz normal weiter arbeiten kann, auch wenn der Server zur gleichen Zeit eine Anfrage bearbeitet. Die Darstellung der Antwort kann direkt, ohne Seitenreload, in die Seite integriert werden. Dies gibt dem Benutzer ein Arbeitsgefühl, als ob er mit einem interaktiven, eventbetriebenen System, wie etwa einem Betriebssystem arbeitet. So ist es auch möglich, mit Ajax beliebig viele Serveranfragen zu stellen, ohne dass der User etwas davon bemerkt. Die Darstellung verändert sich nicht gleich und die Ergebnisse werden erst bei Bedarf ausgegeben. Ein weiterer Vorteil ist, dass der Server nur noch die direkt benötigten Daten senden muss und somit die Datenlast der Leitung reduziert wird.

Benutzung

Die Benutzung von Ajax ähnelt dem sogenannten MVC(Model-View-Controller)-Konzept. Dies ist ein Architekturmuster, das sehr verbreitet im Bereich der Softwaretechnik ist. Die Nutzung des MVC-Musters ist auch ein Indikator für eine gute Architektur, da die Bestandteile der Anwendung klar getrennt sind. Die HTML-Seite dient hierbei als "View Komponente".

Diese "View" lässt Eingaben, z.B. in ein Textfeld zu und über einen Button wird eine Funktion des Controllers zur Verarbeitung der Daten aufgerufen.

Die Controllerfunktionalität übernimmt clientseitiger Javascript-Code. Dieser Code benutzt das XMLHttpRequest-Objekt um mit dem Server zu kommunizieren. Dieses Objekt stellt die Verbindung zwischen Client und Server (Model) her. So schickt der Client über ihn eine Anfrage und erhält über ihn auch eine Antwort. Damit die Anfragen auch asynchron verarbeitet werden können, muss der Client dem Objekt eine Funktion bekannt gemacht haben, welche als Callback fungiert. Diese Funktion wird bei jedem Statuswechsel des Servers aufgerufen. Bei Statuscode 4 (Anfrage wurde bearbeitet) kann der Client dann die Antwort verarbeiten.

Als Model kann jede beliebige serverseitige Scriptsprache (PHP, ASP, Python, etc.) fungieren. Im Gegensatz zu einem normalen HTTP-Response wird aber kein HTML-Code gesendet, sondern nur die neue Information - also reine Nutzdaten.

Diese Information kann im Text (bei nur einem Wert) oder im XML- oder JSON-Datenformat (bei mehreren Werten) zurück gesendet werden. Der clientseitige Javascript-Code verarbeitet diese Daten und verändert gegebenenfalls direkt über DOM die HTML-Seitenstruktur, wodurch kein Seitenreload benötigt wird.

Anfrage an den Server

Bei Ajax werden die gleichen HTTP-Anfragemethoden zum senden von Information angeboten, wie bei normalen Webanwendungen. Also gibt es POST und GET. Beide Methoden benutzen das XMLHttpRequest-Objekt zum Senden. So ist es am Besten, eine globale Instanz zu erstellen, über die Anfragen gesendet werden können:

var request = null;

try 
{
    request = new XMLHttpRequest();
}
catch (trymicrosoft) 
{
    try 
    {
        request = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (othermicrosoft) 
    {
        try 
        {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (failed) 
        {
            request = null;
        }
    }  
}

if (request == null)
  alert("Error creating request object!");

Diese Zeilen werden am Besten in eine eigene Datei mit Namen ajax.js geschrieben und kann sie dann in jede HTML-Seite einbinden, in der man Ajax benutzen will. So steht der restlichen Javascript-Anwendung das request-Objekt zur Verfügung. Die try- und catch-Blöcke sind von Nöten, da der Internet Explorer das request-Objekt "ActiveXObject" nennt. Dies hat sich allerdings beim Internet Explorer 7 geändert, bei dem es nun auch den, durch die W3C zur XMLHttpRequest API Standardisierung vorgeschlagenen Namen, XMLHttpRequest hat. Um aber zu älteren Browsern kompatibel zu bleiben, sollte man diese Catch-Blöcke beibehalten.

Als Ausgangspunkt für eine kleine Ajax-Anwendung nehme ich folgendes HTML-Formular:

<html>
 <head>
  <title>Erste Schritte mit Ajax</title>
  <script type="text/javascript" src="ajax.js"> </script>
  <script type="text/javascript" src="spezificCode.js"> </script>
 </head>

 <body>
  <table>
   <tr><th>Wert1</th>
   <td>              <span id="value1">2000</span></td></tr>
   <tr><th>Wert2</th>
   <td>              <span id="value2">3000</span></td></tr>
   <tr><th>Wert3</th>
   <td>              <span id="value3">40000</span></td></tr>
  </table>
  <form method="POST"> <!--  <form method="GET">  --> 
   <input value="Mach was" type="button" 
    onClick="submitSomething();" /> 
  </form>
 </body>
</html>

In den spans mit den IDs "value1", "value2" und "value3" sind die Werte, welche wir an den Server senden wollen. Über diese IDs können wir sie auch erreichen. Um diese Werte nicht über die herkömmliche Methode zu senden, dürfen wir in der HTML-Form für den Button nicht den Typ "submit" angeben, sondern nur "button". Als onclick-Event wird unser Javascript-Code zum Versenden aufgerufen, welches wir für eine POST-Anfrage wie folgt definieren:

POST

function submitSomething() 
{
    // Auslesen der Eingabeparameter mit Hilfe von DOM
  
    var toPost1 = document.getElementById("value1").value;
    var toPost2 = document.getElementById("value2").value;
    var toPost3 = document.getElementById("value3").value;
  
    // Festlegung auf einen Ziel Server mit Script
  
    var url = "myServerScript.php";
  
    // Beim Objekt die Anfrage-Methode konfigurieren: POST
    // Beim Objekt die Zieladresse konfigurieren: url
    // Asynchrone an oder aus: true = an, false = aus
  
    request.open("POST", url, true);

    // Dem Objekt eine Rückrufmethode übergeben, welche bei jedem Server-Statuswechsel aufgerufen 
       wird.
  
    request.onreadystatechange = callBackFunction;
  
    // Den Anfrageheader setzen. Hier: für normalen Text
  
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  
    // Anfrage wird mit dem Parameter gestartet
  
    request.send("value1=" + escape(toPost1) +
                 "&value2=" + escape(toPost2) +
                 "&value3=" + escape(toPost3));
}

Diese Funktion wird aufgerufen, wenn man Daten an ein PHP-Script mit der Methode POST senden will.

Zuerst müssen die Eingabewerte aus der Oberfläche mit Hilfe von DOM gelesen werden.

Daraufhin gibt man mit dem Befehl "open()" an, an wen die Daten gehen, welche Methode (POST oder GET) benutzt werden soll und ob der Aufruf asynchron sein soll oder nicht.

Danach wird im Request-Objekt dem Attribut "onreadystatechange" eine vorher definierte Funktion zugewiesen, welche bei jedem Statuswechsel des Servers aufgerufen werden soll. Auf diese Funktion gehe ich noch weiter unten im Artikel ein. Danach wird der Anfrage-Header definiert. Da wir in unserem Fall nur reinen Text versenden, setzen wir den Header "Content-Type" auf "application/x-www-form-urlencoded". Im Allgemeinen ist es besser seine Anfragen als Text zu senden und nicht andere Formate wie JSON oder XML zu benutzen. Dies liegt zum Einen an dem geringeren Datenaufkommen, sowie zum anderen an der Standardisierung der POST- und GET-Parameter. So kann der Server ohne Probleme die übergebenen Parameter auslesen. Daraufhin wird in dem "request"-Objekt die Methode "send" ausgeführt und der Parameter zusammen mit den Variablennamen übergeben. Mit der Funktion "escape" werden Sonderzeichen in den Parametern maskiert.

GET

function submitSomething() 
{
    // Auslesen der Eingabeparameter mit Hilfe von DOM
  
    var toGet1 = document.getElementById("value1").value;
    var toGet2 = document.getElementById("value2").value;
    var toGet3 = document.getElementById("value3").value;
  
    // Festlegung auf einen Ziel-Server mit Script und angehängten Parametern
  
    var url = "myServerScript.php?value1=" + escape(toGet1) +
                                "&value2=" + escape(toGet2) +
                                "&value3=" + escape(toGet3);
  
    // Dem Objekt die Sende-Methode geben: Get
    // Dem Objekt die Zieladresse geben: url
    // Asynchron an oder aus: true = an, false = aus
  
    request.open("GET", url, true);

    // Dem Objekt eine Rückrufmethode übergeben, welche bei jedem Server-Statuswechsel aufgerufen
       wird.
  
    request.onreadystatechange = callBackFunction;
  
    // Den Anfrageheader setzen. Hier: für normalen Text
  
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  
    // Anfrage wird mit den Parameter null gestartet
  
    request.send (null);
}

Die Daten per GET zu versenden, funktioniert auf ähnliche Art und Weise wie mit POST. Die einzigen Unterschiede sind, dass die übergebenen Parameter mit an die URL gehängt werden, dass der open-Befehl den Parameter GET erhält und bei der send-Methode nur noch "null" übergeben wird.

Antwort vom Server empfangen

Auf der Serverseite haben wir z.B. ein PHP-Script. Dort könnte auch eine beliebige andere Websprache wie ASP, Python, oder ähnliche benutzt werden. Ich gehe hier allerdings gezielt auf PHP ein, da diese Arbeit im Rahmen des Estudy-Projekts entstanden ist, welches auf PHP basiert.

Text

Wenn der Server nur einen Wert zurücksendet, wie beispielsweise:

<?php

// Lese Parameter ein
// Mache etwas!
// speichere das einzige Ergebnis in erg
// Gebe erg zurück

echo $erg;

?>

In diesem Fall reicht es aus, nur diesen einen Wert als reinen unstrukturierten Text zurückzugeben. Wie Sie sich vielleicht erinnern, haben ich bei der Funktion submitSomething bei request-Objekt eine Funktion registriert. Diese verarbeitet jetzt den zurückgegebenen Wert:

function callBackFunction () 
{
    // Mache nur was wenn der Server mit der Bearbeitung fertig ist
    
    if (request.readyState == 4) 
    {
    	// und wir keinen Fehler bekommen
        
        if (request.status == 200) 
        {
      	    // Hole das Ergebnis als Text
            
            var response = request.responseText;
            
            // mache was!
	    // stelle das Ergebnis mit Hilfe von DOM dar.
        } 
        else 
        {
      	    // Ein Fehler ist aufgetreten und wir reagieren darauf
            
            var message = request.getResponseHeader("Status");
      	    if ((message == null) || (message.length <= 0)) 
            {
                alert("Error! Request status is " + request.status);
            } 
            else 
            {
                alert(message);
            }
       }
   }
}

Da request.onreadystatechange = callBackFunction beim Senden ausgeführt wurde, wird diese Methode bei allen 4 Serverstatuswechseln vom Webbrowser aufgerufen. Da aber nur der letzte Status von Interesse ist, also wenn das fertige Ergebnis bereitsteht, wird erst die Antwort geholt, wenn der Status den Wert 4 erreicht hat. Daraufhin wird geprüft, ob der Server auch fehlerfrei die Anfrage bearbeitet hat. Dies ist gewährleistet, wenn der Status 200 zurückkommt. Wenn dies der Fall ist, wird das Ergebnis mit response = request.responseText geholt. Wenn wir dieses Ergebnis erhalten haben, können beliebige Elemente mit Hilfe von DOM auf der Oberfläche verändert und oder das Ergebnis weiter verarbeitet werden. Wenn wir keinen Status 200 erhalten, kann nach Ermessen auf den Fehler reagiert werden, wie z.B. mit request.getResponseHeader("Status") den Status-Header auslesen.

XML

Wenn der Server mehr als ein Ergebnis zurückgibt, brauchen wir ein anderes Format um die Antwort zu verpacken. Da es hierfür aber noch keine Standardisierung gibt, können mehrere Techniken benutzt werden.. Eine davon ist XML. Wenn wir vom Server XML erwarten, muss der Server dies auch senden. Wie das funktioniert, zeige ich anhand eines PHP-Scripts, welches eine Adresse in XML zurückliefert:

<?php

// Lese Parameter ein
// Mache etwas!
//speichere das einzige Ergebnis in den Variablen nachname, vorname, strasse
// Gebe die Adresse gebündelt als XML zurück

header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

?>

<adresse>
 <nachname><? echo $nachname; ?></ nachname >
 <vorname><? echo $vorname; ?></ vorname >
 <strasse><? echo $strasse; ?></strasse>
</adresse>

Der untere XML-Block ist die Datenstruktur, die der Client bekommt. Man sieht allerdings auch, dass der Server sehr viel mehr Zeichen zu senden hat, als ohne XML-Tags. Ausgelesen wird diese Antwort vom Client wie folgt:

function callBackFunction () 
{
    if (request.readyState == 4) 
    {
        if (request.status == 200) 
        {
      	    // Die Antwort als XML Format auslesen
      	    
            var xmlResponse = request.responseXML;
      	    
            var xmlNachname = xmlResponse.getElementsByTagName("nachname")[0];
     	    var nachname = xmlNachname.firstChild.nodeValue;
      	    
            var xmlVorname = xmlResponse.getElementsByTagName("vorname")[0];
            var vorname = xmlVorname.firstChild.nodeValue;
            
            var xmlStrasse = xmlResponse.getElementsByTagName("strasse")[0];
            var strasse = xmlStrasse.firstChild.nodeValue;
	    
            // Mit DOM die Oberfläche verändern
        } 
        else 
        { 
            // Fehlerbehandlung
        }
    }
}

Wie deutlich wird, werden mit der Methode request.responseXML die Daten strukturiert ausgelesen. Wenn so verfahren wird, kann das ausgelesene XML-Objekt wie ein "DOM-Baum" behandelt werden, also die Parameter können herausgeholt und bearbeitet werden. Wie aber auch deutlich wird, ist DOM nicht sehr bequem zu benutzen.

JSON

JSON ist eine weitere Möglichkeit, mehrere Werte von einem Server strukturiert zu senden. Es hat den Vorteil, dass der Client die Daten in einer Javascript bekannten Struktur erhält, nämlich als Array. Das Array ist leichter zu verarbeiten als die DOM-Struktur bei XML. Allerdings hat der Server so mehr Aufwand diese Struktur zu erstellen. Dafür sollte man am Besten eine Bibliothek verwenden, die einem die Arbeit erleichtert. So muss sich der PHP-Programmierer nicht noch mit JSON auseinandersetzen.

Mit Bibliothek:

<?php 

require_once('JSON.php'); 

// mache was!

$json = new Services_JSON(); 

$adresse = array('nachname'=> $nachname, 
                 'vorname' => $vorname,
                 'strasse' => $strasse);

$output = $json->encode($adresse);
print($output);

?>

Ohne Bibliothek:

<?php

// mach was!

$adresse = '{"adresse":[
		{
		   "nachname":' + $nachname + 
		  '"vorname":'  + $vorname + 
		  '"strasse":'  + $strasse + 
		'}
	   ]};'
print($adresse);

?>

Das oben benutzte Paket ist ein Teil des PEAR-Projekts und kann hier heruntergeladen werden.

JSON-Pakete für andere Programmiersprachen finden Sie hier.

Wie zu sehen ist, können Sie ganz normal mit PHP-Arrays arbeiten und alles JSON-spezifische regelt die Bibliothek. Aber es wird nicht nur die Serverseite vereinfacht, sondern auch der Client hat es nun einfacher an die Werte zu kommen. Dort wird kein Paket benötigt, da die Antwort bereits im Javascript-Format vorliegt.

function callBackFunction () 
{
    if (request.readyState == 4) 
    {
        if (request.status == 200) 
        {
      	    // JSON Antwort empfangen
            
            var jsonResponse = eval('(' + request.responseText + ')');

            var nachname = jsonResponse.adresse[0].nachname; 
            var vorname  = jsonResponse.adresse[0].vorname; 
            var strasse  = jsonResponse.adresse[0].strasse; 
            
            // Mit DOM Oberfläche verändern
         } 
         else 
         {
            // Fehlerbehandlung
         }
    }
}

Die Javascript-Funktion "eval()" interpretiert den Javascript-Code, der in der Antwort enthalten ist. Mit dem hieraus resultierenden Javascript-Objekt kann man einfach auf die einzelnen Elemente zugreifen.


Quirks: String-Formatierung, JSON und BBCode

Um Text mit Sonderzeichen mit JSON zu versenden, muss man den Text zunächst etwa mittels utf8_encode() in UTF-8 umwandeln, sonst wird der Text bei der Umwandlung in ein JSON Paket abgehackt (z.B. "Brötchen" wird zu "Br").

Bei der Verwendung von BBCode tritt nun zusätzlich ein Problem auf, da es die Sonderzeichen im Text in HTML Quellcode umwandelt (z.B. wird "ä" zu "& auml;"). Wie oben beschrieben besteht der JSON-Text aber nicht aus HTML-Code, sondern aus UTF-8 kodierten Strings. Möchte man nun BBCode verwenden und den Text per JSON versenden, muss man die von BBCode erstellten HTML-kodierten Sonderzeichen wieder entfernen und in UTF-8 Strings umwandeln.

Beispiel:

$text = $bbcode->parse($originalText); 
$text = html_entity_decode($text, ENT_QUOTES, "UTF-8");

Die erste Zeile fügt dem Text BBCode hinzu, die zweite Zeile wandelt HTML-kodierte Sonderzeichen in UTF-8 um.

Frameworks

Der bis hierhin beschriebene Weg, eine Ajax-Anwendung zu schreiben, kann durch die Nutzung von Frameworks vereinfacht werden. Dies löst auch viele Probleme, indem verschiedene Browser-Eigenarten vor dem Programmierer versteckt werden. Aber nicht jedes Framework, welches den Name "Ajax" trägt, ist auch ein Ajax-Framework. Es gibt auch viele Frameworks, die zwar interaktive Oberflächen-Elemente bieten, aber auch ohne Ajax Sinn machen würden. Grob kann man die Frameworks in client- und serverseitige Frameworks aufteilen.

Clientseitig

Clientseitige Frameworks vereinfachen die Erstellung von Javascript-Code zur Nutzung von Ajax.

Prototype

Prototype kapselt die Erstellung des request-Objekts und bietet eine einheitliche Schnittstelle zur Nutzung von Ajax-Funktionalität:

// Prototype einbinden
<script type="text/javascript" src="prototype.js"></script>

var url = "myServerScript.php"; 
var request = new Ajax.Request(
url,
{
    method: ’get’,
    parameters: ’value1=10&value2=Nummer2’,
    onSuccess: callBackFunction,
    onFailure: failureFunction
}

function callBackFunction(request)
{
    var response = request.responseText;
}

function failureFunction(request)
{
    alert(‚Failure’ + request.statusText);
}

Die Funktion callBackFunction wird in diesem Fall ausgeführt, wenn eine fehlerfreie Übertragung stattgefunden hat. Wir müssen uns also nicht um den Serverstatus und -zustand kümmern. Wenn ein Fehler auftritt, wird die Methode failureFunction ausgeführt. Da das request-Objekt jedes Mal mit übergeben wird, muss es nicht global definiert werden.

Dojo

Dojo ist eine ähnliche Bibliothek wie Prototype und vereinfacht ebenfalls die Kommunikation mit dem Server.

<head>
 //title etc…
 
 // Dojo einbinden
 
 <script type="text/javascript" src="dojo.js"></script>
 <script language=“Javascript“ type="text/javascript">
	dojo.require(„dojo.io.bind);
 </script>
</head>

var arguments = 
{
    url:     ’myServerScript.php’,
    method:  ’GET’,
    content: ’value1=10&value2=Nummer2’,
    error:    failureFunction,
    load      callBackFunction
};

Dojo.io.bind(arguments);

function callBackFunction(type, value, event)
{
    var response = value.responseText;
}

function failureFunction(type, errorObject)
{
}

Als Erstes wird, wie bei Prototype, die Datei eingebunden; in diesem Fall dojo.js. Danach wird mit dojo.require angegeben, welche Pakete benutzt werden sollen. Hier brauchen wir die dojo.io.bind, welche Ajax bezogenen Code und Utilities enthält. Danach kann man ein Paket mit Argumenten schnüren, welches mit dem Befehl dojo.io.bind(arguments) an den Server versendet wird. Die angemeldete callback-Funktion muss 3 Parameter erhalten. Der erste Parameter gibt den Typ an und beinhaltet einen String wie zum Beispiel "load". Der value-Parameter beinhaltet das request-Objekt. Das event-Objekt beinhaltet Interna über den Transportweg. Meist ist nur der value-Parameter für die Nutzung von Nöten. Dojo bietet auch noch einige andere Pakete, diese enthalten unter anderem grafische Elemente .

Script.aculo.us

Script.aculo.us ist kein typisches Ajax-Framework, sondern eine Bibliothek mit UI(User Interface)-Elementen. Script.aculo.us basiert auf Prototype und nutzt dessen Ajax-Funktionalität. Das Einbinden sieht folgendermaßen aus:

<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
</head>

Nun können grafische Effekte, wie zum Beispiel Drag’n’Drop-Funktionen benutzt werden.

Rico

Rico ist eine ähnliche Bibliothek für UI-Elemente wie Script.aculo.us und benötigt auch Prototype, sowie eine Utility-Bibliothek.

Das Einbinden sieht folgendermaßen aus:

<head>
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript" src="rico.js"></script>
 <script type="text/javascript" src="util.js"></script>
</head>

Serverseitig

Serverseitige Frameworks haben den Vorteil, dass sie sich fast nahtlos an die Umgebung anpassen. Von dem Javascript, das genutzt wird, ist dann fast nichts mehr zu sehen.

Sajax

Sajax ist eine Bibliothek für PHP und weitere Websprachen. Der User muss kaum eigenen Javascript-Code schreiben und es wird auch keine extra HTML-Datei mehr benötigt. In PHP wird Sajax auf folgende Art benutzt:

<?php 

require ('Sajax.php'); 
// mache was!

function getWeltformel()
{
    // Berechnung der Weltformel mit einer Laufzeit von 2^inf
	
    return $weltformel 
}
sajax_init();
sajax_export("getWeltformel");
sajax_handle_client_request();

?>

<html>
<head>
<script type="text/javascript">

 <? php sajax_show_javascript; ?>

 function callBackFunction(weltformel)
 {
     // mache was mit DOM um die Weltformel darzustellen
 }
</script>
</head>
<body>
 <form action=““>
    <input value="Ja ich will die Weltformel" 
	   type="button" 
           onClick="x_getWeltformel(callBackFunction);" /> 
 </form>
</body> 

</head>
</html>

Mit require (’Sajax.php’) wird Sajax eingebunden. Danach wird die Funktion, die etwas berechnen soll, definiert, Sajax initialisiert und die Funktion mit EXPORT bei Sajax angemeldet. Die Funktion sajax_handle_client_request() ist für die Kommunikation der exportierten Funktionen zum Client zuständig. Im HTML-Bereich sagen wir Sajax mit <?php sajax_show_javascript; ?>, dass die mit EXPORT angemeldeten Funktionen als Javascript in den Code eingefügt werden sollen. Jetzt wird die callback-Funktion definiert. Wenn wir die exportierte Funktion aufrufen wollen, müssen wir als Prefix „x_“ benutzen, da Sajax unsere definierte Funktion auf diese abbildet.

Diskussion

Jetzt wissen Sie, wie man Ajax anwendet. Die entscheidende Frage ist aber:

WANN soll ich es anwenden? Denn mit all den Vorteilen gibt es natürlich, wie bei Allem, auch Nachteile.

Um einen Überblick über die Eigenheiten von Ajax zu bekommen, folgt nun eine Auflistung von Vor- und Nachteilen:

Vorteile

  • Es werden (fast) nur Nutzdaten übertragen und keine statisches HTML.
  • Es gibt keinen Seitenreload.
  • Die HP ist während der Anfragebearbeitung ansprechbar.
  • Es können auch Daten gesendet und empfangen werden, ohne dass sich etwas an der Seite ändert bzw. der User etwas mitbekommt.
  • Es werden keine Browser-Plugins benötigt.
  • Es gibt viele Frameworks, die einen unterstützen.

Nachteile

  • Lesezeichen sind kaum möglich.
  • Zurück-Button sind nur mit viel Javascript-Aufwand möglich.
  • Der User bekommt keine Rückmeldung, während etwas bearbeitet wird.
  • Webseiten-Ersteller müssen sich sehr gut mit DOM auskennen.
  • Javascript muss aktiviert sein.
  • Die Barrierefreiheit kann darunter leiden.
  • Die Last des Servers könnte steigen, da jede Anfrage einen Thread erzeugt.

Anwendungsmöglichkeiten im Estudy

Jetzt wissen wir, wie man die Technik Ajax benutzt und welche Vor- und Nachteile diese hat. Die Frage ist nun wie und wo wir sie im Estudy einsetzen sollen/können, um davon einen Nutzen zu erhalten. Dabei werde ich nicht auf grafische Elemente eingehen, sondern allein auf die Ajax-Technologie, wie ich sie im Artikel vorgestellt habe.

Die Frage, wie wir die Technik am Besten einsetzen können, ist relativ einfach zu beantworten:

Hier bietet sich ein serverseitiges PHP Framework, wie Sajax oder Xajax (welches in dem Artikel nicht vorgestellt wurde) an. Bei diesen ist der Aufwand der Einpflegung in den bestehenden PHP Code simpel zu gestalten.

Die zweite Frage ist, wo man Ajax einsetzen kann. Dies ist nicht ganz so einfach zu beantworten:

Einerseits könnte das gesamte Projekt auf Ajax umgestellt werden, was einen riesigen Aufwand bedeuten würde. Der Nutzen, den man daraus ziehen kann, wäre ein "angenehmeres Gefühl", bei der Benutzung der Homepage. Dem stehen aber auch die weiter oben genannten Nachteile, wie zum Beispiel mit Lesezeichen und dem Zurück-Button, welche beim "normalen" Surfen gerne benutzt werden, entgegen.

Eine zweite Möglichkeit wäre Ajax gezielt einzusetzen:

Dabei würde sich zum Beispiel die Uploadfunktionalität von Dateien anbieten, um den User nicht auf die Fertigstellung eines Uploads warten zu lassen. Der Status der Datei, während des Uploads, könnte "wird geladen" heißen. Die Datei wird zum Download erst freigegeben, wenn sie fertig geladen ist. Natürlich muss der User aber auch die Möglichkeit haben, z.B. über einen Button den Upload abzubrechen, da dieser durch Ajax sonst keinerlei Einfluss-Möglichkeiten mehr hätte. Wie das gemacht werden kann, wird in diesem Artikel erklärt.

Das Versenden von "Private Messages" oder Emails könnte mit Ajax vom User entkoppelt werden.

Die Mitglieder-Suche könnte dynamisch die Liste während der Eingabe aktualisieren.

Es gibt sicher noch viele weitere Möglichkeiten, aber im Grunde können schon einige grundlegende Merkmale und daraus resultierende Einsatzbereiche erkannt werden, bei denen Ajax Vorteile bietet:

  • Wenn Operationen sehr lange dauern, aber der User nicht direkt zur weiteren Bearbeitung auf das Ergebnis angewiesen ist.
  • Wenn eine Anfrage nur kleine Änderungen an der Seite macht und keine komplett neue Seite gebraucht wird.
  • Wenn der User Eingaben in einer Suchmaske macht o. ä. und parallel Änderungen an der Oberfläche erfolgen sollen.

Literatur

Weblinks

Ressourcen


--Schwede-MSc 19:13, 15. Mär. 2007 (CET)