Websiteentwicklung: AJAX/ Druckversion

Vorwort

Lieber Leser, liebe Leserin,

AJAX ist ja eigentlich nichts Neues. Es ist nur eine geschickte Kombination von Javascript und serverseitiger Programmierung unter Verwendung eines proprietären DOM-Objektes XMLHttpRequest. Deswegen steht dieses Buch auch ganz am Schluss der Buchreihe: Hier wird vieles kombiniert, was Sie bisher erlernt haben.

Die Methode eignet sich pauschal dazu, interaktivere alternative Zugänge bei lokalen, nicht öffentlich zugänglichen Projekten zu ermöglichen, kann öffentlich eingesetzt aber auch sehr leicht mißbraucht werden, um Inhalte unzugänglich zu machen oder bestimmte Nutzer auszuschließen und zu diskriminieren. Gleichwohl kann mit der Methode für bestimmte Nutzergruppen auch ein leichter verständlicher alternativer Zugang zur Information ermöglicht werden, etwa wenn diese Nutzergruppen besonders darauf angewiesen sind, durch massive Interaktion die eigene Aufmerksamkeit auf ein Projekt zu fokussieren und sich nicht leicht ablenken zu lassen, weil sie bei statischen Inhalten und komplizierteren Sinnzusammenhängen oft zu Konzentrationsschwächen neigen.

Zu beachten ist bei allgemein veröffentlichten AJAX-Anwendungen immer, dass diese unbedingt so umzusetzen sind, dass der Inhalt auch ohne die Interpretation von AJAX immer komplett zugänglich ist. Viele tatsächlich veröffentlichte AJAX-Anwendungen genügen dieser Minimalanforderung nicht. Die in diesem Buch aufgeführten Beispiele sind hinsichtlich Barrierefreiheit und Zugänglichkeit auch nicht für ein allgemeines Publikum gedacht und geeignet. Vor einer Veröffentlichung einer Anwendung ist also immer eingehend zu prüfen, dass mit dieser Technik nicht Barrieren künstlich geschaffen werden, die es bei einem ohne die Methode realisierten Projekt gar nicht gegeben hätte. Siehe dazu auch das Buch Barrierefreiheit und Benutzbarkeit.

Die Arbeit beim W3C zu einer Empfehlung zu XMLHttpRequest wurde Oktober 2016 mit Veröffentlichung einer Note eingestellt, es hat also nicht zu einer Empfehlung gereicht. Demzufolge sollte dieses Objekten im öffentlichen Betrieb nicht verwendet werden. Die Note: XMLHttpRequest Level 1. Es gibt also keine gültige W3C-Empfehlung oder Spezifikation für diese Methode, die die Grundlage von AJAX ist, die Methode ist also als experimentell anzusehen, somit ungeeignet für allgemein veröffentlichte Projekte.

Natürlich kann und darf man damit unbedenklich bei nicht öffentlichen Projekten herumprobieren, lediglich in diesem Sinne: Viel Spaß beim Ausprobieren!

Was ist AJAX?

AJAX ist ein englisches Apronym für die Wortfolge „Asynchronous JavaScript and XML“, das man grob übersetzen kann mit: "asynchrones Nachladen von Javascript plus dynamische Manipulation der DOM". Das X steht dabei eigentlich für XML, in der Praxis ist es aber eher ein Platzhalter: die Daten werden in X verschiedenen Formaten vom Server zum Client geladen.

Der Begriff wurde von Jesse James Garrett geprägt, siehe [1].

Das erste eingängige Beispiel ist vielleicht Google Suggests.

Bei klassischen Web-Applikationen sieht der Ablauf so aus:

• URL eintippen
• Warten (Webformular wird geladen*)
• Formular ausfüllen
• Formular ausfüllen
• Formular ausfüllen
• Formular absenden
• Warten (Antwort wird geladen*)

Nur bei den mit Sternchen markierten Stellen passieren Datenübertragungen zwischen Server und Client - während die UserIn das Formular ausfüllt also gar nicht. Mit AJAX ändert sich das:

• URL eintippen
• Warten (Webformular wird geladen*)
• Formular ausfüllen (Liste nachladen*)
• Formular ausfüllen (Feld speichern*)
• Formular ausfüllen (Bild austauschen*)
• Formular absenden
• Warten (Antwort wird geladen*)

Die Technologien

AJAX vereinigt alle Technologien, die Sie in diesem Wikibook kennen gelernt haben:

• Eine Seite wird per HTML und CSS dargestellt
• Javascript setzt asynchrone XMLHttpRequests ab und definiert die Callback-Funktionen
• Der Server empfängt eine HTTP-Anfrage und bearbeitet sie.
• Per Javascript werden die Serverantworten mit Hilfe von DOM in die Seite integriert.

Entwicklungsumgebung für AJAX

Um erfolgreich AJAX-Applikationen zu entwickeln empfiehlt sich die Verwendung eines AJAX-fähigen Debuggers wie z.B. der Firebug-Erweiterung von Firefox:

