Websiteentwicklung: AJAX: Komponenten für Formulare
Verwendete Javascript-Librarys
[Bearbeiten]
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
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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.
