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

3 Google Maps API 9 Weitere Quellen 9.5 Liste mit der Maus Umsortieren 7.Wikibooks http://de. Das X steht dabei eigentlich für XML.org/w/index.php) .. 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. Das erste eingängige Beispiel ist vielleicht Google Suggests (http://www. das man grob übersetzen kann mit: "asynchrones Nachladen von Javascript aus plus dynamische Manipulation der DOM".07.adaptivepath.4 Textfeld mit Auto-Vervollständigung 7..3 Editierbarer Text 7.1 Prototype 8.6 Übungsprojekt 7. Der Begriff wurde von Jesse James Garrett geprägt.2 Regelmäßig Nachladen und Anzeigen 7.2 Scriptaculous 8.1 Scriptaculous 7. 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.google. in der Praxis ist es aber eher ein Platzhalter: die Daten werden in X verschiedenen Formaten vom Server zum Client geladen. 7 Komponenten für Formulare 7. siehe [1] (http://www.Websiteentwicklung: AJAX/ Druckversion .wikibooks.php?title=Websiteentwicklung:_AJA.2007 11:05 .1 Weiterlesen Was ist AJAX? AJAX ist ein englisches Akronym.com/webhp?complete=1&hl=en) .7 Links 8 Referenz 8.com/publications/essays/archives/000385.