• Firebug für Firefox

Libraries und Frameworks für AJAX

Sie können AJAX auf verschiedenen Ebenen entwickeln:

Eigenbau

Sie schreiben selbst in Javascript. Dabei müssen Sie selbst die Browser-Unterschiede des XMLHTTPRequest-Objekts behandeln - nicht zu empfehlen

Clientseitige Bibliothek

Sie verwenden eine Bibliothek (engl. library), die das XMLHTTPRequest-Objekt kapselt, so dass Sie browserunabhängig arbeiten können. Sie schreiben auf der Webseite Javascript-Code und separat davon ein serverseitiges Programm. Beispiel: prototype.js

Framework mit Mapping

Sie verwenden ein Framework, das Javascript mit Ihrer bevorzugten serverseitigen Programmiersprache verbindet: Ein Javascript-Funktionsaufruf mit Javascript-Datentypen als Argumente wird z.B. automatisch in einen PHP-Funktionsaufruf umgesetzt (mit PHP-Datentypen als Argumente). Beispiel: Mybic für PHP, crVCL PHP Framework.

Framework, das Javascript generiert

Sie verwenden eine serverseitige Programmiersprache, die fertige AJAX-Komponenten anbietet, ohne dass Sie dafür Javascript programmieren müssen. Beispiel: Ruby on Rails.

Toolkit, das Javascript generiert

Sie verwenden clientseitig Ihre bevorzugte Programmiersprache (inkl. z.B. gewohnter IDE, Debug- und Testumgebung) und einen Compiler, der den Quellcode dieser Sprache in Javascript übersetzt. Beispiel: GWT (Google Web Toolkit)

Links

•  Ajax
• Artikel von Jesse James Garrett
• Deutsche Ajax-Einführung (Deutsch)

AJAX-Applikationen kennen lernen

Bevor Sie selbst AJAX-Applikationen entwickeln, sollten Sie möglichst viele Applikationen studieren, und sich mit den wichtigsten Ideen vertraut machen:

EtherPad

ist ein Editor zur kollaborativen Bearbeitung von Texten in Echtzeit, wobei alle Änderungen sofort bei allen Teilnehmern sichtbar werden.

Google Suggest

Eingabe wird automatisch vervollständigt

flickr

Metainformationsbasiertes Online Fotoverzechnis, die Benutzer können ihre eigenen Schappschüsse hinzufügen, Drag-and-Drop-Menü

Charakterplaner WoW

Suche mit AJAX, drag-and-drop

Gollum

Suche mit AJAX

Xing (OpenBC)

Liste der möglichen Verbindung zu einer fremden Person wird mit AJAX nachgeladen

MeinProf.de

Wenn man einen neuen Prof einträgt wird per AJAX nachgefragt, ob er schon in der Datenbank ist

netvibes

Desktop in AJAX. Einzelne Fenster können mit drag-and-drop verschoben werden. Feeds werden regelmäßig frisch angezeigt

google maps

Beim Scrollen werden fehlende Teile der Landkarte mit AJAX nachgeladen

google spreadsheet

Gesamte Tabellenkalkulation in AJAX

neximage

Vollständiges Bildbearbeitungsprogramm mit AJAX

PantherMedia

Erste deutsche Online Microstock Bildagentur (Suche und Warenkorb in AJAX)

Übung

Öffnen Sie Firebug und beobachten Sie bei der Benutzung der verschiedenen Applikationen, wann eine AJAX-Anfrage erfolgt.

Links

• Ajax Examples aus dem Wiki Ajax Design Patterns

Google Maps verwenden

Google Maps ist eine ausgereifte Applikation, die sehr viel AJAX verwendet. Über die Google Maps API (Programmierschnittstelle) kann man diese Applikation in eigenen Webseiten oder Web-Applikationen einbinden. Im einfachsten Fall - Landkarte anzeigen - ist das eine Arbeit von 5 Minuten.

Die Benutzung der Maps API ist derzeit kostenlos. Wenn man die Landkarte unter der Domain http://www.beispiel.at online stellt, muss man sich zuerst von Google einen dazu passenden Key geben lassen - das ist einfach eine Zeichenkette, die dann in einer Variable im Programm gespeichert wird.

Zum Testen Ihrer Webseite brauchen Sie keinen Webserver. Sie können die Datei im Browser direkt öffnen, so dass der Browser als Adresse eine URL anzeigt, die mit file:/// beginnt. Das hat den Vorteil, dass Sie dafür noch keinen API-Key brauchen. Wenn die URL mit http:// beginnt, z.B. http://localhost/, brauchen Sie einen Key.

Die Dokumentation zu dieser API ist derzeit nur auf Englisch erhältlich.

Eine erste Landkarte

