Aus Wikibooks

[Bearbeiten] Vorwort

Lieber Leser, liebe Leserin,

AJAX ist ja eigentlich nichts Neues. Es ist nur eine geschickte Kombination von Javascript und serverseitiger Programmierung unter Verwendung des XMLHttpRequest-Objekts. Deswegen steht dieses Kapitel auch ganz am Schluss des Buches: Hier wird alles kombiniert, was Sie bisher erlernt haben.

Viel Spaß beim Lernen und Ausprobieren!

[Bearbeiten] 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*)

[Bearbeiten] Die Technologien

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

• HTML + CSS baut Seite auf
• Javascript: XMLHttpRequest asynchron absetzen, Callback-Funktionen angeben
• Am Server: egal welche Sprache, bloß ein HTTP-Request
• Javascript: Antwort einbauen mit DOM

[Bearbeiten] Entwicklungsumgebung für AJAX

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

• Firebug für Firefox

[Bearbeiten] Libraries und Frameworks für AJAX

Sie können AJAX auf verschiedenen Ebenen entwickeln:

Eigenbau

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

Clientseitige Library

Sie verwenden eine Library die das XMLHTTPRequest-Objekt kapselt, so dass Sie browserunabhängig arbeiten können. Sie schreiben Javascript und serverseitiges Programm separat. 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 umgesetzt in ein PHP-Funktions-Aufruf mit PHP-Datentypen als Argumente. Beispiel: Mybic für PHP.

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)

[Bearbeiten] 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:

Google Suggests

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

[Bearbeiten] Übung

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

[Bearbeiten] 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.

[Bearbeiten] 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.

[Bearbeiten] 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.

[Bearbeiten] 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.

[Bearbeiten] 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>

[Bearbeiten] Javascript

Als Javascript-Library wird Prototype verwendet, und im Head des Dokuments eingebunden:

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

Die Funktion hol_datum setzt den AJAX-Request ab. Dafür wird ein neues Ajax.Request Objekt erzeugt. Dieses Objekt entstammt der prototype-Library. Beim Konstruktor werden zwei Argumente übergeben:

• Eine Zeichenkette, diese enthält die URL des serverseitigen Programmes, in diesem Falle also datum.php
• Ein Objekt mit weiteren Optionen. In diesem Falle wird das Objekt in JSON-Schreibweise angegeben, es hat zwei Eigenschaften:
  • method mit dem Wert get legt die HTTP-Übertragungsmethode fest (könnte auch post sein)
  • onComplete mit dem Wert zeige_datum legt die Funktion fest, die aufgerufen wird sobald die Antwort vom Server auf die AJAX-Anfrage angekommen sind.

function hol_datum() {
  var myAjax = new Ajax.Request(
    "datum.php",
    { method: 'get', onComplete: zeige_datum }
  );
}

Wichtig: Beim Angeben der onComplete-Funktion dürfen Sie keine Klammern schreiben! Das würde die Funktion sofort ausführen, nicht erst wenn die Daten vom Server da sind.

Einige Milli-Sekunden später, wenn die Antwort vom Server vorliegt, wird die Funktion zeige_datum aufgerufen. Die Funktion erhält als Parameter das XMLHTTPRequest Objekt das für die AJAX-Anfrage erzeugt wurde, und kann aus der responseText Eigenschaft des Objekt die Antwort des Servers auslesen.

In diesem Beispiel wird die Antwort des Servers einfach in die div mit der id output kopiert.

function zeige_datum( originalRequest ) {
   document.getElementById('output').innerHTML = originalRequest.responseText;
}

Prototype bietet noch eine praktische Abkürzung für die oft verwendete Funktion document.getElementByID, die Dollar-Funktion:

function zeige_datum( originalRequest ) {
   $('output').innerHTML = originalRequest.responseText;
}

[Bearbeiten] 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:

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

Das Zusammenspiel dieser Teile ergibt eine erste AJAX-Applikation.

[Bearbeiten] Parameter übergeben

Nun sollen beim AJAX-Aufruf Parameter an das Serverseitige Programm übergeben werden. Dazu bauen wir zwei checkboxes ein, mit denen man Datum und Uhrzeit separat bestellen kann:

Als Parameternamen wurden hier d für Datum und u für Uhrzeit gewählt:

  <input type="checkbox" name="d">Datum<br />
  <input type="checkbox" name="u">Uhrzeit

Beim Erzeugen des Ajax.Request Objekts sollen diese Parameter mit übergeben werden, die entsprechende Eigenschaft heißt parameters.

  var myAjax = new Ajax.Request(
            "datum_uhrzeit.php",
            {
                method: 'get', 
                parameters: 'u=On&d=On',
                onComplete: zeige_datum
            }
  );

Es hat natürlich keinen Sinn die Parameter wie im Code gezeigt fix anzugeben. Statt dessen sollen die aktuellen Werte der Checkboxen verwendet werden.

Auch dafür gibt es in Prototype eine praktische Hilfs-funktion. Dazu müssen die Eingabefelder aber in einen <form> Tag eingeschlossen werden:

 <form id="input">
        <input type="checkbox" name="d">Datum<br />
        <input type="checkbox" name="u">Uhrzeit<br />
        ...