ohne dass Sie dafür Javascript programmieren müssen.joehewitt. die fertige AJAX-Komponenten anbietet. 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. das Javascript mit Ihrer bevorzugten serverseitigen Programmiersprache verbindet: Ein Javascript-Funktionsaufruf mit Javascript-Datentypen als Argumente wird z.Websiteentwicklung: AJAX/ Druckversion . Links Ajax Artikel von Jesse James Garrett (http://www.2007 11:05 .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.nicht zu empfehlen Clientseitige Library Sie verwenden eine Library die das XMLHTTPRequest-Objekt kapselt.adaptivepath. der Firebug-Extension von Firefox: Firebug (http://www. und sich mit den wichtigsten Ideen vertraut machen: 3 von 17 10. Beispiel: Ruby on Rails.B.Wikibooks http://de. automatisch umgesetzt in ein PHP-Funktions-Aufruf mit PHP Datentypen als Argumente.wikibooks. Framework das Javascript generiert.. Beispiel: Mybic für PHP. Dabei müssen Sie selbst die Browser-Unterschiede des XMLHTTPRequest-Objekts behandeln .php?title=Websiteentwicklung:_AJA.com/publications/essays/archives/000385. Die Technologien AJAX vereinigt alle Technologien die Sie in diesem Wikibook kennen gelernt haben: HTML + CSS baut Seite auf Javascript: XMLHttpRequest asynchron absetzen.07.php) AJAX-Applikationen kennen lernen Bevor Sie selbst AJAX-Applikationen entwickeln sollten Sie möglichst viele Applikationen studieren..js Framework mit Mapping Sie verwenden ein Framework. Beispiel: prototype.org/w/index. Callback-Funktionen angeben Am Server: egal welche Sprache. Sie verwenden eine serverseitige Programmiersprache. Sie schreiben Javascript und serverseitiges Programm separat. so dass Sie browserunabhängig arbeiten können.

org/w/index.easycp.de (http://www. Im einfachsten Fall .com/) Suche mit AJAX.at online stellt muss man sich zuerst von Google einen dazu passenden Key geben lassen . Sie können die Datei im Browser direkt öffnen.google.de) Wenn man einen neuen Prof einträgt wird per AJAX nachgefragt ob er schon in der Datenbank ist netvibes (http://www.neximage.. Links Ajax Examples (http://ajaxpatterns.xing.Websiteentwicklung: AJAX/ Druckversion .B.com) Metainformationsbasiertes Online Fotoverzechnis.2007 11:05 . drag-and-drop Menü Charakterplaner WoW (http://www.com) Desktop in AJAX.com/) Beim Scrollen werden fehlende Teile der Landkarte mit AJAX nachgeladen google spreadsheet (http://spreadsheets. so dass der Browser als Adresse eine URL anzeigt die mit file:/// beginnt.com) Gesamte Tabellenkalkulation in AJAX neximage (http://demo. Wenn man die Landkarte unter der Domain http://www.beispiel.com/) Vollständiges Bildbearbeitungsprogramm mit AJAX Übung Öffnen Sie Firebug. dass Sie dafür noch keinen API-Key brauchen. Die Dokumentation zu dieser API ist derzeit nur auf Englisch erhältlich. Wenn die URL mit http:// beginnt.flickr. z. die Benutzer können ihre eigenen Schappschüsse hinzufügen.netvibes. Feeds werden regelmässig frisch angezeigt google maps (http://maps. Die Benutzung der Maps API ist derzeit kostenlos.google.de/de/) Suche mit AJAX Xing (OpenBC) (http://www.ist das eine Arbeit von 5 Minuten. Das hat den Vorteil. Zum Testen Ihrer Webseite brauchen Sie keinen Webserver.Wikibooks http://de.meinprof.com) Liste der möglichen Verbindung zu einer fremden Person wird mit AJAX nachgeladen MeinProf.google.07. brauchen Sie einen Key.Landkarte anzeigen . drag-and-drop Gollum (http://gollum. Google Suggests (http://www. und beobachten Sie bei der Benutzung der verschiedenen Applikationen wann eine AJAX-Anfrage erfolgt.wikibooks.merciless-gilde.com/webhp?complete=1&hl=en) Eingabe wird automatisch vervollständigt flickr (http://www. http://localhost/. die dann in einer Variable im Programm gespeichert wird.das ist einfach eine Zeichenkette. 4 von 17 10.php?title=Websiteentwicklung:_AJA.org/Ajax_Examples) aus dem Wiki Ajax Design Patterns Google Maps verwenden Google Maps ist eine ausgereifte Applikation die sehr viel AJAX verwendet.. Einzelne Fenster können mit drag-and-drop verschoben werden. Über die Google Maps API (Programmierschnittstelle) kann man diese Applikation in eigenen Webseiten oder Web-Applikationen einbinden.

map.google.810001.org/w/index. Mögliche Werte sind 1 bis 14.google.getElementById("karte")).039999). tut also noch nichts sinnvolles.. 13.addControl(new GMapTypeControl()). Die Karte sieht zwar statisch aus. Die Zahl 9 gibt den Zoom-Level an.setCenter(new GLatLng(47.wikibooks.. Links Google Maps API Dokumentation (http://www. Die selbstgeschriebene Funktion karteladen verwendet mehrere Befehle aus der Google Maps-API: Zuerst wird getestet ob der Browser überhaupt Google Map .kompatibel ist. 5 von 17 10.und Breitengrad) zentriert. bietet aber schon Interaktions-Möglichkeiten: die LeserIn kann mit der Maus die Karte ziehen. dass Sie rein.und raus-zoomen kann bringen wir nun Steuerelemente an: map. Dann wir eine neue Landkarte auf basis der div karte erzeugt.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. Landkarte steuern Bisher wirkte die Landkarte statisch. <script src="http://maps. wird vom Webserver Datum und Uhrzeit abgefragt und angezeigt. Dann wird diese Landkarte auf einen bestimmte Punkt (in Längen. Eine erste Landkarte Das erste Beispiel lädt die Landkarte von Salzburg in eine div namens karte. height: 300px"></div> In der ersten Zeile wird Javascript vom Google-Server geladen.Wikibooks http://de. Hier sehen Sie die Stelle an der Sie den Key angeben können falls Sie die Seite dann auf einem Webserver veröffentlichen wollen. 9).addControl(new GSmallMapControl()). also wie gross der Kartenausschnitt ist. map.07. Falls Sie ein Mausrad hat kann sie damit zoomen.com/apis/maps/documentation/) Erstes Programm Das erstes Beispiel soll nur die Datenübertragung zwischen Client und Server illustrieren.Websiteentwicklung: AJAX/ Druckversion . Wenn der Button gedrückt wird.php?title=Websiteentwicklung:_AJA. } } //]]> </script> </head> <body onload="karteladen()" onunload="GUnload()"> <div id="karte" style="width: 500px. Damit die LeserIn weiss. Mit dem zweiten Steuerelement kann die LeserIn zwischen Satelliten-Karte und Strassen-Karte hin und her schalten. und so einen anderen Kartenausschnitt wählen.2007 11:05 .

Dieses Objekt entstammt der prototype-Library.07.Wikibooks http://de. { method: 'get'.Request( "datum... border: 1px black solid. in diesem Falle also datum. <input type="button" value="tu ajax" onClick="hol_datum()"> <br /> <div style="width:400px. In diesem Falle wird das Objekt in JSON-Schreibweise angegeben. wenn die Antwort vom Server vorliegt.. und im Head des Dokuments eingebunden: <script src="prototype. function hol_datum() { var myAjax = new Ajax.Websiteentwicklung: AJAX/ Druckversion . diese enthält die URL des serverseitigen Programmes.. die aufgerufen wird sobald die Antwort vom Server auf die AJAX-Anfrage angekommen sind. noch nix . 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." id="output"> . Einige Milli-Sekunden später.php Ein Objekt mit weiteren Optionen. onComplete: zeige_datum } ). </div> Javascript Als Javascript-Library wird Prototype verwendet. Die Funktion erhält als Parameter das XMLHTTPRequest Objekt das für die AJAX-Anfrage erzeugt wurde.Request Objekt erzeugt. } Wichtig: Beim Angeben der onComplete-Funktion dürfen Sie keine Klammern schreiben! Das würde die Funktion sofort ausführen. und eine leere div um das Ergebnis aufzunehmen. In diesem Beispiel wird die Antwort des Servers einfach in die div mit der id output kopiert..php?title=Websiteentwicklung:_AJA.. nicht erst wenn die Daten vom Server da sind.js" type="text/javascript"></script> Die Funktion hol_datum setzt den AJAX-Request ab.2007 11:05 . 6 von 17 10.org/w/index.wikibooks. und kann aus der responseText Eigenschaft des Objekt die Antwort des Servers auslesen. Dafür wird ein neues Ajax. Beim Konstruktur werden zwei Argumente übergeben: Eine Zeichenkette. wird die Funktion zeige_datum aufgerufen... HTML Die Webseite enthält als HTML-Code einen Button zum Starten des AJAX-Aufrufs.php".

responseText. function zeige_datum( originalRequest ) { document. var myAjax = new Ajax.php?title=Websiteentwicklung:_AJA.php". die entsprechende Eigenschaft heißt parameters. date("r").2007 11:05 . 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.Wikibooks http://de.Request( "datum_uhrzeit. ?> Das Zusammenspiel dieser Teile ergibt eine erste AJAX-Applikation. Parameter übergeben Nun sollen beim AJAX-Aufruf Parameter an das Serverseitige Programm übergeben werden.innerHTML = originalRequest.org/w/index.Websiteentwicklung: AJAX/ Druckversion . } PHP Das Serverseitige Programm können Sie in jeder beliebigen Sprache schreiben. } Prototype bietet noch eine praktische Abkürzung für die oft verwendete Funktion document. Hier eine PHP-Version des Programmes: <?php echo "Jetzt ist es " .getElementById('output'). sein Output muss nur ein HTML-Fragment sein.innerHTML = originalRequest. { method: 'get'..Request Objekts sollen diese Parameter mit übergeben werden. parameters: 'u=On&d=On'. Statt dessen sollen die aktuellen Werte der Checkboxen verwendet werden. onComplete: handle_response } ).wikibooks.responseText. die Dollar-Funktion: function zeige_datum( originalRequest ) { $('output').. Es hat natürlich keinen Sinn die Parameter wie im Code gezeigt fix anzugeben. Dazu bauen wir zwei checkboxes ein.07. 7 von 17 10.getElmenetByID.

serialize auslesen: var myAjax = new Ajax.ebusiness-apps.Websiteentwicklung: AJAX/ Druckversion .org/w/index.com/jordan/pages/Prototype%20Library%20Info.. die Daten werden korrekt übertragen. Dort sollen die Daten in einer Log-Datei gespeichert werden. da diese für Anfragen mit dem XMLHTTPRequest-Objekt nicht aktiviert wird. Bitte Warten Wenn das Laden vom Server einmal etwas länger dauert soll die LeserIn trotzdem wissen. Auch dafür gibt es in Prototype eine praktische Hilfs-funktion. Dann kann man die Parameter aus dem Formular mit Form. 8 von 17 10.com/features/quick-guide-to-prototype/) (Englisch) Fehlerbehandlung Bisher haben wir angenommen. Links Another Prototype Reference (http://blogs. Browserversion und Bildschirmgrösse per AJAX an den Server meldet.. und Browsernamen. parameters: Form.. Die Statusanzeige des Browser hilft nicht.serialize($('input')). Wir müssen also so eine Status-Anzeige selbst bauen. dass alles funktioniert: der Server ist erreichbar. und der UserIn mehr Feedback über den Status des Programmes geben. { method: 'get'.07. dass etwas passiert.php".htm) (Englisch) Quick Guide to Prototype (http://particletree.. das serverseitige Programm läuft.2007 11:05 . Nun werden wir mögliche Fehler behandeln. So können Sie eine Statistik über die Browser Ihrer LeserInnen führen. 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 /> . dass bei Laden der Seite (einmal) aufgerufen wird.php?title=Websiteentwicklung:_AJA. onComplete: handle_response } ) Übungsprojekt Erstellen Sie ein Javascript-Programm.Request( "datum_uhrzeit.Wikibooks http://de.wikibooks.

onComplete: show_datum } ). } AJAX-Aufruf nicht möglich Der erste Fehler der auftreten kann ist ein Fehler beim Erzeugen des Ajax."> Wieder bietet Prototype eine praktische Methode.gif" style="display:none.hide. } function show_datum( requestObject ) { $('output').org/w/index.Request( "datum_uhrzeit. Die Statusanzeige selbst besteht aus einem animierten gif.innerHTML = "Wird geladen".serialize($('input')). } 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. mit der man Elemente der Webseite sichtbar und unsichtbar schalten kann: Element. var myAjax = new Ajax..wikibooks.show und Element.07. Diese Befehle werden entsprechend in den Javascript-Code eingefügt: function hol_datum() { $('output').innerHTML = requestObject.2007 11:05 .php".Request Objekts.innerHTML += t + "<br />". function log_error ( t ) { $('log'). aber mit der Style-Anweisung display:none unsichtbar geschalten: <img id="bittewarten" src="bittewarten.responseText.Websiteentwicklung: AJAX/ Druckversion . Element..hide( $('bittewarten') ). parameters: Form. Element. Diese Art von Fehler kann mit onException abgefangen werden: 9 von 17 10. diese Bild ist immer in der Webseite vorhanden.php?title=Websiteentwicklung:_AJA.show( $('bittewarten') ).Wikibooks http://de. { method: 'get'.

far. onSuccess: show_datum. dann erhält man die Fehlermeldung: Keine AJAX-Anfrage an http://far.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..responseText). Beim Programmieren einer 'echten' AJAX-Applikation ist die Ausgabe des Fehlers in eine log nicht genug.php?title=Websiteentwicklung:_AJA. dass etwas schief gegangen ist: function show_datum( requestObject ) { Element. } PHP: error im Text PHP setzt den HTTP-Status nicht wenn ein Fehler auftritt. { method: 'get'.statusText).Request jetzt aus: var myAjax = new Ajax. parameters: Form.php?u=on&_= möglich: Die Erlaubnis für den Aufruf der Methode XMLHttpRequest.search(/error/) >= 0 ) { log_error("Error in PHP: " + requestObject.away/datum_uhrzeit. Hier kann man nur am Inhalt der HTTP-Antwort erkennen.Request( "datum_uhrzeit.. ex) { log_error("Keine AJAX-Anfrage an " + requestObject. } Dieser Fehler tritt u. wenn man eine Anfrage an einen 'fremden' Server stellen will.url + " möglich: " + ex).responseText.Wikibooks http://de.A. onException: show_exception } )..Websiteentwicklung: AJAX/ Druckversion .07. } .2007 11:05 . dann auf.wikibooks.php". hier ist eine gut lesbare Fehlermeldung an die UserIn zu formulieren. Komponenten für Formulare 10 von 17 10. Diese Fehler kann man mit onFailure abfangen: function show_failure( requestObject ) { log_error("Error from Server:" + requestObject.hide( $('bittewarten') ) if ( requestObject. function show_exception( requestObject.. onFailure: show_failure.serialize($('input')).org/w/index. Alle Fehler einbinden So sieht die Erzeugung des Ajax.

Faktor für die Verlangsamung der nächsten Anfrage. Scriptaculous besteht aus sieben Javascript-Dateien. Standardwert ist 2 decay .Wikibooks http://de.PeriodicalUpdater( {success: 'output'}. dann können Sie mit folgendem Script 5 zufällig ausgewählte Umgebungs-Variablen anzeigen lassen: <?php $keys = array_keys( $_ENV ).PeriodicalUpdater in Prototype. 'serverstatus. Geladen wird nur die Prototype-Datei und die Hauptdatei von Scriptaculous: <script src="prototype.php'. dann verwandelt sich das Feld wieder in Text: 11 von 17 10.Websiteentwicklung: AJAX/ Druckversion .. eine weitere Javscript-Library die auf Prototype aufbaut.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. echo("<ul>").. Die Eingabe wird über einen AJAX-Anfrage gespeichert.org/w/index. {method: 'get'} ).hier output. $i = 0.php?title=Websiteentwicklung:_AJA. shuffle($keys). $i++.Wie oft soll der Update erfolgen. in Sekunden. while($i < 5) { $k = $keys[$i]. } echo("</ul>"). Und das dritte Argument kann wieder weitere Optionen enthalten. echo("<li><b>$k</b>: $_ENV[$k]"). var myAjax = new Ajax. Scriptaculous Für alle Komponente ausser der Ersten brauchen wir Scriptaculous.wikibooks. die alle im selben Ordner zur Verfügung stehen müssen.2007 11:05 . Das zweite Argument ist das Programm am Server das aufgerufen wird. Falls es auf Ihrem Server noch keinen interessanten Status abzufragen gibt. hier nur die Methode get. ?> Weitere Optionen für den PeriodicalUpdater wären: frequency . Das erste Argument enthält die ID einer div in der die Ergebnisse angezeigt werden sollen . falls sich der Output des Serverprogrammes nicht verändert hat Editierbarer Text Durch einen Klick wird aus einer normalen Zeile Text ein Eingabefeld.js" type="text/javascript"></script> <script src="scriptaculous.07.

php'. <p id="editme">Click me. Das Serverseitige Skript erhält seinen Input als Parameter value. </script> Achtung: new Ajax.us/scriptaculous/show/Ajax.. z.Autocompleter('nachname'.InPlaceEditor) .07. in der die List der Vervollständigungs-Vorschläge später angezeigt wird. ?> Siehe scriptaculous Doku (http://wiki.Websiteentwicklung: AJAX/ Druckversion . das diese id mit einem serverseitigen Skript verbindet.wikibooks.php?title=Websiteentwicklung:_AJA. ein Ajax.InPlaceEditor muss im Code nach dem entsprechenden Element kommen. Sie können diesen Befehl also nicht in den Head kopieren. Der Output des serverseitigen Skripts wird im Endeffekt als Text auf der Webseite angezeigt. der Server antwortet mit einer Liste von Vervollständigungs-Vorschlägen. 'textspeichern. und eine Style-Anweisung um sie unsichtbar zu machen: <input name="nachname" id="nachname"><div id="auto1" class="auto" style="display:none. {}). Der erste Buchstabe wird per AJAX an den Server geschickt.."></div> Aus diesen Elementen kann nun mit einem Befehl ein Textfeld mit Auto-Vervollständigung gemacht werden: <script> new Ajax.Autocompleter muss im Code nach dem Eingabefeld und der div kommen.Wikibooks http://de. Es kann den Text speichern. Diese Vorschläge werden im Browser angezeigt. Diese div hat die Klasse auto. Textfeld mit Auto-Vervollständigung Auto-Vervollständigen mit AJAX bedeutet: Die UserIn beginnt etwas in das Textfeld einzutippen.org/w/index. Sie können diesen Befehl also nicht in den Head kopieren.aculo. 'auto1'.script.: 12 von 17 10.php').2007 11:05 . 'emailnachschlagen.InPlaceEditor('editme'. Der Server sollte als Antwort wirklich eine Liste im HTML-Sinne liefern. und eventuell noch verändern. Ausserdem muss eine leere div vorhanden sein. Die einfachste Version (ohne speichern) wäre also: <?php echo $_REQUEST['value']. click me!</p> <script type="text/javascript"> new Ajax.B. Der Text der editierbar sein soll wir mit einer id gekennzeichnet. </script> Achtung: new Ajax.InPlaceEditor Objekt wird erstellt. die UserIn kann einen davon durch Klick auswählen. Das Textfeld für die Auto-Vervollständigung muss einen namen und eine id haben. eine eindeutige id.

Liste mit der Maus Umsortieren In diesem Bespiel kann die UserIn eine Liste mit drag-and-drop umsortieren. width: 400px. } </style> Die Liste (genauer gesagt: der ul-Tag) gehört zur Klasse sortabledemo. margin:0.sortabledemo { list-style-type: none. } ul.us/scriptaculous/show/Ajax.aculo. padding:0. } div.auto{ width: 150px. damit wird das Stylesheet wirksam.. font-size: smaller. } </style> Siehe scriptaculous Doku (http://wiki.create("liedliste". padding:0.sans-serif.highlight { color: #800. } div.Helvetica.wikibooks. list-style-type:none. font-family: Verdana. } div.07.. 13 von 17 10.script.sortabledemo li:hover { background-color: yellow. Sie können diesen Befehl also nicht in den Head kopieren. margin:0.sortabledemo li { border: 1px #ddd solid. } div.php?title=Websiteentwicklung:_AJA. {}). Mit Sortable.create muss im Code nach der Liste kommen.Autocompleter) .auto ul { border:1px solid #888. width:100%. background: #fff. padding:3px.auto ul strong.selected { background-color: #ffb. background: #fff. </script> Achtung: Sortable. Bild:Websiteentwicklung AJAX Sortiermich.gif Die Liste selbst wurde mit Style-Anweisungen etwas anders gestaltet: <style> ul.} ul.Wikibooks http://de.Websiteentwicklung: AJAX/ Druckversion .auto ul li { margin:0. <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. } div.org/w/index.auto ul li. Aussderm hat die Liste die id liedliste.create wird die Liste sortierbar: <script type="text/javascript"> Sortable.2007 11:05 .

Request(url.PeriodicalUpdater Element.script.hide(element) Zeigt ein beliebiges Element der Seite an bzw.devshare. Links prototype (http://prototype.html) Scriptaculous 14 von 17 10.google. entweder 'get' oder 'post' onComplete = Funktion die aufgerufen wird wenn eine Antwort vom Server vorliegt.07.de/_ajax/prototype.us/scriptaculous/show/Sortable.aculo.js.devshare. options-objekt) Startet eine AJAX-Abfrage.devshare.Wikibooks http://de..getElementByID(id)[4] (http://www. in den jeder und jede rein schreiben können.de/_ajax/prototype.de/_ajax/prototype. [5] (http://www. im URL-encoded Format Ajax.js.conio. Eigenschaften.Websiteentwicklung: AJAX/ Druckversion . gibt ein Objekt zurück.create) .us/) Referenz Liste der verwendeten Prototype und scriptaculous Objekte.html) Argumente: URL Objekt mit folgenden Eigenschaften method = Zugriffsmethode. gelöscht. Methoden: Prototype $(id) Abkürzung für document.js. versteckt es. Siehe scriptaculous Doku (http://wiki. Sie erhält als einziges Argument das XMLHTTPRequest-Objekt der AJAX-Abfrage. die letzten 10 Beiträge werden jeweils auf der Webseite angezeigt. Ü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.de/_ajax/prototype.org/w/index.org/wiki/Shoutbox) das ist ein minimaler Chat.com/imagelabeler/) .[6] (http://www.aculo.devshare.wikibooks. Dabei wird die Style-Anweisung display:none eingefügt bzw.wikipedia.show(element) Element.[7] (http://www. Ein Multi-User-Spiel wie der google image labeler[3] (http://images.js.serialize(form) gibt eine URL-encoded Parameter-Zeichenkette die dem aktuellen Zustand des Formulars entspricht.aculo.php?title=Websiteentwicklung:_AJA.net/) script.html) new Ajax.us (http://script. parameters = Parameter für die HTTP-Abfrage.2007 11:05 ..html) Form.

google. sollte man ins onUnload-Event des body einbauen.script. wie Sie Ajax unaufdringlich 15 von 17 10.php?title=Websiteentwicklung:_AJA.aculo.[10] (http://wiki. new Ajax.[16] (http://www.html#GControlImpl) map. level) zentriert die Landkarte auf Korrdinaten point. Lesen Sie den Wikipedia-Artikel zu Ajax für eine genaue Definition.setCenter(point.adaptivepath.com) in seinem Einführungsartikel (http://www.html#GMap2) [15] (http://www.[14] (http://www. dann wird dieser Wert in das Eingabefeld übernommen. Die UserIn kann daraus einen Wert mit der Maus auswählen (anklicken).com/apis/maps/documentation/#Memory_Leaks) Weitere Quellen Ajax (Asynchrones JavaScript + XML) ist ein Audruck. Rückgabewert ist ein map-Objekt.Autocompleter) Sortable..google.[19] (http://www. 13. url) Wenn das HTML-Element mit der id angeklickt wird verwandelt es sich in ein Eingabefeld mit ok-Button und Cancel-Link.07.google.google.Wikibooks http://de.html#GLatLng) map.google.com/apis/maps/documentation/reference.html#GControlImpl) map. {}) Die einzelnen Kind-Elemente des HTML-Containers id werden sortierbar .us/scriptaculous/show/Ajax.InPlaceEditor) new Ajax.aculo. Sinn und Zweck dieses Leitfadens ist.[8] (http://wiki.create(id.wikibooks.die LeserIn kann sie mit der Maus verschieben. Der Output des Server-Skript soll eine Liste sein (mit ul und li-Tags). Kartengrösse level (Werte von 1 bis 14)[18] (http://www. Hier kann die LeserIn den Text verändern und mit Enter oder klick auf den ok speichern.addControl(new GMapTypeControl()) Fügt ein Steuerelement hinzu.InPlaceEditor(id.com/apis/maps/documentation/reference. der Parameter-Name ist value.039999) Erzeugt ein Koordinatenpaar[13] (http://www.google.google.adaptivepath. {}) Wenn die UserIn etwas in das Eingabefeld mit name eintippt.[9] (http://wiki.aculo. (Der Parametername wird der Namen des Eingabefelds verwendet).und Raus-zoomen und Verschieben der Karte hinzu. Der Output des Server-Programms wird als neuer Text im HTML-Element dargestellt.2007 11:05 .html#GMap2) [17] (http://www.script.com/apis/maps/documentation/reference.php) zu dem Thema ins Leben gerufen wurde.google.810001.org/w/index. id div.html#GBrowserIsCompatible) map = new GMap2(id) Verwandelt die div mit der id in eine Landkarte.addControl(new GSmallMapControl()) Fügt ein Steuerelement für Rein.Autocompleter(name eingabefeld.com/apis/maps/documentation/reference. Diese Liste wird in der div mit der angegebenen id angezeigt. url.com/apis/maps/documentation/reference.script.[12] (http://www. dann wird dieses Text-Fragment an das Server-Skript url geschickt. Der eingegeben Text wird an das Server-Programm mit der url geschickt.us/scriptaculous/show/Ajax.create) Google Maps API GBrowserIsCompatible Testet ob im aktuellen Browser Google Maps überhaupt funktioniert.com/apis/maps/documentation/reference.com/apis/maps/documentation/reference.html#GMap2) GUnload() ent-lädt die Landkarte.html#GMap2) point = new GLatLng(47.com/apis/maps/documentation/reference. der von Jesse James Garret von Adaptive Path (http://www.us/scriptaculous/show/Sortable. Ihnen zu zeigen. In einem if() verwenden![11] (http://www.com/publications/essays/archives/000385.Websiteentwicklung: AJAX/ Druckversion ..google. mit dem man zwischen Satellitenkarte und Strassenkarte hin und her schalten kann.

die folgenden werden empfohlen. Angesichts dieser Tatsachen gibt es einige Konzepte. ohne auf Abwärtskompatibilität zu Browsern. Obwohl ich jeden herzlich einlade. Weiterlesen Mozilla developer wiki: Ajax (http://developer. ist es aus Gründen des Urheberrechts unmöglich.com/javascript/ajax. für (aber auch gegen) die Benutzung von Ajax zu werben.org/en/docs/AJAX) Wiki:JavaScriptAbuse (http://c2. können Webentwickler von einer JavaScript-Bibliothek für Ajax (http://www. wenn Sie mit Ajax arbeiten wollen.html) in Ihre Webanwendungen einbinden können.org/w/index.2007 11:05 . die Ajax nicht unterstützen. Deswegen wird hier versucht. Durch geschicktes Einbauen von JavaScript-Schaltern in Ihren Code können Sie ihre Website auf eine neue Ebene der Interaktivität bringen. die Liste zu erweitern.org) zu deaktivieren.org/) Zurück zu Referenz | Hoch zu AJAX 16 von 17 10.Wikibooks http://de. Außerdem sind stellen diese Seiten oft genau das Konzept zur Schau.onlinetools. 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. seine Inhalte hier einzubinden. Es sind aber nicht alle unbedingt nötig. Auf diese Weise können Sie Ihr Angebot verbessern. die sich entschlossen haben.yourhtmlsource. von jedem die Einverständnis zu erhalten. aber die endgültige Arbeit sollte in andere Wikibooks oder Websites ausgelagert werden. Sofern ein Konzept mit Ajax zusammenhängt..Websiteentwicklung: AJAX/ Druckversion . sollte es hier beschrieben werden. wenn JavaScript deaktiviert ist. eine möglichst unvoreingenommene Liste dieser Seiten zu erstellen.wikibooks. (http://www.mozilla. Es gibt bereits einige Websites. um sich seinen eigenen Code zusammenzukopieren. gängige Browserprobleme zusammenzufassen und bewirken so.com/cgi/wiki?JavaScriptAbuse) the Ajax Patterns wiki (http://ajaxpatterns. ohne die Benutzer auszuschließen. JavaScript aus Sicherheitsgründen oder wegen browserspezifischer Besonderheiten (http://www.org/articles/unobtrusivejavascript/chapter1.. die es sich zur Aufgabe gemacht haben. wo es bereits herausgearbeitet wurde oder werden soll. Diese Bibliotheken erlauben es. und zwar so.php?title=Websiteentwicklung:_AJA.html) Gebrauch machen. dass Ihre Website noch funktioniert. dass sie zu beschreiben versuchen. verzichten zu müssen.07.quirksmode. mit denen Sie sich vertraut machen sollten. dass sich Webentwickler weiter mit ihrer Anwendung beschäftigen können.

.wikibooks. 17 von 17 10.Wikibooks http://de.wikibooks. Inhalt ist verfügbar unter der GNU Free Documentation License.org/wiki/Websiteentwicklung:_AJAX/_Druckversion“ Kategorie: Buch mit Druckversion Diese Seite wurde zuletzt am 25.org/w/index.2007 11:05 .php?title=Websiteentwicklung:_AJA.07. Oktober 2006 um 00:22 Uhr geändert.. </noinclude> Von „http://de.Websiteentwicklung: AJAX/ Druckversion .