Das erste Beispiel lädt die Landkarte von Salzburg in eine div namens karte.

  <script src="http://maps.google.com/maps?file=api&v=2&key=ichbinkeinkey"
            type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[
  function karteladen() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("karte"));
      map.setCenter(new GLatLng(47.810001, 13.039999), 9);
    }
  }
  //]]>
  </script>
  </head>
  <body onload="karteladen()" onunload="GUnload()">
  <div id="karte" style="width: 500px; height: 300px"></div>

In der ersten Zeile wird Javascript vom Google-Server geladen. Hier sehen Sie die Stelle an der Sie den Key angeben können falls Sie die Seite dann auf einem Webserver veröffentlichen wollen.

Die selbstgeschriebene Funktion karteladen verwendet mehrere Befehle aus der Google Maps-API: Zuerst wird getestet ob der Browser überhaupt zu Google Maps kompatibel ist. Dann wird eine neue Landkarte auf Basis der div karte erzeugt. Anschließend wird diese Landkarte auf einen bestimmten Punkt (in Längen- und Breitengrad) zentriert. Die Zahl 9 gibt den Zoom-Level an, also wie groß der Kartenausschnitt ist. Mögliche Werte sind 1 bis 14.

Die Karte sieht zwar statisch aus, bietet aber schon Interaktions-Möglichkeiten: die LeserIn kann mit der Maus die Karte ziehen, und so einen anderen Kartenausschnitt wählen.

Landkarte steuern

Bisher wirkte die Landkarte statisch. Damit die LeserIn weiß, dass Sie rein- und raus-zoomen kann, bringen wir nun Steuerelemente an:

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();

Mit dem zweiten Steuerelement kann die LeserIn zwischen Satelliten-Karte und Straßen-Karte hin und her schalten. Mit map.enableScrollWheelZoom() wird das Zoomen mit dem dem Mausrad ermöglicht.

Links

• Google Maps API Dokumentation

Erstes Programm

Das erste Beispiel soll nur die Datenübertragung zwischen Client und Server illustrieren, es macht also noch nichts sinnvolles. Wenn der Button gedrückt wird, wird vom Webserver Datum und Uhrzeit abgefragt und angezeigt.

HTML

Die Webseite enthält als HTML-Code einen Button zum Starten des AJAX-Aufrufs, und ein leeres div um das Ergebnis aufzunehmen.

 <input type="button" value="tu ajax" onClick="hol_datum()">
 <br />
 <div style="width:400px; border: 1px black solid;" id="output">
 .... noch nix ....
 </div>

JavaScript

Ajax-Objekt erzeugen

Im JavaScript-Code der Seite legen wir uns die Funktion hol_datum() an, auf welche sich das onclick-Attribut des Buttons im HTML-Teil der Seite bezieht. Sie erzeugt zuerst das Objekt myAjax. Hierbei wird geprüft, ob der Browser das Objekt window.XMLHttpRequest unterstützt. Beim Internet Explorer 5 und 6 ist dies nicht der Fall. Deshalb wird ein Fallback via ActiveX ergänzt:

 function hol_datum(){
  if (window.XMLHttpRequest){
   //Erzeugung des Objektes für alle Browser außer IE5 und IE6.
   myAjax = new XMLHttpRequest();
  }else{
   //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obige Schreibweise nicht unterstützen.
   myAjax = new ActiveXObject("Microsoft.XMLHTTP");
  }

 }

Statusänderungen der Anfrage überwachen

Kann weggelassen werden, wenn keine Antwort vom Server erwartet wird.

Bevor wir eine Anfrage an den Server schicken können, sollten wir festlegen, was geschieht, wenn sich der Status der Anfrage ändert bzw. was geschieht, wenn eine Antwort vom Server ankommt. Hierzu gibt es das Attribut onreadystatechange:

 myAjax.onreadystatechange=function(){ [...] };

Wichtig: Wenn Sie beim Attribut onreadystatechange eine bereits existierende Funktion angeben, dürfen Sie keine Klammern verwenden. Das würde die Funktion sofort ausführen, nicht erst wenn die Daten vom Server empfangen wurden:

Falsch:

 myAjax.onreadystatechange=StatusAenderung();

Richtig:

 myAjax.onreadystatechange=StatusAenderung;

Daten empfangen

Die bei der Statusänderung aufgerufene Funktion soll nun prüfen, ob die Daten vollständig geladen wurden (myAjax.readyState==4) und dass bei der Übertragung via HTTP keine Fehler auftraten (myAjax.status==200). Wenn beides der Fall ist, wird der responseText vom Server (also dessen Antwort) in den DIV-Container output geschrieben:

 myAjax.onreadystatechange=function(){
  if (myAjax.readyState==4 && myAjax.status==200){
   document.getElementById("output").innerHTML=myAjax.responseText;
  }
 };

Das readyState-Attribut kann folgende Werte annehmen:

• 0 - Es wurde noch nichts gesendet bzw. empfangen.
• 1 - Die Verbindung zum Server wurde hergestellt, es wurden aber noch nicht alle Daten übertragen.
• 2 - Alle Daten wurden zum Server übertragen.
• 3 - Eine Antwort vom Server wird zur Zeit empfangen
• 4 - Alle Daten vom Server wurden empfangen.

