Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

Websiteentwicklung: AJAX/ Druckversion

Aus Wikibooks

< Websiteentwicklung: AJAX

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!

Inhaltsverzeichnis
1 Vorwort
2 Was ist AJAX?
2.1 Die Technologien
2.2 Entwicklungsumgebung für AJAX
2.3 Libraries und Frameworks für AJAX
2.4 Links
3 AJAX-Applikationen kennen lernen
3.1 Übung
3.2 Links
4 Google Maps verwenden
4.1 Eine erste Landkarte
4.2 Landkarte steuern
4.3 Links
5 Erstes Programm
5.1 HTML
5.2 Javascript
5.3 PHP
5.4 Parameter übergeben
5.5 Übungsprojekt
5.6 Links
6 Fehlerbehandlung
6.1 Bitte Warten
6.2 Fehler in Log-Fenster schreiben
6.3 AJAX-Aufruf nicht möglich
6.4 HTTP-Status nicht OK
6.5 PHP: error im Text
6.6 Alle Fehler einbinden

1 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

7 Komponenten für Formulare

7.1 Scriptaculous
7.2 Regelmäßig Nachladen und Anzeigen
7.3 Editierbarer Text
7.4 Textfeld mit Auto-Vervollständigung
7.5 Liste mit der Maus Umsortieren
7.6 Übungsprojekt
7.7 Links
8 Referenz
8.1 Prototype
8.2 Scriptaculous
8.3 Google Maps API
9 Weitere Quellen
9.1 Weiterlesen

Was ist AJAX?