Dann kann man die Parameter aus dem Formular mit Form.serialize auslesen:

  var myAjax = new Ajax.Request(
            "datum_uhrzeit.php",
            {
                method: 'get', 
                parameters: Form.serialize($('input')),
                onComplete: zeige_datum
            }
  );

[Bearbeiten] Ü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.

[Bearbeiten] Links

• Another Prototype Reference (Englisch)
• Quick Guide to Prototype (Englisch)

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.

[Bearbeiten] Bitte Warten

Wenn das Laden vom Server einmal etwas länger dauert soll die LeserIn 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 also so eine Status-Anzeige selbst bauen.

Die Statusanzeige selbst besteht aus einem animierten gif, diese Bild ist immer in der Webseite vorhanden, aber mit der Style-Anweisung display:none unsichtbar geschalten:

  <img id="bittewarten" src="bittewarten.gif"
     style="display:none;">

Wieder bietet Prototype eine praktische Methode, mit der man Elemente der Webseite sichtbar und unsichtbar schalten kann: Element.show und Element.hide. Diese Befehle werden entsprechend in den Javascript-Code eingefügt:

function hol_datum() {
    $('output').innerHTML = "Wird geladen";
    Element.show( $('bittewarten') );     
    var myAjax = new Ajax.Request(
          "datum_uhrzeit.php",
          {
              method: 'get', 
              parameters: Form.serialize($('input')),
              onComplete: show_datum
          }
    );
  }
 
  function show_datum( requestObject ) {
    $('output').innerHTML = requestObject.responseText;
    Element.hide( $('bittewarten') );      
  }

[Bearbeiten] Fehler in Log-Fenster schreiben

Für die weiteren Programme verwenden wir eine Funktion log_error die den Text des Fehlers in ein div am Ende der Webseite schreibt.

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

[Bearbeiten] 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 mit onException abgefangen werden:

function show_exception( requestObject, ex) {
 log_error("Keine AJAX-Anfrage an " + requestObject.url 
    + " möglich: " + ex);
}

Dieser Fehler tritt u.A. dann auf, wenn man eine Anfrage an einen 'fremden' Server stellen will, dann erhält man die Fehlermeldung:

Keine AJAX-Anfrage an http://far.far.away/datum_uhrzeit.php?u=on&_= möglich: Die Erlaubnis für den Aufruf der Methode XMLHttpRequest.open wurde verweigert

[Bearbeiten] HTTP-Status nicht OK

Die zweite Art von Fehler wird über den HTTP-Status-Code übermittelt: wenn der Code anders als 200 lautet ist das eine Fehlermeldung. Diese Fehler kann man mit onFailure abfangen:

function show_failure( requestObject ) {
    log_error("Error from Server:" + requestObject.statusText);
}

[Bearbeiten] PHP: error im Text

PHP setzt den HTTP-Status nicht wenn ein Fehler auftritt. Hier kann man nur am Inhalt der HTTP-Antwort erkennen, dass etwas schief gegangen ist:

function show_datum( requestObject ) {
  Element.hide( $('bittewarten') )      
  if ( requestObject.responseText.search(/error/) >= 0 ) {
    log_error("Error in PHP: " + requestObject.responseText);
  } 
  ...

[Bearbeiten] Alle Fehler einbinden

So sieht die Erzeugung des Ajax.Request jetzt aus:

var myAjax = new Ajax.Request(
        "datum_uhrzeit.php",
      {
          method: 'get', 
          parameters: Form.serialize($('input')),
          onSuccess:   show_datum,
          onFailure:   show_failure,
          onException: show_exception
      }
);

Beim Programmieren einer 'echten' AJAX-Applikation ist die Ausgabe des Fehlers in eine log nicht genug, hier ist eine gut lesbare Fehlermeldung an die UserIn zu formulieren.

Komponenten für Formulare

[Bearbeiten] Scriptaculous

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:

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

[Bearbeiten] 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 der 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

[Bearbeiten] 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 wir 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.

[Bearbeiten] Textfeld mit Auto-Vervollständigung

Auto-Vervollständigen mit AJAX bedeutet: Die UserIn 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, die UserIn 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.

[Bearbeiten] Liste mit der Maus Umsortieren

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

Bild:Websiteentwicklung AJAX Sortiermich.gif

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:

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

[Bearbeiten] Übungsprojekt

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

Eine Shoutbox[2]

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[3].

[Bearbeiten] Links

• prototype
• script.aculo.us

Referenz

Liste der verwendeten Prototype und scriptaculous Objekte, Eigenschaften, Methoden:

[Bearbeiten] Prototype

$(id)

Abkürzung für document.getElementByID(id)[4]

new Ajax.Request(url, options-objekt)

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

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.[6]

Form.serialize(form)

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

[Bearbeiten] 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.[8]

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.[9]

Sortable.create(id, {})

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

[Bearbeiten] Google Maps API

GBrowserIsCompatible

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

map = new GMap2(id)

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

point = new GLatLng(47.810001, 13.039999)

Erzeugt ein Koordinatenpaar[13]

map.addControl(new GSmallMapControl())

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

map.addControl(new GMapTypeControl())

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

map.setCenter(point, level)

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

GUnload()

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

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.

[Bearbeiten] Weiterlesen

• Mozilla developer wiki: Ajax
• Wiki:JavaScriptAbuse
• the Ajax Patterns wiki

Zurück zu Referenz | Hoch zu AJAX

</noinclude>