Request absenden

Nachdem wir festgelegt haben, was der Browser mit der Antwort des Servers macht, können wir eine Anfrage an den Server senden. Dazu rufen wir die Methode open auf, welche bis zu 5 Argumente erwartet, wobei die letzten 3 Argumente nicht zwingend erforderlich sind:

1. Art der Datenübertragung via HTTP (in unserem Beispiel: 'GET'):
   • 'GET' (Datei anfordern) oder
   • 'POST' (Datei anfordern und Formulareingaben senden)
2. Die URL der Zieldatei (in unserem Beispiel: 'datum.php')
3. Soll das Skript pausiert werden, oder weiterlaufen, solange die Anfrage läuft (Boolean)? Hier sollte 'true' stehen (Skript wird nicht pausiert), da wir ja einen Eventhandler definiert haben (onreadystatechange), der aktiv wird, wenn sich der Status der Abfrage ändert.
4. Benutzername für die HTTP-Anfrage (wird nur selten benötigt)
5. Passwort für die HTTP-Anfrage (wird nur selten benötigt; Achtung: Sollte hier ein Passwort stehen, ist es für jeden Nutzer einer Website beim Betrachten des Quellcodes sichtbar!)

Mit der 'send'.Methode wird die Anfrage schließlich versendet:

  myAjax.open("GET","datum.php",true);
  myAjax.send();

Parameter übergeben

Das übermitteln von Parametern ist mit GET am einfachsten. Hierzu werden diese einfach an die URL in der open-Methode angehängt. Bsp:

 myAjax.open("GET","registrierung.php?name=Max&nachname=Mustermann",true);

PHP

Das serverseitige Programm können Sie in jeder beliebigen Sprache schreiben, sein Output muss nur ein HTML-Fragment sein. Hier eine PHP-Version des Programmes ('datum.php'):

<?php
   echo "Jetzt ist es " . date("r");
?>

Das fertige Projekt

Die fertige Website sieht nun folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Wikibooks-Ajax-Tutorial</title>
 <script type="text/javascript">

  function hol_datum(){
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }

   myAjax.onreadystatechange=function(){
    if (myAjax.readyState==4 && myAjax.status==200){
     document.getElementById("output").innerHTML=myAjax.responseText;
    }
   };

   myAjax.open("GET","datum.php",true);
   myAjax.send();
  }

 </script>
</head>
<body>
 <input type="button" value="tu ajax" onClick="hol_datum()"><br>
 <div style="width:400px; border: 1px black solid;" id="output">.... noch nix ....</div>
</body>
</html>

Übungsprojekt

Erstellen Sie ein JavaScript-Programm, das bei Laden der Seite (einmal) aufgerufen wird, und Browsernamen, Browserversion und Bildschirmgröße per AJAX an den Server meldet. Dort sollen die Daten in einer Log-Datei gespeichert werden. So können Sie eine Statistik über die Browser Ihrer LeserInnen führen.

Links

• Quick Guide to Prototype (Englisch)
• Einführung in Ajax mit vielen Beispielen auf w3schools.com (Englisch)
• Einführung in Ajax auf HTML-World.de

Fehlerbehandlung

Bisher haben wir angenommen, dass alles funktioniert: der Server ist erreichbar, das serverseitige Programm läuft, die Daten werden korrekt übertragen. Nun werden wir mögliche Fehler behandeln, und der UserIn mehr Feedback über den Status des Programmes geben.

Bitte Warten...

Wenn das Laden vom Server einmal etwas länger dauert, soll der Leser trotzdem wissen, dass etwas passiert. Die Statusanzeige des Browser hilft nicht, da diese für Anfragen mit dem XMLHTTPRequest-Objekt nicht aktiviert wird. Wir müssen uns also selbst eine Status-Anzeige bauen:

Die Statusanzeige selbst besteht aus einem animierten gif. Dieses Bild ist immer in der Webseite vorhanden, aber mit der Style-Anweisung visibility:collapse unsichtbar geschaltet:

 <img id="bittewarten" src="bittewarten.gif" style="visibility:collapse;">