AJAX ist ein englisches Akronym, das man grob übersetzen kann mit: "asynchrones Nachladen von
Javascript aus 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]
(http://www.adaptivepath.com/publications/essays/archives/000385.php) .

Das erste eingängige Beispiel ist vielleicht Google Suggests

(http://www.google.com/webhp?complete=1&hl=en) .

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*)

2 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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

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 (http://www.joehewitt.com/software/firebug/) für Firefox

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.

Links
Ajax
Artikel von Jesse James Garrett
(http://www.adaptivepath.com/publications/essays/archives/000385.php)

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:

3 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

Google Suggests (http://www.google.com/webhp?complete=1&hl=en)

Eingabe wird automatisch vervollständigt
flickr (http://www.flickr.com)
Metainformationsbasiertes Online Fotoverzechnis, die Benutzer können ihre eigenen Schappschüsse
hinzufügen, drag-and-drop Menü
Charakterplaner WoW (http://www.merciless-gilde.com/)
Suche mit AJAX, drag-and-drop
Gollum (http://gollum.easycp.de/de/)
Suche mit AJAX
Xing (OpenBC) (http://www.xing.com)
Liste der möglichen Verbindung zu einer fremden Person wird mit AJAX nachgeladen
MeinProf.de (http://www.meinprof.de)
Wenn man einen neuen Prof einträgt wird per AJAX nachgefragt ob er schon in der Datenbank ist
netvibes (http://www.netvibes.com)
Desktop in AJAX. Einzelne Fenster können mit drag-and-drop verschoben werden. Feeds werden
regelmässig frisch angezeigt
google maps (http://maps.google.com/)
Beim Scrollen werden fehlende Teile der Landkarte mit AJAX nachgeladen
google spreadsheet (http://spreadsheets.google.com)
Gesamte Tabellenkalkulation in AJAX
neximage (http://demo.neximage.com/)
Vollständiges Bildbearbeitungsprogramm mit AJAX

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

Links
Ajax Examples (http://ajaxpatterns.org/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.

4 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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 Google Map - kompatibel ist. Dann wir eine neue Landkarte auf
basis der div karte erzeugt. Dann wird diese Landkarte auf einen bestimmte Punkt (in Längen- und
Breitengrad) zentriert. Die Zahl 9 gibt den Zoom-Level an, also wie gross 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. Falls Sie ein Mausrad hat kann sie
damit zoomen.

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

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

Mit dem zweiten Steuerelement kann die LeserIn zwischen Satelliten-Karte und Strassen-Karte hin und her
schalten.

Links
Google Maps API Dokumentation (http://www.google.com/apis/maps/documentation/)

Erstes Programm
Das erstes Beispiel soll nur die Datenübertragung zwischen Client und Server illustrieren; tut also noch
nichts sinnvolles. Wenn der Button gedrückt wird, wird vom Webserver Datum und Uhrzeit abgefragt und
angezeigt.

5 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

HTML
Die Webseite enthält als HTML-Code einen Button zum Starten des AJAX-Aufrufs, und eine leere 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
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 Konstruktur 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.

6 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

function zeige_datum( originalRequest ) {

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

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

function zeige_datum( originalRequest ) {

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

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.

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: handle_response
}
);

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

7 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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: handle_response
}
)

Übungsprojekt
Erstellen Sie ein Javascript-Programm, dass bei Laden der Seite (einmal) aufgerufen wird, und
Browsernamen, Browserversion und Bildschirmgrösse 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
Another Prototype Reference
(http://blogs.ebusiness-apps.com/jordan/pages/Prototype%20Library%20Info.htm) (Englisch)
Quick Guide to Prototype (http://particletree.com/features/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.

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.

8 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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') );
}

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 />";
}

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:

9 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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

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);
}

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);
}
...

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

10 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

Scriptaculous
Für alle Komponente ausser 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>

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

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:

11 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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 (http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor) .

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

12 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

<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 (http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter) .

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.

13 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

Siehe scriptaculous Doku (http://wiki.script.aculo.us/scriptaculous/show/Sortable.create) .

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

Eine Shoutbox[2] (http://en.wikipedia.org/wiki/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[3] (http://images.google.com/imagelabeler/) .

Links
prototype (http://prototype.conio.net/)
script.aculo.us (http://script.aculo.us/)

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

Prototype
$(id)
Abkürzung für document.getElementByID(id)[4] (http://www.devshare.de/_ajax/prototype.js.html)
new Ajax.Request(url, options-objekt)
Startet eine AJAX-Abfrage, gibt ein Objekt zurück. [5]
(http://www.devshare.de/_ajax/prototype.js.html)
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] (http://www.devshare.de/_ajax/prototype.js.html)
Form.serialize(form)
gibt eine URL-encoded Parameter-Zeichenkette die dem aktuellen Zustand des Formulars
entspricht.[7] (http://www.devshare.de/_ajax/prototype.js.html)

Scriptaculous

14 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

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] (http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor)
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]
(http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter)
Sortable.create(id, {})
Die einzelnen Kind-Elemente des HTML-Containers id werden sortierbar - die LeserIn kann sie mit
der Maus verschieben.[10] (http://wiki.script.aculo.us/scriptaculous/show/Sortable.create)

Google Maps API

GBrowserIsCompatible
Testet ob im aktuellen Browser Google Maps überhaupt funktioniert. In einem if() verwenden![11]
(http://www.google.com/apis/maps/documentation/reference.html#GBrowserIsCompatible)
map = new GMap2(id)
Verwandelt die div mit der id in eine Landkarte. Rückgabewert ist ein map-Objekt.[12]
(http://www.google.com/apis/maps/documentation/reference.html#GMap2)
point = new GLatLng(47.810001, 13.039999)
Erzeugt ein Koordinatenpaar[13]
(http://www.google.com/apis/maps/documentation/reference.html#GLatLng)
map.addControl(new GSmallMapControl())
Fügt ein Steuerelement für Rein- und Raus-zoomen und Verschieben der Karte hinzu.[14]
(http://www.google.com/apis/maps/documentation/reference.html#GMap2) [15]
(http://www.google.com/apis/maps/documentation/reference.html#GControlImpl)
map.addControl(new GMapTypeControl())
Fügt ein Steuerelement hinzu, mit dem man zwischen Satellitenkarte und Strassenkarte hin und her
schalten kann.[16] (http://www.google.com/apis/maps/documentation/reference.html#GMap2) [17]
(http://www.google.com/apis/maps/documentation/reference.html#GControlImpl)
map.setCenter(point, level)
zentriert die Landkarte auf Korrdinaten point, Kartengrösse level (Werte von 1 bis 14)[18]
(http://www.google.com/apis/maps/documentation/reference.html#GMap2)
GUnload()
ent-lädt die Landkarte, sollte man ins onUnload-Event des body einbauen.[19]
(http://www.google.com/apis/maps/documentation/#Memory_Leaks)

Weitere Quellen
Ajax (Asynchrones JavaScript + XML) ist ein Audruck, der von Jesse James Garret von Adaptive Path
(http://www.adaptivepath.com) in seinem Einführungsartikel
(http://www.adaptivepath.com/publications/essays/archives/000385.php) 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

15 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

(http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html) 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 (http://www.quirksmode.org) 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 sind stellen diese Seiten oft genau das Konzept zur Schau, dass 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 (http://www.yourhtmlsource.com/javascript/ajax.html) 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 (http://developer.mozilla.org/en/docs/AJAX)
Wiki:JavaScriptAbuse (http://c2.com/cgi/wiki?JavaScriptAbuse)
the Ajax Patterns wiki (http://ajaxpatterns.org/)

Zurück zu Referenz | Hoch zu AJAX

16 von 17 10.07.2007 11:05

Websiteentwicklung: AJAX/ Druckversion - Wikibooks http://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_AJA...

</noinclude>

Von „http://de.wikibooks.org/wiki/Websiteentwicklung:_AJAX/_Druckversion“

Kategorie: Buch mit Druckversion

Diese Seite wurde zuletzt am 25. Oktober 2006 um 00:22 Uhr geändert.
Inhalt ist verfügbar unter der GNU Free Documentation License.

17 von 17 10.07.2007 11:05