AJAX
Werbung
Johannes Gamperl AJAX Grundlagen, Frameworks, APIs Liebe Leserin, lieber Leser, wahrscheinlich kennen Sie bereits viele Beispiele für erfolgreiche AJAX-Anwendungen. Virtuelle Landkarten wie Google Maps, webbasierte Büroanwendungen wie AJAXWrite, IRows oder nexImage, Social-Web-Software wie Flickr oder del.icio.us oder andere innovative Websites haben die Welt der Internetprogrammierung deutlich verändert. Allen gemeinsam ist die Verwendung von Asynchronous JavaScript and XML als Basistechnologie. AJAX-Anwendungen finden sich heute aber nicht nur auf großen professionellen Seiten. Selbst kleine Projekte nutzen das Zusammenspiel von JavaScript und XML und stellen so Nutzern und Benutzern benutzerfreundliche Webseiten zur Verfügung. Unser Autor Johannes Gamperl gehört zu den Pionieren der professionellen Webentwicklung in Deutschland. Seine Webseiten Kakao & Kekse, Milch & Zucker bzw. Kaffee und Kuchen waren für viele die erste Anlaufstelle im Netz, wenn es um JavaScript, DHTML oder Java ging. Auch die Möglichkeiten von AJAX hat Johannes Gamperl bereits früh für sich entdeckt. Und schon die erfolgreiche erste Auflage dieses Buches hat gezeigt, dass er auch als Autor sein Handwerk versteht. Grundkenntnisse in JavaScript sollten Sie allerdings bereits mitbringen. Johannes Gamperl führt Sie souverän um alle Klippen der AJAXEntwicklung, vermittelt Ihnen die Grundlagen des Document Object Model (DOM), der objektorientierten Programmierung sowie der Client-/Server-Entwicklung mit JavaScript. Einen besonderen Schwerpunkt legt er dabei auf die Arbeit mit gängigen Libraries (z. B. Google Maps) oder mit JavaScript-Frameworks wie Prototype und script.aculo.us, mit denen Sie schnell auf AJAX-Grundfunktionen zugreifen und visuelle Effekte nutzen können. Zahlreiche Praxisbeispiele hat Johannes Gamperl für dieses Buch entwickelt, die er Ihnen im letzten Teil ausführlich vorstellt. Ihre Meinung ist uns wichtig. Kritik oder Zuspruch hilft uns bei der Arbeit an weiteren Auflagen. Ich freue mich deshalb, wenn Sie sich mit Ihren kritischen Anmerkungen an mich wenden oder den Kontakt zum Autor auf seiner Webseite oder in seinem Forum unter www.ajax-scripting.de suchen. Ihr Stephan Mattescheck Lektorat Galileo Computing [email protected] www.galileocomputing.de Galileo Press · Rheinwerkallee 4 · 53227 Bonn Auf einen Blick 1 Einleitung ................................................................ 11 2 JavaScript und DOM ............................................... 21 3 JavaScript und CSS .................................................. 69 4 JavaScript und OOP ................................................ 99 5 JavaScript und XML ................................................ 129 6 JavaScript und HTTP ................................................ 165 7 JavaScript und Libraries .......................................... 233 8 Praxisbeispiele ........................................................ 375 9 Google & Yahoo! ...................................................... 451 10 Inhalt der Buch-DVD-ROM ..................................... 497 Der Name Galileo Press geht auf den italienischen Mathematiker und Philosophen Galileo Galilei (1564–1642) zurück. Er gilt als Gründungsfigur der neuzeitlichen Wissenschaft und wurde berühmt als Verfechter des modernen, heliozentrischen Weltbilds. Legendär ist sein Ausspruch Eppur se muove (Und sie bewegt sich doch). Das Emblem von Galileo Press ist der Jupiter, umkreist von den vier Galileischen Monden. Galilei entdeckte die nach ihm benannten Monde 1610. Gerne stehen wir Ihnen mit Rat und Tat zur Seite: [email protected] bei Fragen und Anmerkungen zum Inhalt des Buches [email protected] für versandkostenfreie Bestellungen und Reklamationen [email protected] für Rezensions- und Schulungsexemplare Lektorat Stephan Mattescheck Fachgutachten Carsten Möhrke und Julian Dreißig Korrektorat René Wiegand Cover Barbara Thoben, Köln Titelbild Corbis Typografie und Layout Vera Brauner Herstellung Vera Brauner Satz Typographie & Computer, Krefeld Druck und Bindung Koninklijke Wöhrmann, Zutphen, NL Dieses Buch wurde gesetzt aus der Linotype Syntax Serif (9,25/13,25 pt) in FrameMaker. Gedruckt wurde es auf fein holzhaltigem Naturpapier. Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar. ISBN 978-3-89842-857-6 © Galileo Press, Bonn 2007 2., aktualisierte und erweiterte Auflage 2007 Das vorliegende Werk ist in all seinen Teilen urheberrechtlich geschützt. Alle Rechte vorbehalten, insbesondere das Recht der Übersetzung, des Vortrags, der Reproduktion, der Vervielfältigung auf fotomechanischem oder anderen Wegen und der Speicherung in elektronischen Medien. Ungeachtet der Sorgfalt, die auf die Erstellung von Text, Abbildungen und Programmen verwendet wurde, können weder Verlag noch Autor, Herausgeber oder Übersetzer für mögliche Fehler und deren Folgen eine juristische Verantwortung oder irgendeine Haftung übernehmen. Die in diesem Werk wiedergegebenen Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. können auch ohne besondere Kennzeichnung Marken sein und als solche den gesetzlichen Bestimmungen unterliegen. Inhalt 1 Einleitung ................................................................................. 11 1.1 1.2 1.3 1.4 1.5 1.6 1.7 2 12 17 18 19 19 20 20 JavaScript und DOM ................................................................ 21 2.1 2.2 2.3 3 Eine kurze Reise durch die AJAX-Welt ......................................... Zielgruppe des Buches ................................................................. Aufbau des Buches ...................................................................... Anmerkungen zur zweiten Auflage ............................................... Hinweise zu den Inhalten ............................................................. Danksagung ................................................................................. Support zum Buch ....................................................................... Der Dokumentenbaum ................................................................ 2.1.1 Knoten .......................................................................... 2.1.2 Konstanten ................................................................... 2.1.3 Eigenschaften ................................................................ 2.1.4 Attribute ....................................................................... 2.1.5 Methoden ..................................................................... 2.1.6 Einfaches Beispiel .......................................................... Zugriff auf einzelne Elemente ....................................................... 2.2.1 Eigenschaften ................................................................ 2.2.2 Elemente selektieren ..................................................... 2.2.3 Attribute bearbeiten ..................................................... 2.2.4 Elemente erzeugen ........................................................ 2.2.5 Einfaches Beispiel .......................................................... Beispielprojekt »Planetensystem« ................................................. 22 23 24 25 30 33 39 44 45 48 54 58 60 63 JavaScript und CSS ................................................................... 69 3.1 3.2 3.3 3.4 Grundlagen .................................................................................. Style-Eigenschaften ...................................................................... 3.2.1 getComputedStyle() und currentStyle ............................ Stylesheet-Eigenschaften ............................................................. 3.3.1 Praxisbeispiel StyleSwitcher ........................................... 3.3.2 setProperty(), getPropertyValue() und removeProperty() .......................................................... 3.3.3 Eigenschaften des styleSheets[ ]-Arrays .......................... Regeln für Stylesheets .................................................................. 70 71 74 76 81 85 87 95 5 Inhalt 4 JavaScript und OOP ................................................................. 99 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 5 5.4 5.5 Grundlagen .................................................................................. XML laden ................................................................................... XML parsen ................................................................................. 5.3.1 XML mit dem DOM parsen ........................................... 5.3.2 Gecko-Browser und das DOM ....................................... 5.3.3 Geckos DOMParser ....................................................... Beispielprojekt »Buchladen« ......................................................... Vorschau auf E4X ........................................................................ 5.5.1 Elemente auslesen ........................................................ 5.5.2 Attribute auslesen ......................................................... 5.5.3 Filter verwenden ........................................................... 5.5.4 Struktur verändern ........................................................ 5.5.5 Platzhalter verwenden ................................................... 5.5.6 Elemente löschen .......................................................... 5.5.7 Fazit .............................................................................. 130 131 135 136 138 140 144 150 153 155 155 159 161 163 164 JavaScript und HTTP ................................................................ 165 6.1 6.2 6 100 101 103 104 107 109 116 120 JavaScript und XML ................................................................. 129 5.1 5.2 5.3 6 Klassen ........................................................................................ Eigenschaften .............................................................................. Abfragen ...................................................................................... Methoden ................................................................................... Prototypen .................................................................................. Literale ........................................................................................ JSON ........................................................................................... Praxisbeispiel ............................................................................... Grundlagen .................................................................................. 6.1.1 Client-Request-Methoden ............................................. 6.1.2 Server-Antwortcodes .................................................... 6.1.3 HTTP-Header ................................................................ XMLHttpRequest ......................................................................... 6.2.1 Das Objekt erzeugen ..................................................... 6.2.2 Methoden ..................................................................... 6.2.3 Eigenschaften ................................................................ 6.2.4 Hallo Ajax ..................................................................... 6.2.5 ajaxRequest-Klasse ........................................................ 6.2.6 Den Ladezustand anzeigen ............................................ 6.2.7 Eine Verbindung unterbrechen ...................................... 166 167 168 173 178 179 182 185 188 189 200 202 Inhalt 6.2.8 6.2.9 6.2.10 6.2.11 6.2.12 6.2.13 6.2.14 7 204 205 208 209 210 217 224 JavaScript und Libraries ........................................................... 233 7.1 7.2 7.3 8 Automatische Updates .................................................. JavaScript ausführen ...................................................... Probleme mit dem Cache .............................................. AJAX mit JSON ............................................................. Externe Quellen nutzen ................................................. Das Historie-Problem .................................................... Beispielprojekt Shoutbox .............................................. Prototype .................................................................................... 7.1.1 ajax.js ............................................................................ 7.1.2 array.js .......................................................................... 7.1.3 base.js ........................................................................... 7.1.4 dom.js ........................................................................... 7.1.5 enumerable.js ............................................................... 7.1.6 event.js ......................................................................... 7.1.7 form.js .......................................................................... 7.1.8 hash.js .......................................................................... 7.1.9 range.js ......................................................................... 7.1.10 string.js ......................................................................... script.aculo.us .............................................................................. 7.2.1 Ajax.InPlaceEditor ......................................................... 7.2.2 Ajax.InPlaceCollectionEditor ......................................... 7.2.3 Builder-Klasse ............................................................... 7.2.4 Drag&Drop ................................................................... 7.2.5 Visuelle Effekte ............................................................. 7.2.6 Kombinationen ............................................................. Behaviour .................................................................................... 234 235 253 259 272 286 300 308 320 322 323 328 328 332 333 336 354 361 366 Praxisbeispiele ......................................................................... 375 8.1 8.2 8.3 ajaxBooks .................................................................................... 8.1.1 Die Daten abrufen ........................................................ ajaxChat ...................................................................................... 8.2.1 Das Anmelden .............................................................. 8.2.2 Das Abmelden .............................................................. 8.2.3 Beiträge speichern ......................................................... 8.2.4 Die Userliste und Beiträge anzeigen .............................. ajaxComplete ............................................................................... 8.3.1 Lokale Auswahl ............................................................. 8.3.2 Formatierungen ............................................................ 8.3.3 Auswahl per AJAX ......................................................... 376 383 384 391 393 394 395 396 398 400 401 7 Inhalt 8.4 8.5 8.6 8.7 8.8 9 ajaxDict ....................................................................................... 8.4.1 Erklärung abrufen und eintragen ................................... ajaxDir ......................................................................................... 8.5.1 Auslesen der Verzeichnisstruktur ................................... 8.5.2 Anzeige des Dateiinhalts ............................................... 8.5.3 Zippen der Packliste ...................................................... Sichere Passwörter mit ajaxPass ................................................... 8.6.1 Die Passwortsicherheit überprüfen ................................ 8.6.2 Zufällige Passwörter erzeugen ....................................... ajaxTic – ein Strategiespiel ........................................................... 8.7.1 Die XML-Datei erzeugen ............................................... 8.7.2 Die XML-Datei aktualisieren ......................................... Ajax.FCKeditor ............................................................................ 8.8.1 Den FCKEditor installieren ............................................ 8.8.2 Editierbare Elemente erzeugen ...................................... 8.8.3 Die Werkzeugleiste des FCKEditor anpassen ................. 8.8.4 Sicherheitsüberlegungen ............................................... 404 410 413 421 422 423 424 428 429 430 440 442 444 445 445 448 449 Google & Yahoo! ...................................................................... 451 9.1 9.2 Google Maps ............................................................................... 9.1.1 Grundlagen ................................................................... 9.1.2 Steuerelemente ............................................................. 9.1.3 Markierungspunkte ....................................................... 9.1.4 Detailinformationen ...................................................... 9.1.5 Event-Modell ................................................................ 9.1.6 Linien zeichnen ............................................................. 9.1.7 AJAX ............................................................................. 9.1.8 Beispielanwendung ....................................................... Yahoo! Maps ............................................................................... 9.2.1 Grundlagen ................................................................... 9.2.2 Steuerelemente ............................................................. 9.2.3 Markierungspunkte ....................................................... 9.2.4 Detailinformationen ...................................................... 9.2.5 Beispielanwendung ....................................................... 452 452 457 458 462 465 470 472 473 478 479 482 484 487 489 10 Inhalt der Buch-DVD-ROM ...................................................... 497 Index ............................................................................................................ 499 8 Video-Lektionen auf der DVD Sie finden die Video-Lektionen im Verzeichnis /videotraining auf der Buch-DVD. DOM – Document Object Model 1.1 Einleitung 1.2 Grundlagen von DOM 1.3 DOM-Zugriffsmöglichkeiten 1.4 Elemente in den DOM-Baum einfügen Zusammenfassung Wissenstest zu diesem Kapitel AJAX & Co 2.1 Einleitung 2.2 Daten serialisieren mit JSON 2.3 Daten serialisieren mit XML 2.4 XSL und XSLT erstellen 2.5 Der XSLTProcessor 2.6 AJAX-Frameworks: Atlas 2.7 AJAX-Frameworks: Dojo Zusammenfassung Wissenstest zu diesem Kapitel 9 »After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? All the cool, innovative new projects are online.« Jesse James Garrett 1 Einleitung Sie haben dieses Buch gekauft, um sich mit der Thematik AJAX1 vertraut zu machen. Vorab: Was ist AJAX nicht? AJAX ist keine holländische Fußballmannschaft, kein Asteroid, kein Haushaltsreiniger und auch keiner der beiden griechischen Heeresführer im Trojanischen Krieg aus Homers Ilias, AJAX der Große oder AJAX der Kleine. Aber was ist AJAX dann? Ausgeschrieben bedeutet es Asynchronous (A) JavaScript (J) and (A) XML (X). Das Geheimnis von AJAX liegt nicht in einer neuen Technik, sondern in einer sinnvollen und kreativen Anwendung bestehender Techniken. Die wesentlichen Grundlagen von AJAX sind nicht neu. Sie wurden bisher nur noch nicht in der Form und dem Ausmaß angewandt, wie es aktuell der Fall ist. Auf eine historische Betrachtung wird hier verzichtet. Im Internet finden sich zahlreiche Quellen mit entsprechenden Informationen.2 Das Apronym AJAX wurde erstmalig in einem kurzen Artikel von Jesse James Garrett mit dem Titel »A New Approach to Web Application«3 erwähnt und hat von da an einen neuen, bis heute anhaltenden Boom ausgelöst. Der Begriff selbst ist unter dem Schlagwort »Web 2.0«4 einzuordnen, das die unterschiedlichen Techniken und Dienste moderner Webanwendungen vereint. Damit wurde die nächste Generation der Webentwicklung eingeläutet. Mithilfe von AJAX wurde es möglich, eine Datenübertragung zwischen Client/ Server im Hintergrund durchzuführen, ohne dass der Anwender dies bemerkt. Die aktuelle Seite wird dabei nicht neu geladen, es werden lediglich die relevan- 1 2 3 4 http://de.wikipedia.org/wiki/ajax Beispielsweise http://garrettsmith.net/blog/archives/2006/01/microsoft_inven_1.html http://adaptivepath.com/publications/essays/archives/000385.php http://de.wikipedia.org/wiki/Web_2.0 11 1 Einleitung ten Inhalte mit den angeforderten Daten aktualisiert. Die wesentlichen Bausteine von AJAX beruhen auf den folgenden Techniken: 왘 XHTML und CSS für die Formatierung einer Webseite 왘 Das Document Object Model (DOM) für den dynamischen Zugriff auf den Dokumentenbaum 왘 XML oder JSON für den Datenaustausch und XSLT für die Transformation 왘 Das XMLHttpRequest-Objekt für eine Client/Server-Kommunikation auf asynchroner Basis 왘 JavaScript als Schnittstelle all dieser Komponenten AJAX ist demnach eine Art »Schweizer Taschenmesser« moderner Webentwicklung und kann – kreativ angewendet – für mehr Komfort und Flexibilität in Ihren Anwendungen sorgen. Die Schwierigkeit bzw. Herausforderung in AJAX liegt weniger in den Technologien selbst begründet, als vielmehr im kreativen Umgang des Entwicklers mit den neuen Möglichkeiten. In den folgenden Kapiteln erhalten Sie alle notwendigen Grundlagen, um die einzelnen Techniken in einer Kombination in Form von AJAX sinnvoll anzuwenden. Ziel dieses Buches ist, Ihnen die fortgeschrittenen Themen der JavaScript-Programmierung für die Anwendung mit AJAX zu vermitteln. 1.1 Eine kurze Reise durch die AJAX-Welt Für erste Aha-Erlebnisse in Bezug auf AJAX sorgte Google mit seinen Anwendungen »Google Suggest« und »Google Maps«, worauf Yahoo! seine »Yahoo! Maps« einführte. Auf diese Anwendungen wird in den späteren Kapiteln näher eingegangen. Mittlerweile werden zahlreiche mit AJAX entwickelte Anwendungen angeboten. Eine kleine Reise durch die Welt von AJAX soll Ihnen einen ersten Eindruck von den vielfältigen Möglichkeiten dieser Technik vermitteln. Die erste Station der Reise führt zu »Flickr«5, einem Angebot von Yahoo!, mit dem Sie Ihre Fotos mit anderen Anwendern teilen können. Zahlreiche innovative Elemente sorgen dabei für ein angenehmes Navigieren innerhalb der angebotenen Fotoalben. Mithilfe von »Netvibes«6 können Sie eine personalisierte Homepage mit Elementen für die Anzeige von Börsenkursen, des Wetters, Newsfeeds und vieles mehr einrichten. Die einzelnen Inhalte können mit der Maus per Drag&Drop nach 5 http://www.flickr.com/ 6 http://www.netvibes.com/ 12 Eine kurze Reise durch die AJAX-Welt eigenen Wünschen arrangiert werden. In ähnlicher Weise bietet »Protopage«7 seinen Service an. Seit AJAX die Karten im Internet neu gemischt hat, erfreuen sich Anwendungen, die typische Office-Applikationen nachbilden, großer Beliebtheit. »Thumbstacks«8 ist ein interessantes Tool, um Präsentationsfolien für das Web zu erstellen. Für das Gestalten Ihrer Folien stehen Ihnen zahlreiche Werkzeuge zur Verfügung. Texte und Elemente können per Drag&Drop arrangiert und in ihrer Optik angepasst werden. Ebenso ist es möglich, die einzelnen Seiten der Präsentation per Drag&Drop neu anzuordnen. Selbst die rechte Maustaste wird in der Anwendung unterstützt, um beispielsweise mehrere Objekte zu Gruppieren. Mithilfe von »TinyMCE«9 erhalten Sie einen kostenlosen Online-Editor mit zahlreichen Funktionen, wie beispielsweise einen dynamischen Dateibrowser oder einer Rechtschreibprüfung. Dieser Editor eignet sich hervorragend für den Einsatz in Online-Tools – beispielsweise in einem CMS oder einem Weblog. Unter dem Label »ajax13«10 werden Ihnen unterschiedliche Tools zur Arbeit im Office-Stil angeboten. Darunter finden sich Anwendungen zur Präsentation, Tabellenkalkulation, Textverarbeitung oder zur Darstellung von Ablaufdiagrammen. Abbildung 1.1 Unter dem Label ajax13 finden Sie zahlreiche Office-Anwendungen. 7 8 9 10 http://www.protopage.com/ http://www.thumbstacks.com/ http://tinymce.moxiecode.com/ http://eu.ajax13.com/ 13 1.1 1 Einleitung Bilder können Sie mit »Picresize«11 per AJAX direkt online bearbeiten. Dazu laden Sie eine oder mehrere Grafiken auf den Server des Anbieters, der diese temporär zwischenspeichert. Anschließend können Sie die Grafiken nach Ihren Vorstellungen ausschneiden, verkleinern oder vergrößern. Für eine optische Veränderung der Bilder ist es möglich, zwischen unterschiedlichen Effekten, wie beispielsweise das Rotieren des Bildes, Farbumwandlungen, einfügen von Unschärfe oder das Einrahmen mit einer gewünschten Farbe zu wählen. Die bearbeiteten Bilder stehen abschließend in den Formaten GIF, JPEG oder PNG für die weitere Verwendung zum Download zur Verfügung. Für dynamische Webanwendungen ist ein gut durchdachtes Datenbankdesign eine wichtige Voraussetzung für eine erfolgreiche Umsetzung. Mit Hilfe der AJAX-Anwendung »WWW SQL Designer«12 können Sie die Struktur Ihrer Datenbank interaktiv über Ihren Webbrowser planen. Neben der optischen Darstellung der Tabellenstruktur ist es zudem möglich, Beziehungen einzelner Tabellen zueinander per Drag&Drop zu bestimmen und darzustellen. Die fertige Struktur kann in verschiedene Formate exportiert und anschließend in eine Datenbank importiert werden. Abbildung 1.2 Der SQL Designer erlaubt es dem Anwender, über eine dynamische Weboberfläche ein Datenmodell zu planen und zu erzeugen. 11 http://www.picresize.com/ 12 http://ondras.praha12.net/sql/ 14 Eine kurze Reise durch die AJAX-Welt »Wufoo«13 hilft Ihnen bei der Gestaltung von einfachen bis hin zu komplexen Formularanwendungen. Ansprechende Formulare, Umfragen, Mailinglisten, ein Warenkorbsystem und vieles mehr, sind somit im Handumdrehen erzeugt. Dazu werden Sie schrittweise an das Ergebnis herangeführt. »Wufoo« beschränkt sich dabei aber nicht nur auf die Gestaltung, sondern erzeugt auch zugleich dynamisch alle relevanten Skripte für die Datenverarbeitung und Fehlerbehandlung; falls nötig auch die Datenbankanbindung sowie ein Backend für die Administration der eingehenden Daten. Die Anwendung selbst wird auf dem Server von »Wufoo« gehostet. Sie können dabei aus verschiedenen Dienstleistungspaketen wählen. Zum Kennenlernen wird Ihnen ein kostenloser Account mit eingeschränkter Möglichkeit angeboten. In den kostenpflichtigen Varianten stehen Ihnen unter anderem ein großer Speicherplatz, unlimitierte Formularanwendungen sowie eine SSL-Verschlüsselung zur Verfügung. Die Anwendung selbst ist dank AJAX komfortabel und übersichtlich zu bedienen. »Sidekiq«14 ist ein Suchportal, welches auf der AJAX-Technologie basiert. Für die Suche erzeugt diese Anwendung dynamisch eine Sidebar, welche fortan auf allen Seiten, die im Folgenden angesteuert werden, verfügbar bleibt. Diese Sidebar kann per Mausklick minimiert und wieder vergrößert werden. Bei Ihrer Recherche ist es möglich aus über 20 Kategorien zu wählen, in denen Sie nach bestimmten Begriffen suchen können. »Sidekiq« steuert dazu aus unzähligen Suchmaschinen selbstständig eine für die aktuelle Anfrage am geeignetsten erscheinende an. Per Standard wird die Suche mit Google ausgeführt. Sie wollten immer schon wissen, was die Stunde in Hong Kong oder in Sydney schlägt? Dann ist World »Clockr«15 genau das Richtige für Sie. Mit dieser AJAXAnwendung können Sie sich die aktuelle Uhrzeit für eine beliebige Zielstadt anzeigen lassen. Die Vorgehensweise dazu ist denkbar einfach. Zunächst tragen Sie in einem Suchfeld die gewünschte Stadt ein, zu der Sie die Uhrzeit wissen möchten. Nach dem Absenden der Anfrage wird die Zieladresse mit Hilfe von Google Maps angezeigt. Hier können Sie dann noch eine Feinjustierung des Ziels vornehmen. Anschließend wird eine Uhr als Widget in einem ansprechenden Design für Ihre Webseite erzeugt. Nach diesem Muster ist es möglich, sich beliebig viele Uhren – etwa für einen Vergleich – anzeigen zu lassen. Die jeweiligen Zeiten können Sie im amerikanischen oder europäischen Format darstellen und zwischen diesen Ansichten jederzeit wechseln. 13 http://www.wufoo.com/ 14 http://www.sidekiq.com/ 15 http://www.worldclockr.com/ 15 1.1 1 Einleitung Für mathematisch ambitionierte Anwender bietet »Fooplot«16 ein interessantes Angebot. Mit diesem Service können bis zu vier Funktionen gleichzeitig als Plotgrafik angezeigt werden. Für die Darstellung der Funktionen ist es möglich, zwischen einer 2-D- und 3-D-Ansicht zu wählen. Über eine kleine Toolbox können Sie in der Darstellung zoomen und sich per Drag&Drop – ähnlich wie bei Google Maps – im Koordinatensystem bewegen. Die Optik der Darstellung kann nach eigenen Wünschen beeinflusst werden, um beispielsweise das Gitternetz oder das Zahlenraster auszublenden oder einen neuen Koordinatenbereich zu definieren. Neben der Möglichkeit, Funktionen über eine Formulareingabe einzubinden, ist es über eine entsprechend formatierte Query möglich, diese direkt per URL anzeigen. Technisch betrachtet werden die Plots mit Hilfe von SVG und VML erzeugt und per AJAX dynamisch manipuliert. Ein Wörterbuch der besonderen Art wird von »ObjectGraph Dictionary«17 angeboten. Hier können Sie dynamisch auf unterschiedliche Ergebnislisten einer Suche springen. Ein Artikel erklärt in einzelnen Schritten das technische Konzept. Einen vollwertigen Messenger für die Dienste von AIM, GTalk, ICQ, Jabber, MSN oder Yahoo! über eine webbasierte Oberfläche bietet eine Anwendung mit dem Namen »meebo«18 .Für eine webbasierte E-Mail-Verwaltung erhalten Sie mit »Zimbra«19 eine mächtige Anwendung mit zahlreichen Funktionen. Die Arbeit mit diesem Tool vermittelt dem Anwender fast das Gefühl einer echten Desktop-Anwendung. Die Liste interessanter AJAX-Anwendungen ließe sich beliebig lang fortsetzen. Zahlreiche Webangebote, wie beispielsweise »Ajaxian«20, »AJAX Matters«21, »AJAX Info«22 oder »AJAX blog«23 informieren mittlerweile fast täglich über Neuigkeiten aus der AJAX-Szene. 16 17 18 19 20 21 22 23 16 http://www.fooplot.com/ http://www.objectgraph.com/dictionary/ http://www.meebo.com/ http://www.zimbra.com/ http://www.ajaxian.com/ http://www.ajaxmatters.com/ http://ajaxinfo.com/ http://ajaxblog.com/ Zielgruppe des Buches Abbildung 1.3 Zimbra ist ein mächtiger E-Mail-Client mit zahlreichen Funktionen. 1.2 Zielgruppe des Buches Dieses Buch versteht sich nicht als Einführungslektüre. Es richtet sich in erster Linie an fortgeschrittene Webentwickler sowie an Profis, die sich mit AJAX aus beruflichen oder privaten Gründen beschäftigen. Aber auch der interessierte und ambitionierte fortgeschrittene Laie wird sich in diesem Buch zurechtfinden. Für den sicheren Umgang mit AJAX werden in diesem Buch die wesentlichen Grundlagen von CSS, JavaScript, PHP sowie XHTML vorausgesetzt. Sie sollten daher bereits erste Erfahrungen in der clientseitigen Webentwicklung gesammelt haben und mit den Grundlagen der CGI-Programmierung anhand der Skriptsprache PHP vertraut sein. Begriffe wie Variablen, Arrays oder Schleifen sollten Ihnen bekannt sein. Für einen schnellen Zugang zu den Themen des Buches wurden die Inhalte und Beispiele möglichst einfach gestaltet. 17 1.2 1 Einleitung 1.3 Aufbau des Buches Bei der Aufbereitung der Inhalte wurde darauf geachtet, möglichst praxisorientiert auf das jeweilige Thema einzugehen. Die Beispiele in den einzelnen Kapiteln helfen, den Lernerfolg zu beschleunigen, und geben Anregungen und Ideen für eigene Erweiterungen und Anwendungen. Für die Transformation der Daten wird in diesem Buch nicht auf XSLT eingegangen, sondern mit DOM und CSS gearbeitet, die in der Webentwicklung als Standards anzusehen sind. Die einzelnen Kapitel können sowohl nacheinander gelesen als auch einzeln nach Ihren Interessen durchgearbeitet werden. Einige Kapitel erwarten dabei Kenntnisse aus vorangegangenen Kapiteln, sind aber in der Regel auch für sich allein gut zu verstehen. Jedes der acht Arbeitskapitel schließt mit einem Praxisbeispiel, in dem die vermittelten Inhalte angewendet werden. Das Buch ist wie folgt aufgebaut: In Kapitel 2, JavaScript und DOM, werden die Grundlagen des Document Object Models vorgestellt. Dabei wird auf die wichtigsten Eigenschaften und Methoden mit kurzen Beispielen eingegangen. Der sichere Umgang mit DOM ist eine der Grundvoraussetzungen für die Arbeit mit AJAX. Das notwendige Wissen über die Möglichkeiten mit JavaScript dynamisch ein Stylesheet zu bearbeiten vermittelt Kapitel 3, JavaScript und CSS. Für ein besseres Verständnis der OOP in Verbindung mit JavaScript werden in Kapitel 4, JavaScript und OOP, die Grundlagen und fortgeschrittene Aspekte vorgestellt. Wie Sie mit JavaScript auf XML-Daten zugreifen und diese bearbeiten können, zeigt Kapitel 5, JavaScript und XML. Darüber hinaus erhalten Sie hier einen ersten Ausblick auf den zukünftigen Standard E4X. Die relevanten Grundlagen zu AJAX und dem XMLHttpRequest-Objekt werden in Kapitel 6, JavaScript und HTTP, vorgestellt. Dabei wird auch auf die Grundlagen des HTTP-Protokolls eingegangen, was für das Verstehen von Client/ServerAnwendungen erforderlich ist. Kapitel 7, JavaScript und Libraries, stellt einige der interessantesten JavaScriptBibliotheken in Verbindung mit AJAX vor. Diese dienen zugleich als Grundlage für die Praxisbeispiele des nächsten Kapitels. Damit Sie den praktischen Nutzen von AJAX besser nachvollziehen können, werden in Kapitel 8, Praxisbeispiele, sieben unterschiedliche Projekte in ihren einzel- 18 Hinweise zu den Inhalten nen Schritten vorgestellt. Die jeweiligen Anwendungen sollen Ihnen Anregungen und Ideen für eigene Erweiterungen und Projekte geben. Mit einem Einblick in die Arbeit zu Google und Yahoo! Maps in Kapitel 9, Google & Yahoo!, schließt dieses Buch. Hier erfahren Sie alles, was für den erfolgreichen Einsatz dieser Anwendungen erforderlich ist. 1.4 Anmerkungen zur zweiten Auflage Zunächst möchte ich mich bei allen Lesern bedanken, die mich auf Fehler der ersten Auflage aufmerksam gemacht haben. Diese Hinweise haben mir sehr bei der Überarbeitung dieses Buches geholfen. Generell wurden alle Kapitel einer textlichen und wo nötig, einer inhaltlichen Überarbeitung unterzogen. Das Kapitel 7, JavaScript und Libraries, wurde komplett überarbeitet. Meine Absicht hierbei ist es, eine möglichst umfassende Dokumentation zur PrototypeBibliothek anzubieten. Zahlreiche kleinere Beispiele werden Ihnen helfen, die umfangreichen Methoden und Möglichkeiten dieser Bibliothek besser verstehen und anwenden zu können. Dabei wurde die zum Zeitpunkt der Bearbeitung aktuelle Version 1.4.0 als Basis verwendet. Der Abschnitt über die script.aculo.usBibliothek ist gegenüber der ersten Auflage um bisher unberücksichtigt gebliebene Methoden und Tools ergänzt worden. Auch hier bringen Ihnen kurze Beispiele die praktische Anwendung der angebotenen Möglichkeiten näher. Kapitel 8, Praxisbeispiele, erhielt ein neues Beispiel »Ajax.FCKeditor«. Dabei handelt es sich um eine Erweiterung für die Prototype-Bibliothek, mit der Sie beliebige Inhalte einer bestehenden Webseite mit einer WYSIWYG-Komponente ausstatten können. Für das Kapitel 9, Google & Yahoo!, war die wichtigste Erkenntnis, dass nun endlich auch Deutschland weitgehend kartografiert wurde und somit viele Ideen für den lokalen Markt umgesetzt werden können. 1.5 Hinweise zu den Inhalten In den einzelnen Kapiteln finden Sie an einigen Stellen Fußnoten mit Webadressen zu vertiefenden oder ergänzenden Themen. Zahlreiche Beispiel wurden in den Kapiteln als kurze Codesnippets eingebunden, um den Inhalt nicht unnötig aufzublähen. Umfangreiche Beispiele zeigen zum 19 1.5