In unsere JavaScript-Funktion hol_datum() fügen wir also die Befehle zum Anzeigen bzw. Nichtanzeigen der GIF-Grafik ein. Außerdem schreiben wir in unseren output-Container "Wird geladen":

 function hol_datum(){
  document.getElementById("output").innerHTML = "Wird geladen";
  document.getElementById("bittewarten").style.visibility = "visible";

  if (window.XMLHttpRequest){
   myAjax = new XMLHttpRequest();
  }else{
   //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
   myAjax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  myAjax.onreadystatechange=function(){
   if (myAjax.readyState==4 && myAjax.status==200){
    document.getElementById("output").innerHTML=myAjax.responseText;
    document.getElementById("bittewarten").style.visibility = "collapse";
   }
  };

  myAjax.open("GET","datum.php",true);
  myAjax.send();
 }

Fehler in ein Log-Fenster schreiben

Für die weiteren Programme schreiben wir uns die Funktion log_error, die den übergebene (Fehler-)Text in ein div am Ende der Webseite schreibt. Dieses div muss ebenfalls im HTML-Code erzeugt werden:

Die Funktion log_error

function log_error ( t ) {
  document.getElementById("log").innerHTML += t + "<br />";
}

Der DIV-Container log

<div id="log"></div>

AJAX-Aufruf nicht möglich

Der erste Fehler, der auftreten kann, ist ein Fehler beim Erzeugen des Ajax.Request-Objekts. Diese Art von Fehler kann direkt in der Funktion hol_datum() abgefangen werden. Dort wird einfach geprüft, ob das Ajax-Objekt nicht definiert wurde:

function hol_datum(){
 document.getElementById("output").innerHTML = "Wird geladen";
 document.getElementById("bittewarten").style.visibility = "visible";

 if (window.XMLHttpRequest){
  myAjax = new XMLHttpRequest();
 }else{
  //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
  myAjax = new ActiveXObject("Microsoft.XMLHTTP");
 }

 if(!myAjax) log_error("Das Ajax-Objekt wird von diesem Browser nicht unterstützt!");

 myAjax.onreadystatechange=function(){
  if (myAjax.readyState==4 && myAjax.status==200){
   document.getElementById("output").innerHTML=myAjax.responseText;
   document.getElementById("bittewarten").style.visibility = "collapse";
  }
 };

 myAjax.open("GET","datum.php",true);
 myAjax.send();
}

Server nicht erreichbar

Sollte der Server nicht erreichbar sein, erhalten wir keine HTTP-Rückmeldung. Dies können wir im Eventhandler onreadystatechange prüfen. Hier prüfen wir gleich mit, ob die Seite nicht vorhanden ist (Fehler 404) oder ob der Server überhaupt nicht geantwortet hat (HTTP-Status-Code ist '0'):

myAjax.onreadystatechange = function(){
 if(myAjax.readyState==4){
  switch (myAjax.status){
   case 200:
    document.getElementById("output").innerHTML=myAjax.responseText;
    document.getElementById("bittewarten").style.visibility = "collapse";
    break;
   case 404:
    log_error("Die angeforderte Datei ist nicht verfügbar!"); break; //(HTTP-Status-Code ist '404')
   case 0:
    log_error("Der Server antwortet nicht!"); break; //(HTTP-Status-Code ist '0')
   default:
    log_error("Es ist ein unbekannter Fehler aufgetreten!"); break; //(HTTP-Status-Code ist nicht '200')
  }
 }
};

Dieser Fehler tritt u.A. auch dann auf, wenn man eine Anfrage an einen 'fremden' Server stellen will. In diesem Fall besitzt man nicht genügend rechte, um die Anfrage durchzuführen.

Fehler im PHP-Skript

Ein Fehler im PHP-Skript (in unserem Beispiel: datum.php) wird von dem obigen Abfragen nicht erkannt. Hierzu können wir allerdings die Antwort des Servers nach dem Wort 'error' durchsuchen:

  switch (myAjax.status){
   case 200:
    document.getElementById("output").innerHTML=myAjax.responseText;
    document.getElementById("bittewarten").style.visibility = "collapse";
    if ( myAjax.responseText.search(/error/) != -1 ) log_error("Error im PHP-Skript!");
    break;
   case 404:
    [...]

Das fertige Projekt - v2

Die fertige Website inklusive der Fehlerbehandlung sieht nun folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Wikibooks-Ajax-Tutorial</title>
 <script type="text/javascript">
  function hol_datum(){
   var myAjax;
   document.getElementById("output").innerHTML = "Wird geladen";
   document.getElementById("bittewarten").style.visibility = "visible";
 
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   if(!myAjax) log_error("Das Ajax-Objekt wird von diesem Browser nicht unterstützt!");
   
   myAjax.onreadystatechange = function(){
    if(myAjax.readyState==4){
     switch (myAjax.status){
      case 200:
       document.getElementById("output").innerHTML=myAjax.responseText;
       document.getElementById("bittewarten").style.visibility = "collapse";
       if ( myAjax.responseText.search(/error/) != -1 ) log_error("Error im PHP-Skript!");
       break;
       case 404:
       log_error("Die angeforderte Datei ist nicht verfügbar!"); break; //(HTTP-Status-Code ist '404')
      case 0:
       log_error("Der Server antwortet nicht!"); break; //(HTTP-Status-Code ist '0')
      default:
       log_error("Es ist ein unbekannter Fehler aufgetreten!"); break; //(HTTP-Status-Code ist nicht '200')
     }
    }
   };

   myAjax.open("GET","datum.php",true);
   myAjax.send();
  }

  function log_error ( t ) {
   document.getElementById("log").innerHTML += t + "<br />";
  }
 </script>
</head>
<body>
 <input type="button" value="tu ajax" onClick="hol_datum()"><br>
 <div style="width:400px; border: 1px black solid;" id="output">.... noch nix ....</div>
 <img id="bittewarten" src="bittewarten.gif" style="visibility:collapse;">
 <div id="log"></div>
</body>
</html>

Hinweis: Beim Programmieren einer 'echten' AJAX-Applikation ist die Ausgabe des Fehlers in einen DebugLog nicht genug, hier ist eine gut lesbare und für Nicht-Programmierer leicht verständliche Fehlermeldung zu formulieren.

Komponenten für Formulare

Verwendete Javascript-Librarys

Als Javascript-Librarys werden ab sofort die JavaScript-Klassenbibliotheken Prototype und Scriptaculous verwendet und im Head des Dokuments eingebunden:

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

Die Datei prototype.js ist ein offenes Framework und muss zuerst von der Seite des Herstellers heruntergeladen werden.

Für alle Komponenten außer der ersten brauchen wir Scriptaculous, eine weitere Javscript-Library, die auf Prototype aufbaut. Scriptaculous besteht aus sieben Javascript-Dateien, die alle im selben Ordner zur Verfügung stehen müssen. Geladen wird nur die Prototype-Datei und die Hauptdatei von Scriptaculous. Scriptaculous steht auf der Seite des Herstellers zum Download bereit.

Regelmäßig nachladen und anzeigen

Sie wollen regelmäßig alle zwei Sekunden den Status Ihres Servers neu anzeigen lassen? Dafür gibt es den Ajax.PeriodicalUpdater in Prototype.

var myAjax = new Ajax.PeriodicalUpdater(
    {success: 'output'}, 'serverstatus.php', {method: 'get'}
);

Das erste Argument enthält die ID einer div, in der die Ergebnisse angezeigt werden sollen - hier output. Das zweite Argument ist das Programm am Server, das aufgerufen wird. Und das dritte Argument kann wieder weitere Optionen enthalten, hier nur die Methode get.

Falls es auf Ihrem Server noch keinen interessanten Status abzufragen gibt, dann können Sie mit folgendem Script 5 zufällig ausgewählte Umgebungs-Variablen anzeigen lassen:

  <?php
    $keys = array_keys( $_ENV );

    shuffle($keys);

    echo("<ul>");
    $i = 0;
    while($i < 5) {
        $k = $keys[$i];
        echo("<li><b>$k</b>: $_ENV[$k]");
        $i++;
    }
    echo("</ul>");
    ?>

Weitere Optionen für den PeriodicalUpdater wären:

• frequency - Wie oft soll das Update erfolgen, in Sekunden, Standardwert ist 2
• decay - Faktor für die Verlangsamung der nächsten Anfrage, falls sich der Output des Serverprogrammes nicht verändert hat

Editierbarer Text

Durch einen Klick wird aus einer normalen Zeile Text ein Eingabefeld. Die Eingabe wird über einen AJAX-Anfrage gespeichert, dann verwandelt sich das Feld wieder in Text:

Der Text, der editierbar sein soll, wird mit einer id gekennzeichnet, ein Ajax.InPlaceEditor Objekt wird erstellt, das diese id mit einem serverseitigen Skript verbindet.

  <p id="editme">Click me, click me!</p>
  <script type="text/javascript">
    new Ajax.InPlaceEditor('editme', 'textspeichern.php');
  </script>

Achtung: new Ajax.InPlaceEditor muss im Code nach dem entsprechenden Element kommen, Sie können diesen Befehl also nicht in den Head kopieren.

Das Serverseitige Skript erhält seinen Input als Parameter value. Es kann den Text speichern, und eventuell noch verändern. Der Output des serverseitigen Skripts wird im Endeffekt als Text auf der Webseite angezeigt. Die einfachste Version (ohne speichern) wäre also:

  <?php
    echo $_REQUEST['value'];
   ?>

Siehe scriptaculous Doku.

Textfeld mit Auto-Vervollständigung

Auto-Vervollständigen mit AJAX bedeutet: Der User beginnt etwas in das Textfeld einzutippen. Der erste Buchstabe wird per AJAX an den Server geschickt, der Server antwortet mit einer Liste von Vervollständigungs-Vorschlägen. Diese Vorschläge werden im Browser angezeigt, der User kann einen davon durch Klick auswählen.

Das Textfeld für die Auto-Vervollständigung muss einen namen und eine id haben. Ausserdem muss eine leere div vorhanden sein, in der die List der Vervollständigungs-Vorschläge später angezeigt wird. Diese div hat die Klasse auto, eine eindeutige id, und eine Style-Anweisung um sie unsichtbar zu machen:

 <input name="nachname" id="nachname"><div id="auto1" class="auto" style="display:none;"></div>

Aus diesen Elementen kann nun mit einem Befehl ein Textfeld mit Auto-Vervollständigung gemacht werden:

 <script>
  new Ajax.Autocompleter('nachname', 'auto1', 'emailnachschlagen.php', {});
  </script>

Achtung: new Ajax.Autocompleter muss im Code nach dem Eingabefeld und der div kommen, Sie können diesen Befehl also nicht in den Head kopieren.

Der Server sollte als Antwort wirklich eine Liste im HTML-Sinne liefern, z.B.:

 <ul>
      <li>Querhuber</li>
      <li>Quermaier</li>
      <li>Quermüller</li>
      <li>Quermüller-Querhuber</li>
  </ul>

Mit einem Stylesheet wird diese Liste verfeinert:

  <style>
  input#nachname {
    width: 150px;
    background: #fff;
  }
  div.auto{
    width: 150px;
    background: #fff;
  }
  div.auto ul {
    border:1px solid #888;
    margin:0;
    padding:0;
    width:100%;
    list-style-type:none;
  }
  div.auto ul li {
    margin:0;
    padding:3px;
    font-family: Verdana,Helvetica,sans-serif;
    font-size: smaller;
  }
  div.auto ul li.selected { 
    background-color: #ffb; 
  }
  div.auto ul strong.highlight { 
    color: #800; 
    margin:0;
    padding:0;
  }
  </style>

Siehe scriptaculous Doku.

Liste mit der Maus Umsortieren

In diesem Bespiel kann die UserIn eine Liste mit drag-and-drop umsortieren.

Die Liste selbst wurde mit Style-Anweisungen etwas anders gestaltet:

  <style>
    ul.sortabledemo { list-style-type: none; width: 400px;}
    ul.sortabledemo li { border: 1px #ddd solid; }
    ul.sortabledemo li:hover { background-color: yellow; }
  </style>

Die Liste (genauer gesagt: der ul-Tag) gehört zur Klasse sortabledemo, damit wird das Stylesheet wirksam. Aussderm hat die Liste die id liedliste. Mit Sortable.create wird die Liste sortierbar:

  <ul class="sortabledemo" id="liedliste">
    <li>Lied 1</li>
    <li>Lied 2</li>
    <li>Lied 3</li>
    <li>lied 4</li>    
  </ul>

    <script type="text/javascript">
      Sortable.create("liedliste", {});
    </script>

Achtung: Sortable.create muss im Code nach der Liste kommen, Sie können diesen Befehl also nicht in den Head kopieren.

Siehe scriptaculous Doku.

Übungsprojekt

Mit den hier gezeigten Komponenten können Sie viele lustige Applikationen für die Kommunikation zwischen mehreren Leuten programmieren.

Eine Shoutbox

das ist ein minimaler Chat, in den jeder und jede rein schreiben können; die letzten 10 Beiträge werden jeweils auf der Webseite angezeigt.

Ein Multi-User-Spiel

wie der Google image labeler.

Referenz

Im Folgenden sind die im Buch verwendeten Objekte, Eigenschaften, Methoden von Prototype, script.aculo.us und Google Maps kurz und knapp aufgeführt.

Für detaillierte Informationen folgen Sie bitte den Links. Die englische Wikipedia bietet zudem eine List of JavaScript libraries an.

Prototype

Die vollständige Funktionsreferenz findet sich unter: http://api.prototypejs.org/.

$(id)

Abkürzung für document.getElementById(id)[2]

new Ajax.Request(url, options-objekt)

Startet eine AJAX-Abfrage, gibt ein Objekt zurück. [3]

Argumente:

• URL
• Objekt mit folgenden Eigenschaften
  • method = Zugriffsmethode, entweder 'get' oder 'post'
  • onComplete = Funktion die aufgerufen wird wenn eine Antwort vom Server vorliegt. Sie erhält als einziges Argument das XMLHTTPRequest-Objekt der AJAX-Abfrage.
  • parameters = Parameter für die HTTP-Abfrage, im URL-encoded Format

Ajax.PeriodicalUpdater

Element.show(element)

Element.hide(element)

Zeigt ein beliebiges Element der Seite an bzw. versteckt es. Dabei wird die Style-Anweisung display:none eingefügt bzw. gelöscht.[4]

Form.serialize(form)

gibt eine URL-encoded Parameter-Zeichenkette die dem aktuellen Zustand des Formulars entspricht.[5]

script.aculo.us

Die vollständige Funktionsreferenz findet sich unter: http://madrobby.github.com/scriptaculous/.

new Ajax.InPlaceEditor(id, url)

Wenn das HTML-Element mit der id angeklickt wird verwandelt es sich in ein Eingabefeld mit ok-Button und Cancel-Link. Hier kann die LeserIn den Text verändern und mit Enter oder klick auf den ok speichern. Der eingegeben Text wird an das Server-Programm mit der url geschickt, der Parameter-Name ist value. Der Output des Server-Programms wird als neuer Text im HTML-Element dargestellt.[6]

new Ajax.Autocompleter(name eingabefeld, id div, url, {})

Wenn die UserIn etwas in das Eingabefeld mit name eintippt, dann wird dieses Text-Fragment an das Server-Skript url geschickt. (Der Parametername wird der Namen des Eingabefelds verwendet). Der Output des Server-Skript soll eine Liste sein (mit ul und li-Tags). Diese Liste wird in der div mit der angegebenen id angezeigt. Die UserIn kann daraus einen Wert mit der Maus auswählen (anklicken), dann wird dieser Wert in das Eingabefeld übernommen.[7]

Sortable.create(id, {})

Die einzelnen Kind-Elemente des HTML-Containers id werden sortierbar - die LeserIn kann sie mit der Maus verschieben.[8]

Google Maps API

Die vollständige Funktionsreferenz der Version 2 (inzwischen veraltet) findet sich unter: https://developers.google.com/maps/documentation/javascript/v2/reference?hl=de-DE.

GBrowserIsCompatible

Testet ob im aktuellen Browser Google Maps überhaupt funktioniert. In einem if() verwenden![9]

map = new GMap2(id)

Verwandelt die div mit der id in eine Landkarte. Rückgabewert ist ein map-Objekt.[10]

point = new GLatLng(47.810001, 13.039999)

Erzeugt ein Koordinatenpaar[11]

map.addControl(new GSmallMapControl())

Fügt ein Steuerelement für Rein- und Raus-zoomen und Verschieben der Karte hinzu.[12][13]

map.addControl(new GMapTypeControl())

Fügt ein Steuerelement hinzu, mit dem man zwischen Satellitenkarte und Strassenkarte hin und her schalten kann.[14][15]

map.setCenter(point, level)

zentriert die Landkarte auf Korrdinaten point, Kartengrösse level (Werte von 1 bis 14)[16]

GUnload()

ent-lädt die Landkarte, sollte man ins onUnload-Event des body einbauen.[17]

Weitere Quellen

Ajax (Asynchrones JavaScript + XML) ist ein Audruck, der von Jesse James Garret von Adaptive Path in seinem Einführungsartikel zu dem Thema ins Leben gerufen wurde. Lesen Sie den Wikipedia-Artikel zu Ajax für eine genaue Definition.

Sinn und Zweck dieses Leitfadens ist, Ihnen zu zeigen, wie Sie Ajax unaufdringlich in Ihre Webanwendungen einbinden können, und zwar so, dass Ihre Website noch funktioniert, wenn JavaScript deaktiviert ist. Durch geschicktes Einbauen von JavaScript-Schaltern in Ihren Code können Sie ihre Website auf eine neue Ebene der Interaktivität bringen, ohne auf Abwärtskompatibilität zu Browsern, die Ajax nicht unterstützen, verzichten zu müssen. Auf diese Weise können Sie Ihr Angebot verbessern, ohne die Benutzer auszuschließen, die sich entschlossen haben, JavaScript aus Sicherheitsgründen oder wegen browserspezifischer Besonderheiten zu deaktivieren.

Es gibt bereits einige Websites, die es sich zur Aufgabe gemacht haben, für (aber auch gegen) die Benutzung von Ajax zu werben. Deswegen wird hier versucht, eine möglichst unvoreingenommene Liste dieser Seiten zu erstellen. Obwohl ich jeden herzlich einlade, die Liste zu erweitern, ist es aus Gründen des Urheberrechts unmöglich, von jedem die Einverständnis zu erhalten, seine Inhalte hier einzubinden. Außerdem stellen diese Seiten oft genau das Konzept zur Schau, das sie zu beschreiben versuchen.

Sofern ein Konzept mit Ajax zusammenhängt, sollte es hier beschrieben werden, aber die endgültige Arbeit sollte in andere Wikibooks oder Websites ausgelagert werden, wo es bereits herausgearbeitet wurde oder werden soll.

Angesichts dieser Tatsachen gibt es einige Konzepte, mit denen Sie sich vertraut machen sollten, wenn Sie mit Ajax arbeiten wollen. Es sind aber nicht alle unbedingt nötig, um sich seinen eigenen Code zusammenzukopieren, die folgenden werden empfohlen.

• JavaScript
  • Wikibook
  • Wikipedia
• XHTML
  • Wikipedia
• XML
  • Wikipedia
  • Wikibook
• Document Object Model
  • Wikipedia
• Cascading Style Sheets
  • Wikipedia
  • Wikibook
• XSLT
  • Wikipedia
  • Wikibook

Um die Ajax-Programmierung zu vereinfachen, können Webentwickler von einer JavaScript-Bibliothek für Ajax Gebrauch machen. Diese Bibliotheken erlauben es, gängige Browserprobleme zusammenzufassen und bewirken so, dass sich Webentwickler weiter mit ihrer Anwendung beschäftigen können.

Weiterlesen

• Mozilla developer wiki: Ajax
• Wiki:JavaScriptAbuse
• the Ajax Patterns wiki
• Ajaxr.de Deutschsprachiges Archiv für Ajax Scripte

Zurück zu Referenz | Hoch zu AJAX

</noinclude>