Ajax

Westf alische Wilhelms-Universit at Mu nster
Ausarbeitung
Ajax
im Rahmen des Seminars Multimedia
Jannik Niemer
Themensteller: Prof. Dr. Herbert Kuchen Betreuer: Christian Arndt Institut f ur Wirtschaftsinformatik Praktische Informatik in der Wirtschaft
Inhaltsverzeichnis
1 Einleitung 2 Ajax-Grundlagen 2.1 2.2 Ajax-Architektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Eigenschaften von Ajax-Anwendungen . . . . . . . . . . . . . . . . . 1 2 4 5 8 8
3 Ajax-Elemente 3.1 3.2 3.3 3.4 3.5 (X)HTML und CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XML und XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . 13 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Das XMLHttpRequest Objekt . . . . . . . . . . . . . . . . . . . . . . 16 19
4 Ajax in der kritischen Betrachtung 4.1 4.2
Vorteile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Nachteile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 23
5 Ajax-Frameworks 5.1 5.2 5.3
Sajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 25 26
6 Die Zukunft von Ajax A Quellcode der Beispielanwendung
A.1 Calendar.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 A.2 style.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 A.3 ajax.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 A.4 neuerTermin.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 A.5 termine.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 B Beispielanwendung mit Sajax Literaturverzeichnis 36 39
Kapitel 1: Einleitung
Einleitung
Die Popularit at von web-basierten Applikationen ist nach wie vor ungebrochen und zur Zeit existiert ein regelrechter Hype um Webanwendungen im Rahmen des Web 2.0. Aktuelle Prognosen zeigen, dass der Markt f ur Webanwendungen auch weiterhin wachsen wird [IB07]. Das Web 2.0 markiert den Beginn eines neuen Internet-Zeitalters, getrieben durch eine Ver anderung der Webanwendungen in den letzten Jahren. Webanwendungen ver andern sich von einer statischen hin zu einer dynamischen Benutzerober ache und werden Desktopanwendungen immer ahnlicher. Diese Dynamisierung von Webanwendungen wird vor allem durch Ajax, eines der Schlagworte und Schl usseltechnologien des Web 2.0, erm oglicht. Das Ziel dieser Arbeit ist es, die Funktionsweise von Ajax darzustellen und zu beschreiben, wie mit Ajax die L ucke zwischen Webanwendungen und Desktopanwendungen geschlossen wird. Zur Veranschaulichung wurde im Rahmen dieser Arbeit eine einfache Ajax-unterst utzte Kalender-Anwendung entwickelt, welche es erlaubt, Termine anzulegen und zu betrachten. Zun achst werden in Kapitel 2 die Grundlagen von Ajax beschrieben. Dazu wird zunachst die Bedeutung von Ajax erl autert und anschlieend auf die Architektur hinter Ajax sowie typische Eigenschaften von Ajax-Anwendungen eingegangen. In Kapitel 3 werden die einzelnen Technologien , aus denen sich Ajax zusammensetzt, sowie deren Bedeutung und Zusammenspiel im Rahmen von Ajax erkl art. Anschlieend werden in Kapitel 4 in einer kritischen Bewertung von Ajax die Vorund Nachteile gegen uber Desktopanwendungen und klassischen Webanwendungen herausgestellt. In Kapitel 5 werden Ajax-Frameworks vorgestellt, die die Entwicklung von AjaxAnwendungen vereinfachen und L osungen f ur einige der Nachteile bieten. Die KalenderAnwendung wurde zur Veranschaulichung noch einmal unter Nutzung eines vorgestellten Frameworks implementiert. Zum Abschluss der Arbeit wird in Kapitel 6 ein Ausblick auf die Zukunft von Ajax gegeben.
Kapitel 2: Ajax-Grundlagen
Ajax-Grundlagen
Der Begri Ajax steht f ur Asynchronous Javascript and XML und wurde im Jahr 2005 von Jesse James Garett in seinem Essay Ajax - A New Approach to Web Applications gepr agt [Ga05]. Das Ziel von Ajax besteht darin, Webanwendungen benutzerfreundlicher zu gestalten, indem mit ihnen wie mit Desktopanwendungen interagiert werden kann. Unter [Ma06] wird eine Ajax-Anwendung folgendermaen deniert: An Ajax Application builds on standard web technologies to deliver a rich, responsive user experience . Ajax-Anwendungen basieren also wie klassische Webanwendungen einzig und allein auf einem Webbrowser, es wird keine Installation auf dem Rechner ben otigt. Dabei heben sich Ajax-Anwendungen durch eine verbesserte Benutzerinteraktion von klassichen Webanwendungen ab. Eine reichhaltige Benutzerober ache wird durch Einsatz von Animationen und Ober achenkomponenten erreicht. Dabei ergibt sich eine hohe Reaktionsfreudigkeit der Anwendung durch viele kleine Anderungen in der Benutzerober ache. Die Anderungen aktualisieren jeweils nur einzelne Teile der Benutzerober ache, ohne den Benutzer in seiner Arbeit zu unterbrechen. Diese und weitere Charakteristika von Ajax-Anwendungen werden in Kapitel 2.2 erkl art. Hinter dem relativ neuen Begri verbirgt sich keine eigenst andige Technologie, sondern eine Architektur, die einige bereits bekannte und standardisierte Technologien in einer zuvor nicht bekannten Art miteinander kombiniert. Neben den in der Abk urzung Ajax enthaltenen Technologien JavaScript und XML kommen dabei weitere Technologien zum Einsatz. Die im Zuge von Ajax angewendeten und kombinierten Technologien sind [Ga05]: (X)HTML in Kombination mit CSS f ur Layout und Struktur der Webabwendung. Document Object Model (DOM) zur dynamischen Manipulation von Daten. XML (in Kombination mit XSLT) f ur den Datenaustausch mit dem Server. XMLHttpRequest-Objekt zum (asynchronen) Nachladen von Daten. JavaScript zur Verbindung der anderen Teile. Diese Technologien werden im Kapitel 3 eingehender behandelt. Gute Beispiele f ur Ajax-Anwendungen sind Google Suggest und Google Maps. Google Suggest (http://www.google.com/webhp?complete=1) ist eine Erweiterung 2
der Google-Suchmaschine und schl agt dem Benutzer schon w ahrend der Eingabe des gew unschten Suchbegris passende Begrie vor (Abbildung 1). W ahrend die Seite an sich identisch mit der normalen Google-Suchmaschinenseite ist, wird bei der Eingabe von Text ins Suchfeld schon nach passenden Begrien gesucht und diese dem Benutzer pr asentiert. Durch Ajax wird also ein zus atzliches Feature zu einer bereits bestehenden Anwendung hinzugef ugt. Google Maps (http://maps.google.com) hingegen ist ein gutes Beispiel f ur eine Anwendung, die Ajax in groem Stil einsetzt. Bei der Interaktion mit dem angezeigten Kartenausschnitt (z.B. zoomen) werden die neuen Kartendaten nachgeladen, w ahrend der Benutzer bereits mit der unvollst andigen Karte weiterarbeiten kann. In diesem Fall basiert also die Kernfunktionalit at der Anwendung auf Ajax.
Abbildung 1: Google Suggest
2.1
Ajax-Architektur
Alle Webanwendungen basieren auf einer Client-Server-Architektur, in denen der Webbrowser vom Webserver u ur den Benutzer darstellt. F ur bertragene Daten f die Kommunikation zwischen Webserver und Browser wird das Hypertext Transfer Protocol (HTTP) verwendet. Dieses Protokoll basiert auf einem Anfrage-AntwortSchema, bei dem vom Client ben otigte Daten in einer Anfrage (HTTP-Request ) vom Webserver angefordert und in Form einer HTTP-Response als HTML-codierte Webseite (formatiert mit CSS) vom Webserver an den Browser zur uckgeliefert. Dabei wird keine permanente Verbindung zwischen Webserver und Browser aufrechterhalten, das Protokoll ist also zustandslos [St07, S. 56.]. Eine klassische Webanwendung besteht aus mehreren HTML-Dokumenten mit Hyperlinks, die auf andere HTML-Dokumente verweisen. Klickt der Benutzer auf einen Hyperlink, so wird ein HTTP-Request an den zugeh origen Webserver gesendet. Der Webserver verarbeitet diesen Request, fordert n otige Daten von Datenbanksystemen oder anderen Webservern an und sendet eine aus diesen Daten generierte HTML-Seite zur uck an den Browser (Abbildung 2), der diese dann darstellt. W ahrend der Weberver den Request bearbeitet und der Browser auf eine Antwort wartet, wird der Benutzer in seiner Arbeit unterbrochen. Der Datenaustausch zwischen Client und Server erfolgt also synchron und nur als Reaktion auf Benutzeraktionen [St07, S. 61]. Zudem wird f ur jede Benutzerinteraktion eine komplette Webseite neu geladen und dargestellt. Dies erh oht zum einen die u bertragene Datenmenge unn otig, zum anderen verlangsamt es die Interaktion mit der Webanwendung. In einer Ajax-Anwendung hingegen kann unabh angig von Benutzerinteraktionen weitere Kommunikation zwischen Server und Client erfolgen. Dazu verwenden AjaxAnwendungen eine in JavaScript programmierte Ajax-Engine, welche beim ersten Aufruf der Anwendung geladen wird [Ga05]. Die Ajax-Engine ist f ur das asynchrone Nachladen von ben otigten Daten und den Einbau dieser Daten in die bestehende Webseite zust andig und erlaubt es dem Benutzer weiterzuarbeiten, w ahrend gleichzeitig Benutzerinteraktionen bearbeitet und Daten nachgeladen werden. Die Benutzerinteraktionen werden hier nicht direkt als HTTP-Requests an einen Webserver weitergeleitet, sondern zun achst der Ajax-Engine u bergeben (Abbildung 3). Einfache Operationen wie etwa eine Validierung eingegebener Daten (z.B. Formatpr ufung einer Email-Adresse) k onnen direkt beim Client durch die Ajax-Engine bearbeitet werden. Werden zus atzliche Daten ben otigt, so werden diese durch die Ajax-Engine in Form eines HTTP-Request angefordert. Dabei wird nicht jedesmal eine komplette
Abbildung 2: Web-Applikationsmodell klassisch (nach [Ga05]) HTML-Seite u otigten bertragen, sondern nur die wirklich von der Anwendung ben Daten in einem beliebigen textbasierten Datenformat, in der Regel XML oder JSON (siehe Kapitel 3.2). So wird vermieden, dass mehr Daten als n otig zwischen Server und Client u ahrend die bertragen werden. Der Benutzer kann weiterarbeiten, w Ajax-Engine auf die Daten vom Webserver wartet und diese nach Empfang mittels DOM (siehe Kapitel 3.3) in die bestehende Benutzerober ache einbaut. Es ist also f ur Ajax-Anwendungen nicht zwingend notwendig, bei jeder Benutzeraktion die gesamte Seite neu zu laden. In der Kalenderanwendung wird beispielsweise beim Anlegen eines neuen Termins nicht die gesamte Seite neu geladen, sondern lediglich der neue Termin im Kalender hinzugef ugt. W ahrend der neue Termin eingetragen wird, kann der Benutzer bereits mit der Anwendung weiterarbeiten und sich beispielsweise einen anderen Tag anschauen oder weitere Termine anlegen.
2.2
Eigenschaften von Ajax-Anwendungen
Ajax-Anwendungen verbinden Eigenschaften von Desktopanwendungen und Webanwendungen. Die wichtigsten Merkmale, die Ajax-Anwendungen ausmachen und von klassischen Webanwendungen dierenzieren, werden im Folgenden erl autert.
Abbildung 3: Web-Applikationsmodell Ajax (nach [Ga05]) Anwendungen statt Webseiten Ajax-Anwendungen bieten einen gr oeren Funktionsumfang als klassische Webanwendungen und sind daher als vollwertige Anwendungen zu betrachten, mit denen auch komplexere allt agliche Aufgaben bearbeitet werden k onnen. Beispielsweise gibt es komplette Ajax-unterst utzte Textverarbeitungen wie AjaxWrite (http://ajaxwrite.de/). Kontinuierliche Interaktion Der Benutzer einer Ajax-Anwendung wird nicht wie bei einer klassischen Webanwendung st andig in seiner Arbeit unterbrochen, sondern kann weiter arbeiten, w ahrend Daten vom Server nachgeladen werden. Es gibt kein klassisches Laden von neuen Seiten mehr, sondern nur noch ein Aktualisieren der Benutzerober ache in Reaktion auf Benutzeraktionen.
Aktualit at Da eine Ajax-Anwendung auch eine Webanwendung ist, sind die verwendeten und dargestellten Daten immer aktuell. So ist es z.B. f ur einen Ajax-Newsreader m oglich, den Server in bestimmten Zeitabst anden nach aktuellen Daten zu u ufen, diese berpr im Hintergrund in die Benutzerober ache einzubauen und dem Benutzer somit immer die aktuellsten Daten zu pr asentieren. Bei einer klassischen Webanwendung ist dies nicht m oglich, ohne die komplette Seite neu zu laden. Neuere Benutzerober ache Ajax-Anwendungen verwenden erweiterte oder neue Ober achenkomponenten (z.B. Tree-Views oder Kalenderfelder) f ur die Gestaltung einer Benutzerober ache, die der von Desktopanwendungen a hnelt. Visuelle Eekte Ajax-Anwendungen setzen in der Regel Animationen und andere visuelle Eekte st arker als klassischen Webanwendungen ein, um Anderungen in der Benutzerober ache an den Benutzer zu kommunizieren. Die Eekte dienen in Ajax-Anwendungen nicht nur dem Design, sondern unterst utzen den Benutzer bei seiner Arbeit und informieren ihn u ber die momentan ablaufenden Prozesse. Neue Interaktionswege In Ajax-Anwendungen werden bisher nur aus Desktopanwendungen bekannte Interaktionsstile verwendet, wie z.B. Drag-And-Drop oder eine Contentbearbeitung direkt in der Webseite. Standardisiert und Plattformunabh angig Ajax-Anwendungen basieren auf bereits etablierten und standardisierten Technologien (Kapitel 3) und sind somit in jedem neueren Webbrowser (d.h. aus dem vergangenen Jahr) unabh angig von Hardware oder Betriebssystem lau ahig.
Kapitel 3: Ajax-Elemente
Ajax-Elemente
In diesem Kapitel werden die einzelnen Technologien, aus denen sich Ajax zusammensetzt, sowie die Zusammenarbeit dieser Technologien in Ajax-Anwendungen erkl art. Die Technologien kommen dabei nur auf der Clientseite zum Einsatz. Die Ajax-Engine l auft also komplett im Browser des Benutzers. Zur Erstellung von dynamischen Webanwendungen, bei denen z.B. Daten aus Datenbanken geladen werden, bietet sich der Einsatz einer serverseitigen Programmiersprache wie z.B. PHP an. Dabei ist es f ur den Einsatz von Ajax irrelevant, welche serverseitigen Technologien konkret verwendet werden, solange diese in der Lage sind, Daten mit der Ajax-Engine auszutauschen (also z.B. XML oder JSON unterst utzen) [St07, S. 61].
3.1
(X)HTML und CSS
HTML Die Hypertext Markup Language (HTML) ist eine Auszeichnungssprache (engl.: Markup Language ) f ur Webseiten, welche neben den eigentlichen Daten (dem Seiteninhalt) auch die logische Struktur der Seiten beschreibt. Die logische Struktur einer Seite beinhaltet Elemente wie Uberschriften, Abs atze, Bilder und Tabellen. Diese Elemente werden in HTML durch Steuerelemente, sogenannte Tags, repr asentiert, welche durch spitze Klammern markiert werden und den Inhalt des jeweiligen Elements umschlieen (z.B. <h1>Dies ist eine Uberschrift</h1>) [St07, S. 94 - 100]. Einzelnen Elementen k onnen Klassen und IDs zugeordnet werden, um sie leichter identizieren zu k onnen. Quelltext 7 zeigt ein Element aus der HTML-Datei der Beispielanwendung, welches den Kalender als Tabelle in einem Containerelement enth alt. Containerelemente werden durch einen <div>-Tag deniert und dienen der logischen Strukturierung, haben aber keinen Einuss auf das Aussehen der Seite. Mit ihrer Hilfe kann auf Teilbereiche einer HTML-Seite gezielt zugegrien werden. Sowohl das Containerelement als auch die Tabelle werden mit IDs versehen, um sp ater in der Anwendung auf diese Elemente zugreifen zu k onnen.
< div id = " kalender " > < table id = " kalendertab " > < tr > < th colspan = " 7 " > Januar 2008 </ th > </ tr > (...) </ table > </ div >
Quelltext 1: Kalenderdenition in der Beispielanwendung Web-Browser verhalten sich bez uglich HTML sehr tolerant und versuchen auch fehlerhafte Seiten m oglichst korrekt und ohne Fehlermeldungen darzustellen. Dieses 8
Prinzip der Fehlertoleranz vereinfacht die Entwicklung von Webseiten und erh oht die Kompatibilit at zwischen Browsern [St07, S. 101]. Gleichzeitig erschwert es aber die Maschinenlesbarkeit von HTML-Dokumenten, da diese nicht zwangsl aug fehlerfrei sein m ussen, um im Webbrowser korrekt dargestellt zu werden. XHTML Die Extensible Hypertext Markup Language (XHTML) ist eine auf XML basierende Neuauage von HTML [WWWC02]. W ahrend die Elemente der Sprache XHTML weitgehend denen von HTML entsprechen, ist die Syntax bedeutend strenger. So gilt hier nicht das generelle Prinzip der Fehlertoleranz und es wird vorausgesetzt, dass XHTML-Dokumente nach den Syntaxregeln von XML syntaktisch korrekt formatiert sind. Die strengeren Syntaxregeln gew ahrleisten eine bessere Maschinenlesbarkeit von XHTML-Dokumenten im Vergleich zu HTML-Dokumenten. Zudem wird mit XHTML die Layout-Gestaltung komplett zu CSS ausgelagert, da in HTML enthaltene Layout-Elemente hier nicht deniert sind (zumindest in der strikten Variante der Sprache) [St07, S. 106]. CSS W ahrend der grundlegende Aufbau und Inhalt von Webseiten in (X)HTML beschrieben werden, wird das Layout einer Webseite mit Hilfe von Cascading Style Sheets (CSS) festgelegt [WWWC99]. Diese werden als separate Dateien gespeichert und durch spezielle <style>-Tags in (X)HTML-Dokumente eingebunden. So wird eine Trennung von Struktur und Layout einer Webanwendung erreicht. Durch CSS k onnen die Eigenschaften aller HTML-Elemente wie Farbe, Form und Position festgelegt werden. Diese Eigenschaften k onnen nach bestimmten Regeln z.B. auf alle Elemente einer Art, alle Elemente einer Klasse oder f ur einzelne Elemente anhand ihrer IDs angewendet werden. Auch einfache Beziehungen k onnen abgebildet werden (z.B. alle Hyperlinks innerhalb einer Tabelle der Klasse tabelle1) [WWWC99, Kap. 1.6]. In der Beispielanwendung wird das o.a. Containerelement per CSS mit einem Rahmen versehen, erh alt eine festgelegte Gr oe und wird auf dem Bildschirm positioniert (Quelltext 13).
/* Formatierung f u r Element mit ID " Kalender " */ # kalender { /* Durchgehenden Rahmen anzeigen */ border-style : solid ; /* Rahmenbreite mittel */ border-width : medium ; /* Breite und H o he des Kalenders auf 700 Pixel setzen */ width : 700 px ; height : 700 px ; /* Kalender soll auf der rechten Seite schweben */ float : right ; }
Quelltext 2: Kalenderformatierung
Ajax-Relevanz Die Benutzerober ache einer Ajax-Anwendung besteht wie eine klassische Webanwendung aus (X)HTML in Kombination mit CSS. Da sich XHTML-Dokumente wegen der strikteren Syntax leichter maschinell auswerten lassen als HTML-Dokumente, ist XHTML f ur Ajax-Anwendungen die bessere Wahl [St07, S. 108]. Besondere Bedeutung haben f ur Ajax-Anwendungen die HTML-Elemente div und span, da sie sich nicht wie etwa Tabellen auf die Struktur der Seite auswirken, sich aber mit Hilfe von CSS formatieren und durch DOM ansprechen lassen. So lassen sich gezielt Teilbereiche einer Seite markieren und aktualisieren. Die Trennung von Struktur und Layout in HTML und CSS erm oglicht in ein dynamisches Einf ugen von neuen Daten in bestehende Seiten. Diese dynamische Ver anderung der HTML-Seite zur Laufzeit der Anwendung wird als Dynamic HTML oder DHTML bezeichnet und stellt einen der Grundpfeiler der Ajax-Technologie dar [St07, S. 73].
3.2
XML
XML und XSLT
Die Extensible Markup Language (XML) ist eine Sprache, die zum plattformneutralen Austausch von beliebigen menschen- und maschinenlesbaren Daten dient. Da XML genau wie HTML eine Auszeichnungssprache ist, beschreibt sie neben den eigentlichen Daten auch die Struktur dieser Daten [St07, S. 264.]. Elemente werden wie in HTML durch Tags beschrieben, welche ebenfalls in spitzen Klammern eingeschlossen werden. Da die XML-Spezikation im Gegensatz zu HTML keine vorgeschriebenen Tag-Namen enth alt, k onnen XML-Daten frei strukturiert werden [NS06, S. 23]. Allerdings gelten strikte syntaktische Regeln f ur den Aufbau einer XML-Datei. Diese Regeln m ussen eingehalten werden, damit ein XML-Dokument 10
als wohlgeformt gilt. In einem g ultigen XML-Dokument muss zus atzlich auf eine DTD (Document Type Denition) verwiesen werden, in der die Struktur des XMLDokumentes deniert wird [WWWC06]. Unter [NS06, Kap. 1] ndet sich eine Beschreibung von DTD und weiteren XML-Aspekten. Durch Nutzung eines XML-Parsers k onnen Anwendungen maschniell Informationen aus XML-Dokumenten extrahieren. Ein XML-Dokument wird dazu vom XML-Parser durchlaufen, eingelesen und auf G ultigkeit u uft. Auf ein Prinberpr zip der Fehlertoleranz wird dabei verzichtet, um in Kombination mit den strikten syntaktischen Vorgaben eine gute und einheitliche Maschinenlesbarkeit von XMLDaten zu garantieren [St07, S. 264.]. In Quelltext 12 ndet sich ein XML-Dokument, welches vom Server an den Browser der Kalenderapplikation versendet wird. In diesem Dokument werden alle bestehenden Termine f ur einen Tag u bertragen. Das <termine>-Element ist das Wurzelelement dieser XML-Datei. Die einzelnen Termine nden sich innerhalb dieses Elements und sind jeweils durch einen Kurztitel und eine Beschreibung deniert.
<? xml version = " 1.0 " encoding = " ISO -8859 -1 " ? > < termine datum = " 08.01.2008 " > < termin > < titel > Test8 </ titel > < beschreibung > Testtermin f u r den 8. Januar </ beschreibung > </ termin > < termin > < titel > Test8_2 </ titel > < beschreibung > Testtermin f u r den 8. Januar (2) </ beschreibung > </ termin > </ termine >
Quelltext 3: Beispiel XML-Dokument
XSLT XSLT ist eine Sprache, die deniert, wie eine XML-Datei in eine andere beliebige XML-Datei umgeformt werden kann [We06]. Die Struktur der erzeugten XML-Datei kann sich dabei sehr von der Originalstruktur unterscheiden. Dazu wird ein XSLTProzessor (wird in jedem modernen Browser unterst utzt) mit einem XSL-Stylesheet initialisiert, in dem die Regeln der Transformation deniert sind. Anschlieend kann der Prozessor nach den denierten Regeln XML-Dateien transformieren. Eine XML-Datei kann mittels XLST auch in ein HTML-Format transformiert werden. Dies erm oglicht die Erstellung von XSL-Templates, mit denen XML-Daten direkt in eine Webseite eingef ugt werden k onnen.
11
Ajax-Relevanz In Ajax-Anwendungen wird XML f ur den Datenaustausch zwischen Server und Client verwendet. Dabei werden die per Ajax nachgeladenen Daten auf dem Server per XML formatiert und in der Ajax-Engine wieder dekodiert oder direkt im Browser angezeigt. Die Nutzung von XML f ur den Datenaustausch bietet den Vorteil, dass sie als plattformunabh angige Sprache von jedem Browser und jedem System verstanden wird. In allen modernen Browsern sind bereits XML-Parser eingebaut und k onnen XML-Dokumente automatisch in DOM-Objekte (siehe Kap. 3.3) umwandeln [Re06, S. 229]. Auch XML-Elemente k onnen mit CSS zu formatieren, was Ajax-Anwendungen die M oglichkeit bietet, nachgeladene XML-Daten direkt passend formatiert im Browser anzuzeigen, und somit den Datenaustausch vereinfacht. Ein Nachteil von XML stellt der relativ groe Overhead durch Tags, DTD und XML-Denition dar. Da in Ajax Anwendungen oft XML-Daten in ein HTML-Format konvertiert werden m ussen, bietet sich eine Nutzung von XSLT an. XSLT kann in Verbindung mit Ajax benutzt werden, um nachgeladene XML-Daten automatisch zu transformieren und dabei eventuell neu zu strukturieren. Obwohl XML in der Bezeichnung Ajax vorkommt und die Nutzung von XML f ur den Datenaustausch von Ajax-Anwendungen sinnvoll ist, so ist sie jedoch keineswegs zwingend. Im Prinzip k onnen Ajax-Anwendungen Daten in jeder beliebigen durch Text repr asentierten Form austauschen. Es ist beispielsweise auch denkbar, reinen Text oder HTML-formatierte Daten per Ajax nachzuladen. Neben XML wird oft die Javascript Object Notation (JSON) f ur den Datenaustausch verwendet. JSON bezeichnet eine Methode, JAVA-Script-Objekte in Text umzuwandeln (Serialisierung ), damit diese einfach versendet werden k onnen [Re06, S. 232]. Die TextRepr asentation kann dann beim Empf anger wieder in ein Objekt zur uckverwandelt werden (Deserialisierung ). Mittlerweile ist JSON nicht mehr nur auf JavaScript beschr ankt, sondern wird auch von anderen Sprachen und Plattformen unterst utzt [We06, S. 63]. Der Vorteil der Nutzung von JSON besteht darin, dass JSON-Daten nicht manuell durchlaufen werden m ussen, wie es bei XML der Fall ist, um an einzelne Elemente zu gelangen. Stattdessen kann direkt auf die Eigenschaften des zur uckgelieferten Objektes zugegrien werden. Dies vereinfacht die Nutzung von JSON im Verleich zu XML. Allerdings beinhaltet JSON ein gewisses Sicherheitsrisiko, da der per Text u ahrend der Deserialisierung im Webbrowser ausgef uhrt wird bertragene Code w [We06, S. 68].
12
3.3
Document Object Model (DOM)
Das Document Object Model (DOM) ist ein Standard, der 1998 vom W3 Konsortium beschlossen wurde [WWWC98]. Es beschreibt ein plattformunabh angiges Programmier-Interface, mit dem baumartig aufgebaute Dokumente (z.B. HTMLund XML-Dokumente) nicht nur als statischer Text, sondern als dynamische Struktur repr asentiert werden. Mit Hilfe eines DOM-Parsers wird dazu aus einem Dokument ein Baum aufgebaut, der alle in diesem Dokument enthaltenen Elemente mit ihren Eigenschaften enth alt. Uber das DOM-Interface kann dann auf einzelne Elemente im Baum zugegrien werden. Diese Elemente lassen sich nachtr aglich ver andern oder l oschen und es lassen sich neue Elemente in den Baum einf ugen [WWWC98]. So konstruiert ein Webbrowser beispielsweise beim Besuch einer Webeite aus dem HTML-Code (Quelltext 16) einen Baum aus HTML-Elementen (Abbildung 4), welcher sich nachtr aglich durch den Einsatz von Javascript und DOM ver andern l asst [St07, S. 189].
< html > < head > < title > Seminar Multimedia - Ajax Beispiel </ title > </ head > < body > < div id = " kalender " > < table id = " kalendertab " > < tr > < th colspan = " 7 " > Januar 2008 </ th > </ tr > < tr > < th > Mo </ th > < th > Di </ th > < th > Mi </ th > < th > Do </ th > < th > Fr </ th > < th > Sa </ th > < th > So </ th > </ tr > </ table > </ div > < div id = " termincontainer " > </ div > </ body > </ html >
Quelltext 4: HTML-Struktur der Kalenderanwendung Die Webseite wird dabei in JavaScript durch das Wurzelobjekt document repr asentiert. Um auf ein Element der Seite zuzugreifen, kann ausgehend von diesem Objekt u unschten Element durch ber die untergeordneten Elemente bis hin zum gew den DOM-Baum navigiert werden. Alle Elemente eines Typs (z.B. Bilder oder Formulare) sind zudem in Arrays organisiert, um das Aunden dieser Elemente zu vereinfachen. Der Zugri auf das erste Bild in einer Webseite ist beispielsweise folgendermaen m oglich:
document . images [0]
Neben der Navigation durch den DOM-Baum lassen sich auch Elemente nach Tags, Namen oder ID ausw ahlen. Dazu stellt das DOM die Methoden getElementsByTagName(),
getElementsByName()
und getElementByID bereit. Durch den Aufruf 13
Abbildung 4: DOM-Baum
document . g e t E l e m e n t s B y T a g N a m e ( " a " )
lassen sich beispielsweise alle Hyperlinks einer Webseite ausw ahlen. Uber den Aufruf
document . getElementByID ( " Kalender " )
l asst sich hingegen das Element mit der eindeutigen ID Kalender ausw ahlen, sofern dieses existiert. Nach Ausw ahlen eines Objektes lassen sich dessen Eigenschaften andern (z.B. der Inhalt u uhren. Zum Beiber innerHTML) oder Methoden auf dem Objekt ausf spiel ist es m oglich, mit appendChild() neue Elemente an ein bestehendes Element anzuh angen. Eine ausf uhrliche Liste der Eigenschaften und Methoden von DOMKnotenelementen ndet sich unter [St07, S. 198.].
14
Ajax-Relevanz Das DOM dient in Ajax-Anwendungen der dynamischen Manipulation von HTMLund XML-Daten. Ajax-Anwendungen k onnen durch das DOM auf einzelne Elemente einer bereits bestehenden und im Webbrowser geladenen HTML-Seite zugreifen und neue Elemente in diese Seite einf ugen. Das DOM erm oglicht also erst den Einsatz von DHTML und bildet somit die Basis der dynamischen Benutzerober ache von Ajax-Anwendungen. Des weiteren wird das DOM in Ajax-Anwendungen dazu verwendet, einen einfachen Zugri auf nachgeladene Daten im XML-Format bereitzustellen, damit diese Daten durchsucht werden k onnen und einzelne Elemente bzw. Datens atze aus komplexen XML-Daten extrahiert werden k onnen.
3.4
JavaScript
JavaScript ist eine plattformunabh angige, objektorientierte Skriptsprache mit Javaahnlicher Syntax. Die Sprache wird vor allem clientseitig verwendet und ist in allen modernen Browsern implementiert. JavaScript-Code wird u ber spezielle <script>Tags oder als externe Datei in HTML-Dokumente eingebunden und beim Laden des Dokumentes direkt im Browser interpretiert [GGA06, S. 60]. JavaScript bietet nur relativ geringe M oglichkeiten im Vegleich mit anderen Skriptsprachen wie z.B. VB-Script. So ist es etwa mit JavaScript nicht m oglich, auf die Festplatte des Host-Rechners zuzugreifen oder Bibliotheken des Betriebssystems aufzurufen. Unter Sicherheitsaspekten sind die eingeschr ankten M oglichkeiten jedoch ein groer Vorteil f ur JavaScript [St07, S. 166]. Dennoch wird bei Verwendung von JavaScript in Webseiten immer (potentiell sch adlicher) Code direkt im Browser ausgef uhrt, weshalb JavaScript von einigen sicherheitsbewussten Internetnutzern im Browser deaktiviert wird. Ajax-Relevanz Da die Ajax-Engine in JavaScript implementiert wird und somit alle anderen Technologien durch JavaScript verbunden werden, ist dies die zentrale Technologie, um Ajax-Anwendungen m oglich zu machen, was auch an der Integration des Begris im Acronym Ajax erkennbar ist. JavaScript erlaubt zum Einen den Zugri auf das XMLHttpRequest Objekt (siehe Kapitel 3.5), um mit diesem asynchron Daten vom Server nachzuladen. Zum Anderen kann durch JavaScript auf das DOM zugegrien und einzelne DOM-Elemente zur Laufzeit der Anwendung ermittelt und ver andert
15
werden. Dies erlaubt die dynamische Ver anderung von Inhalt, Struktur und Layout der Webseite zur Laufzeit.
3.5
Das XMLHttpRequest Objekt
Beim XMLHttpRequest-Objekt handelt es sich um ein JavaScript-Objekt, welches in allen modernen Browsern direkt implementiert ist. Das XMLHttpRequest-Objekt erm oglicht das synchrone und asynchrone Senden von HTTP-Requests und eine Reaktion auf den Empfang einer Antwort mittels einer Callback-Funktion. Somit stellt XMLHttpRequest die grundlegende Ajax-Funktionalit at zur Verf ugung und ist das wichtigste Objekt f ur AJAX Anwendungen [Ma06, Kap. 6.2]. Weiterhin un terst utzt das Objekt die Ubertragung von XML-Daten durch automatisches Parsen und Bereitstellung dieser Daten als DOM-Objekt. Der Ablauf einer asynchronen Datenabfrage per XMLHttpRequest soll hier anhand eines Code-Auszugs aus der Beispielanwendung erkl art werden (Quelltext 10): 1. Zun achst wird ein XMLHttpRequest-Objekt durch den JavaScript-Code resObjekt
= new XMLHttpRequest()
erstellt. Dies ist ein vereinfachter Aufruf, der in der
Anwendung um eine Browserunterscheidung erweitert wurde, da der Internet Explorer bis zur Version 6 das XMLHttpRequest-Objekt nicht direkt, sondern als ActiveX-Objekt implementiert. 2. Damit bei einer asynchronen Anfrage auf eine Serverantwort reagiert werden kann, wird ein eine Funktion als Event-Handler f ur die Eigenschaft onreadystatechange registriert. Diese Funktion wird jedes Mal aufgerufen, wenn sich der Status des XMLHttpRequest-Objektes andert. Das XMLHttpRequest Objekt kennt 5 Zust ande:
Zustandscode 0 1 2 3 4
Beschreibung nicht initialisiert L adt gerade (Request wird an Server abgesetzt) Fertig geladen (Request gesendet) Wartet auf R uckgabe (Antwort wird vom Server empfangen) Vollst andig (Antwort vollst andig empfangen) Tabelle 1: Zustandscodes XMLHttpRequest
Interessant ist dabei in der Regel lediglich der Zustand 4, welcher anzeigt, dass das Ergebnis des HTTP-Requests vollst andig vorliegt. Der Status l asst 16
sich u ber die Eigenschaft resObjekt.readyState!auslesen. 3. Ein HTTP-Request wird mit der Methode resObjekt.open() vorbereitet, aber noch nicht abgeschickt. Im ersten Parameter wird die HTTP-Methode angegeben, mit der der Request u bertragen werden soll, also z.B. GET oder POST. Der zweite Parameter gibt den URL an, an den der Request gesendet wird. Als dritter Parameter wird speziziert, ob der Request synchron oder asynchron behandelt werden soll. Im Falle einer synchronen Behandlung wird das Skript an dieser Stelle so lange blockiert, bis eine Antwort vom Server eingetroen ist. 4. Die Abfrage wird schlielich mit der Methode resObjekt.send() versendet. In der Beispielanwendung wird die POST-Methode zum Versenden der Requests benutzt, weshalb die Abfrageparameter an dieser Stelle u bergeben werden. Das XMLHttpRequest-Objekt wartet nun auf die Antwort des Servers. W ahrend der Wartephase k onnen andere Java-Script-Funktionen ausgef uhrt werden, was dem Benutzer eine ununterbrochene Interaktion mit der Anwendung erm oglicht. 5. Wenn die Antwort des Servers vollst andig geladen wurde, wird die CallbackFunktion mit readyState 4 aufgerufen. Die u onnen nun bermittelten Daten k durch die Eigenschaft resObjekt.responseText abgerufen werden. Sind die Daten XML-formatiert, so werden diese automatisch geparst und stehen zus atzlich durch die Eigenschaft resObjekt.responseXML als DOM-Objekt zur Verf ugung, was direkten Zugri auf einzelne XML-Elemente m oglich macht.
resObjekt = new XMLHttpRequest () ; resObjekt . on re ad ys ta te ch an ge = function () { if ( resObjekt . readyState == 4) { // ... } } resObjekt . open ( post , getTermine . php , true ) ; // ... resObjekt . send ( year = + year + & month = + month + & day = + day );
Quelltext 5: XMLHttpRequest in der Beispielanwendung (vereinfacht)
17
Ajax-Relevanz Der asynchrone Austausch von Daten zwischen Client und Server ist ein elementarer Bestandteil von Ajax-Anwendungen und wird u ber das XMLHttpRequest-Objekt erm oglicht. Ohne dieses Objekt w urde eine Ajax-Anwendung nicht funktionieren, da keine Daten asynchron nachgeladen werden k onnten und somit auch keine AjaxFunktionalit at gegeben w are.
18
Kapitel 4: Ajax in der kritischen Betrachtung
Ajax in der kritischen Betrachtung
Die Nutzung von Ajax-Anwendungen bietet viele Vorteile gegen uber klassischen Webanwendungen und Desktopanwendungen. Die wichtigsten werden im Kapitel 4.1 vorgestellt. Allerdings sind mit den Vorteilen auch einige Nachteile verbunden, die in Kapitel 4.2 betrachtet werden. F ur einige dieser Nachteile bestehen jedoch bereits L osungsans atze, die zum Teil in Ajax-Frameworks (siehe Kapitel 5) umgesetzt sind.
4.1
Vorteile
Kombination aus Desktop- und Webanwendungen Ajax-Anwendungen kombinieren die Vorteile von Desktopanwendungen mit denen von klassischen Webanwendungen. W ahrend Ajax die Benutzerfreundlichkeit, Interaktivit at und Reaktionsfreudigkeit von Desktopanwendungen bietet, wird dies mit der Plattformneutralit at und einfacher Anbindung an Datenbanken und Webservices kombiniert, die sonst nur klassische Webanwendungen bieten. Auch wird f ur AjaxAnwendungen keine Installation ben otigt, da die Anwendungen einfach im Webbrowser laufen. Plattformunabh angigkeit Ajax-Anwendungen sind - zumindest bei korrekter Implementierung - unabh angig vom eingesetzten Browser und Betriebssystem nutzbar. Eine mobile Nutzung von Ajax-Anwendungen ist ebenfalls einfacher m oglich als dies bei Desktopanwendungen der Fall ist. Es sind keine zus atzlichen Plugins n otig, um Ajax-Anwendungen auszuf uhren, da s amtliche eingesetzten Technologien direkt vom Browser unterst utzt werden. Geringere Auslastung Da bei Ajax-Anwendungen immer nur die jeweils ben otigten Daten nachgeladen werden, statt bei jeder Anfrage an den Server die ganze Seite neu zu u bertragen, verringert sich die Auslastung der Kommunikationswege und des Servers. Analysen zeigen, dass durch Einsatz von Ajax die u bertragene Datenmenge einer Webseite um bis zu 60% reduziert werden kann [Me06].
19
Einfachere Wartbarkeit F ur Ajax-Anwendungen ist keine lokale Installation auf dem Clientrechner erforderlich, sondern es existiert nur eine Installation der Anwendung auf dem Server. Dies erm oglicht ein einfacheres Einspielen von Updates und stellt sicher, dass alle Benutzer der Anwendung immer auf dem gleichen, aktuellen Stand sind. H ohere Reaktionsfreudigkeit In Ajax-Anwendungen kann deutlich schneller auf Benutzeraktionen reagiert werden als in klassischen Webanwendungen, da Benutzeraktionen teilweise vollst andig in der Ajax-Engine behandelt werden und bei Bedarf nur die n otigen Daten vom Server nachgeladen werden. Auch ist es in Ajax-Anwendungen nicht n otig, bei jeder Benutzeraktion die komplette Webseite neu zu laden. H ohere Interaktivit at Nutzer von Ajax-Anwendungen k onnen weiterarbeiten, w ahrend Daten vom Server nachgeladen werden. Dies ist benutzerfreundlicher als der Zyklus von Arbeits- und Wartezeit bei klassischen Webanwendungen. Universelle Anwendbarkeit Ajax schreibt nur Technologien f ur die Clientseite der Anwendung vor und kann auf der Serverseite mit beliebigen Programmiersprachen kombiniert werden. Da Daten zwischen Server und Client in einem universellen Format (i.d.R. XML oder JSON) u bertragen werden, kann die serverseitige Programmiersprache einfach gewechselt werden.
4.2
Nachteile
Fehlende Unterstu tzung fu r Zuru ck-Button und History In einer Ajax-Anwendung werden neue Seiteninhalte nachgeladen, ohne dass sich dabei die URL der Seite in der Adressleiste andert. Die einzelnen Zust ande einer Ajax-Anwendung sind also f ur den Browser nicht transparent und werden nicht in der Browser-History gespeichert. Dadurch wird auch die Funktionalit at des Zur uckButtons im Browser ausgehebelt, der das vorherige Element aus der History aufruft. Dr uckt der Benutzer w ahrend der Nutzung einer Ajax-Anwendung den Zur uckButton, so wird in der Regel die vor Start der Ajax-Anwendung aktive Seite aufgerufen. Dies ist f ur Internetnutzer, die an die Navigation mittels Zur uck-Button 20
und History gew ohnt sind, sehr ungewohnt und erschwert die Nutzung von AjaxAnwendungen. F ur dieses Problem gibt es allerdings bereits L osungsans atze, unter anderem bieten manche Frameworks eine Unterst utzung an (siehe Kapitel 5). Fehlende Unterstu tzung fu r Deep-Links Lesezeichen (Bookmarks) k onnen in einer Ajax-Anwendung nicht verwendet werden, um den Status der Anwendung zu speichern. Dies wird wie die fehlende Unterst utzung der History dadurch verursacht, dass die einzelnen Zust ande einer AjaxAnwendung f ur den Browser nicht transparent sind und nicht durch eindeutige URLs identizierbar sind (Deep Links). Daraus resultiert weiterhin, dass Suchmaschinen nicht auf die Daten von Ajax-Anwendungen zugreifen k onnen und sie daher nicht korrekt indizieren k onnen. Auch die Unterst utzung f ur Deep Links l asst sich mit einem gewissen Programmieraufwand oder durch den Einsatz mancher Frameworks aktivieren. Fehlende Unterstu tzung fu r Refresh-Button Im Zusammenhang mit der Fehlenden Unterst utzung f ur Deep-Links und die History ergibt sich ein weiteres Problem bei der Nutzung von Ajax-Anwendungen. Da die Zust ande nicht durch eindeutige URLs gekennzeichnet sind, f uhrt ein Klick auf den Refresh-Button des Browsers dazu, dass der die urspr uungliche URL neu geladen und somit der Ursprungszustand der Ajax-Anwendung wieder hergestellt wird. Dies entspricht nicht der von Internetnutzern erwarteten Funktionalit at (eigentlich sollte der aktuelle Zustand neu geladen werden) und ist somit f ur Nutzer ungewohnt. Dieses Problem l asst sich in Kombination mit den oben genannten Problemen durch Programmieraufwand oder den Einsatz von Frameworks l osen. Erreichbarkeit Um die korrekte Ausf uhrung von Ajax-Anwendungen zu garantieren, muss im Browser JavaScript aktiviert sein. Im Internet Explorer muss bis zur Version 7 zus atzlich ActiveX aktiviert sein, da hier das XMLHttpRequest Objekt nicht nativ, sondern als ActiveX-Objekt implementiert ist. JavaScript und besonders ActiveX gelten jedoch als sicherheitskritisch und werden von vielen Internetnutzern deaktiviert. Internet-Abh angigkeit Auch wenn Ajax-Anwendungen die Funktionalit at von Dekstop-Anwendungen bieten k onnen, so sind sie doch Webanwendungen. F ur die Ausf uhrung einer Ajax21
Anwendung ist es also zwingend notwendig, dass der Nutzer w ahrend der gesamten Zeit mit dem Internet verbunden ist. Dies stellt insbesondere bei der mobilen Nutzung von Ajax-Anwendungen ein Problem dar. Browserunterschiede Der Zugri auf das XMLHttpRequest-Objekt sowie auf DOM unterscheidet sich f ur verschiedene Browser, da die Schnittstellen unterschiedlich implementiert sind. Um maximale Kompatibilit at zu gew ahrleisten, m ussen Entwickler daher CodeVerzweigungen f ur die verschiedenen Browser einbauen. Dieses Problem kann durch Frameworks umgangen werden, in denen diese Unterscheidung bereits enthalten ist. Unterschiedliche Programmiersprachen Bei der Entwicklung einer Ajax-Anwendung m ussen auf Client- und Serverseite zwei verschiedene Programmiersprachen verwendet werden. W ahrend im Client JavaScript eingesetzt wird, kommt im Server PHP, Java o. a. zum Einsatz, mit evtl. sehr unterschiedlicher Syntax. Dies stellt einen Mehraufwand f ur den Entwickler dar. Frameworks wie das Google Web Toolkit (Kapitel 5.3) bieten eine L osung f ur dieses Problem, indem sie den n otigen JavaScript-Code automatisch erzeugen. Performanceprobleme Da eine Ajax-Anwendung unter Umst anden sehr viel h auger mit dem Server kommuniziert als klassische Webanwendungen, kann sich die Serverlast im Vergleich zu klassischen Anwendungen auch vergr oern, statt geringer zu werden. Gerade weil HTTP ein zustandsloses Protokoll ist und es nicht m oglich ist, eine dauerhafte Verbindung zwischen Ajax-Engine und Server aufrechtzuerhalten und die Ajax Engine bei Anderungen auf dem Server per Event zu informieren, m ussen Ajax Anwendungen evtl. den Server regelm aig auf eine Anderung der Daten u ufen. berpr Dies kann die Verbindung sowie den Server belasten.
22
Kapitel 5: Ajax-Frameworks
Ajax-Frameworks
F ur die Entwicklung von Ajax-Anwendungen werden viele Kenntnisse u ber eingesetzte Browservarianten und deren Eigenheiten vorausgesetzt. Auch bestehen AjaxAnwendungen aus vielen verschiedenen Komponenten (HTML und CSS, DOM, JavaScript, serverseitige Programmiersprache wie PHP, Java etc.), was die Entwicklung erschwert und eine Fehlersuche w ahrend der Entwicklung sehr kompliziert macht. Gerade bei komplexeren Ajax-Anwendungen werden bestimmte Funktionen immer wieder verwendet, wie z.B. das asynchrone Nachladen von Daten sowie die Integration dieser Daten in die Benutzerober ache mittels DOM. Ajax-Frameworks bieten hier Funktionsbibliotheken, die bereits getestete Funktionen f ur viele Einsatzm oglichkeiten zur Verf ugung stellen und einem Entwickler den Aufwand f ur Entwicklung und Test dieser Funktionen sparen. Alle Frameworks abstrahieren dabei von Browserunterschieden und erleichtern dem Entwickler die Client-Server-Kommunikation, indem dieser das XMLHttpRequest-Objekt nicht mehr selbst erstellen und ansprechen muss. Einige Frameworks erleichtern zudem den Zugri auf DOM, stellen visuelle Eekte und Komponenten zur Gestaltung einer Benutzerober ache bereit und bieten eine einfache Behandlung von Events. Zur Zeit existieren mehr als 200 Ajax-Frameworks mit verschiedenen Ans atzen. Zum Einen gibt es clientseitige Frameworks, die aus JavaScript-Funktionsbibliotheken bestehen. Auf der anderen Seite gibt es serverseitige Frameworks, welche direkt in der auf Serverweite verwendeten Sprache implementiert sind und die Nutzung von JavaScript vereinfachen bzw. komplett eliminieren, indem der n otige JavaScript Code automatisch erstellt wird. In diesem Kapitel sollen exemplarisch drei Frameworks vorgestellt werden, die unterschiedliche Ans atze verk orpern.
5.1
Sajax
Bei Sajax handelt es sich um ein serverseitiges Framework, das unter anderem f ur die Sprachen ASP, PHP, Perl und Ruby angeboten wird. F ur jede unterst utzte Sprache gibt es eine eigene Bibliothek, welche serverseitig in den Quellcode eingebunden wird. Serverseitig implementierte Funktionen k onnen exportiert werden. Sajax generiert automatisch den clientseitigen JavaScript-Code f ur diese Funktionen und bindet ihn in die HTML-Seite ein. Werden diese Wrapper-Funktionen im Client aufgerufen, so werden automatisch per XMLHttpRequest die erforderlichen Daten abgerufen und eine angegebene Callback-Funktion aufgerufen. Dadurch wird der Entwickler zwar nicht komplett von JavaScript befreit, muss sich aber nicht explizit um die Daten ubertragung per XMLHttpRequest k ummern. Daten lassen sich bei Sajax un23
Kapitel 5: Ajax-Frameworks
ter anderem als String oder Integer, aber auch als Array oder Objekt u bertragen. Dabei u bernimmt Sajax die Serialisierung der Objekte im Server und die Deserialisierung im Client. Komponenten f ur die Benutzerober ache, visuelle Eekte oder ein vereinfachter Zugri auf DOM werden von Sajax nicht unterst utzt. Zur Veranschaulichung der Unterschiede zwischen manueller Implementierung und Nutzung eines serverseitigen Frameworks wurde die Kalender-Anwendung unter Verwendung von Sajax neu implementiert. Eine Beschreibung ndet sich im Anhang B.
5.2
Prototype
Eines der zur Zeit am h augsten eingesetzten Ajax-Frameworks ist Prototype. Prototype wurde eigentlich als Client-seitiger Teil von Ruby-On-Rails entwickelt, kann aber auch ohne dieses eingesetzt werden [GGA06, S. 210]. Das Framework basiert auf JavaScript und vereinfacht den asynchronen Datentransfer via XMLHttpRequest sowie den Zugri auf das DOM durch Bereitstellung von objektorienrierten Schnittstellen. Die Entwicklung von Ajax-Anwendungen wird zudem durch die Unterst utzung von globalen und abfragespezischen Eventhandlern unterst utzt. Auerdem erweitert Prototype viele JavaScript-Objekte um neue Funktionen, welche die Arbeit mit diesen Objekten vereinfachen [Prot07]. Das zus atzlich installierbare Framework script.aculo.us bietet eine Reihe vorgefertigter Eekte und Animationen und die M oglichkeit zum einfachen Erstellen von eigenen Eekten, welche dann in die Ajax-Anwendung eingebaut werden k onnen.
5.3
Google Web Toolkit
Das Google Web Toolkit (GWT) repr asentiert einen anderen Ansatz. Mit dem GWT kann die gesamte Ajax-Anwendung mit einer beliebigen Entwicklungsumgebung in Java entwickelt und getestet werden. Anschlieend wird diese Anwendung mit Hilfe des GWT-Compilers automatisch in eine aus HTML, CSS und JavaScript bestehende Ajax-Anwendung u onnen also mit reinen Javabersetzt [GWT07]. Entwickler k Kenntnissen eine voll funktionsf ahige Ajax-Anwendung erstellen und diese mit den vollen Debugging-Funktionen ihrer Java-Entwicklungsumgebung testen. Zus atzlich bietet das GWT einen Satz wiederverwendbarer Komponenten f ur die Gestaltung einer Benutzerober ache an und unterst utzt auch die Browser-History sowie Bookmarks. Die erstellten Anwendungen sind mit allen groen Browsern (Internet Exporer, Firefox, Mozilla etc.) kompatibel. Auch der Zugri auf DOM ist mit Hilfe generalisierter Klassen browser ubergreifend realisiert [GWT07]. 24
Kapitel 6: Die Zukunft von Ajax
Die Zukunft von Ajax
Ajax erm oglicht die Entwicklung von Webanwendungen der n achsten Generation und wird damit das WWW revolutionieren. Ajax-Anwendungen erm oglichen Benutzern eine interaktivere und nat urlichere Arbeit, da ihnen Anwendungen geboten werden, die die Vorteile von Desktopanwendungen und Webanwendungen kombinieren und damit die Grenzen zwischen diesen Anwendungstypen verwischen. Auch wenn Ajax nicht in allen Webapplikationen Verwendung nden wird und es sicherlich Webanwendungen gibt, f ur die sich Ajax nicht eignet, so er onen sich durch Ajax M oglichkeiten f ur neue Arten von Webanwendungen, wie z.B. web-basierte Oce-Suiten. Auerdem k onnen viele bestehende Anwendungen aller Gr oen durch Ajax um n utzliche Funktionen erweitert werden, wie Google Suggest zeigt. Unterst utzt von Ajax bietet sich also die M oglichkeit, viele Desktop-basierte Anwendungen in Webanwendungen zu transformieren. Die im Rahmen von Ajax eingesetzten Technologien sind bereits erprobt und ausgereift, bieten jedoch M oglichkeiten zur Weiterentwicklung. So wurde das Potential von JavaScript erst im Rahmen von Ajax wirklich klar und l asst auf eine baldige Weiterentwicklung der Sprache schlieen. Die Ansatze einiger Frameworks zur Vereinfachung des DOM-Zugris zeigen, dass auch hier noch viel m oglich ist. 2006 wurde die OpenAjax Alliance gegr undet, der viele groe Firmen wie IBM, Oracle und Google angeh oren [OA07]. Ziel ist die Entwicklung eines OpenSource Ajax-Frameworks, das als standardisiertes Werkzeug eingesetzt werden soll. Initiativen wie diese zeigen, dass Ajax auch in Zukunft eine groe Rolle spielen wird. Der breite Einsatz eines standardisierten Frameworks wird dazu f uhren, dass AjaxAnwendungen fehlerfrei und mit geringerem Aufwand entwickelt werden k onnen. Auch bietet sich hier die M oglichkeit, dass die angesprochenen Nachteile von AjaxAnwendungen auf breiter Basis behoben werden und Ajax-Anwendungen benutzerfreundlicher werden. Weitere Standardisierungsinitiativen betreen die Benutzerober ache. Das World Wide Web Consortiom (W3C) hat daf ur den XForms-Standard entwickelt, welcher ein Bestandteil von XHTML werden soll [WWWC07]. XForms entwickelt die HTML-Formulare und Ober achenkomponenten weiter und bietet unter anderem M oglichkeiten zur clientseitigen Daten uberpr ufung, zur Reaktion von Komponenten auf Anderungen anderer Komponenten. Des weiteren werden durch XForms neue Benutzerober achenkomponenten (z.B. Kalenderfelder) deniert. Diese M oglichkeiten und Komponenten werden bei Umsetzung des Standards von allen Browsern unterst utzt werden m ussen. 25
Kapitel A: Quellcode der Beispielanwendung
Quellcode der Beispielanwendung
Im Rahmen dieser Arbeit wurde eine einfache Kalenderanwendung erstellt, die es erlaubt, Termine in einen Kalender einzutragen und sich die Termine verschiedener Tage anzusehen. Dazu wird eine Ajax-Webseite mit einer PHP-Mysql-Anwendung auf dem Server kombiniert, um die Termine permanent zu speichern.
A.1
Calendar.html
Diese Seite bietet das Grundger ust der Kalenderanwendung.

1
2 3 4 5
6 7 8
9 10 11
12 13 14 15
16 17 18
19 20 21
22
23
24
25
26
<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " " http :// www . w3 . org / TR / html4 / strict . dtd " > < html > <! -- Einbindung der CSS - Formatierungen in die Seite -- > < link href = " style . css " type = " text / css " rel = " stylesheet " / > <! -- Einbindung der Ajax - Engine ( JavaScript - Code ) in die Seite -> < script language = " JavaScript " src = " ajax . js " > </ script > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = iso -8859 -1 " / > < title > Seminar Multimedia - AJAX Beispiel </ title > </ head > <! -- Beim ersten Laden der Seite werden alle Termine geladen , indem die Funktion getAlleTermine () aufgerufen wird -- > < body onload = " getAlleTermine () ; " > <! -- Containerelement , das den Kalender enth a lt -- > < div id = " kalender " > <! -- Kalendertabelle , die Tage werden in den einzelnen Zellen dargestellt -- > < table id = " kalendertab " > < tr > < th colspan = " 7 " > Januar 2008 </ th > </ tr > < tr > < th > Mo </ th > < th > Di </ th > < th > Mi </ th > < th > Do </ th > < th > Fr </ th > < th > Sa </ th > < th > So </ th > </ tr > < tr > < td >& nbsp ; </ td > <! -- Eine Zelle repr a sentiert einen Tag . Beim Klick auf eine Zelle werden die Termine des jeweiligen Tages in die Termin u bersicht geladen . Dies geschieht , indem die Funktion g e t T e r m i n e U e b e r s i c h t () f u r das gew a hlte Datum aufgerufen wird . Innerhalb der Zelle befindet sich ein Containerelement mit der ID der jeweiligen Tages , in welches die Termine eingef u gt werden . -- > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 1) " > 01 < div id = " 1 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 2) " > 02 < div id = " 2 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 3) " > 03 < div id = " 3 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 4) " > 04 < div id = " 4 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 5) " > 05 < div id = " 5 " > </ div > </ td >
26
27
28 29 30
31
32
33
34
35
36
37 38 39
40
41
42
43
44
45
46 47 48
49
50
51
52
53
54
55 56 57
58
< td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 6) " > 06 < div id = " 6 " > </ div > </ td > </ tr > < tr > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 7) " > 07 < div id = " 7 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 8) " > 08 < div id = " 8 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 9) " > 09 < div id = " 9 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 10) " > 10 < div id = " 10 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 11) " > 11 < div id = " 11 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 12) " > 12 < div id = " 12 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 13) " > 13 < div id = " 13 " > </ div > </ td > </ tr > < tr > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 14) " > 14 < div id = " 14 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 15) " > 15 < div id = " 15 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 16) " > 16 < div id = " 16 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 17) " > 17 < div id = " 17 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 18) " > 18 < div id = " 18 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 19) " > 19 < div id = " 19 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 20) " > 20 < div id = " 20 " > </ div > </ td > </ tr > < tr > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 21) " > 21 < div id = " 21 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 22) " > 22 < div id = " 22 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 23) " > 23 < div id = " 23 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 24) " > 24 < div id = " 24 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 25) " > 25 < div id = " 25 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 26) " > 26 < div id = " 26 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 27) " > 27 < div id = " 27 " > </ div > </ td > </ tr > < tr > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 28) " > 28 < div id = " 28 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 29) " > 29 < div id = " 29 " > </ div > </ td >
27
59
60
61 62 63 64 65 66 67
68 69
70 71 72
73
74
75
76 77
78 79 80
81 82 83 84 85
< td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 30) " > 30 < div id = " 30 " > </ div > </ td > < td class = " cal " onclick = " g e t T e r m i n e U e b e r s i c h t (2008 , 1 , 31) " > 31 < div id = " 31 " > </ div > </ td > < td >& nbsp ; </ td > < td >& nbsp ; </ td > < td >& nbsp ; </ td > </ tr > </ table > </ div > <! -- Containerelement der Klasse " termincontainer " ( f u r die Formatierung mittels CSS ) -- > < div class = " termincontainer " > <! -- Tabelle der Klasse " termintab " ( f u r die Formatierung mittels CSS ) , die die Komponenten f u r das Anlegen eines neuen Termines enth a lt -- > < table class = " termintab " > < tr > < th colspan = " 2 " > Neuen Termin Anlegen </ th > </ tr > < tr > < td > Datum : </ td > < td > < input name = " datum " id = " datum " unselectable = " true " disabled = " true " > < input type = " hidden " id = " tag " name = " tag " > </ td > </ tr > < tr > < td > Titel : </ td > < td > < input name = " titel " id = " titel " value = " " > </ td > </ tr > < tr > < td > Beschreibung : </ td > < td > < input name = " beschreibung " id = " beschreibung " value = " " > </ td > </ tr > < tr > < td colspan = " 2 " > < input type = " button " value = " speichern " onclick = " neuerTermin () " > </ td > </ tr > </ table > <! -- Tabelle der Klasse " termintab " ( f u r die Formatierung mittels CSS ) , Termin u bersicht enth a lt -- > < table class = " termintab " > < tr > < th > Termine an diesem Tag </ th > </ tr > <! -- Tabellenzelle f u r die Termin u bersicht mit ID " termindetails " zum Ansprechen u ber DOM -- > < tr > < td > < div id = " termindetails " > </ div > </ td > </ tr > </ table > </ div > </ body > </ html >
A.2
style.css
Diese Datei enth alt die CSS-Formatierungen f ur die o.a. HTML-Seite.

1
2 3 4 5 6 7 8 9
10
/* Formatierung f u r Element mit ID " Kalender " ( Ka lender contai ner ) */ # kalender { border-style : solid ; border-width : medium ; width : 700 px ; height : 700 px ; float : right ; } /* Formatierung f u r Element mit ID " Kalendertab " ( Kalendertabelle ) */ # kalendertab {
28
11 12 13 14 15 16
width : 100%; height : 100%; text-align : center ; border-collapse : collapse ; } /* Formatierung f u r Zellenelement innerhalb des Elementes mit ID " Kalender " ( Kalenderzellen ) */ # kalendertab td { border-color : black ; border-width : thin ; border-style : solid ; vertical-align : top ; width : 14%; height : 14%; } /* * Formatierung f u r Kalenderzellen der Klasse " cal ". * Hier wird ein Pointer-Cursor gesetzt , damit erkennbar ist , dass in die Zellen geklickt werden kann . */ # kalendertab td . cal { cursor : pointer ; } /* Formatierung f ur U b er s c hr i f te n z ei l e n der Kalendertabelle */ # kalendertab th { background-color : blue ; color : white ; font-weight : bold ; } /* * Formatierung f u r Elemente mit Klasse " termin ". * wird f u r die Termineintr a ge im Kalender und in der U bersicht verwendet */ . termin { font-size : 7 pt ; font-family : Tahoma ; background-color : blue ; color : white ; font-weight : bold ; margin-bottom : 1 px ; margin-top : 1 px ; } /* Formatierung f u r Element mit Klasse " termincontainer " ( Be nu tz er ob er fl a c he und Termin u bersicht ) */ . termincontainer { border-style : solid ; border-width : medium ; border-color : black ; width : 350 px ; } /* Formatierung f u r Elemente mit Klasse " termintab " ( Tabellen f ur be nu tz er ob er fl a c he und Termin u bersicht ) */ . termintab { width : 100%; border-collapse : collapse ; text-align : left ;
17 18 19 20 21 22 23 24 25 26 27
28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51
52 53 54 55 56 57 58
59 60 61 62
29
63 64 65 66 67 68 69 70 71 72 73 74
75 76 77 78 79
} /* Formatierung f ur U b er sc hr if te nz ei le der o . a . Tabellen */ . termintab th { background-color : blue ; color : white ; font-weight : bold ; } /* Formatierung f u r die Zellen der o . a . Tabellen */ . termintab td { border-style : none ; } /* Formatierung f u r Element mit ID " termindetails " ( Termin u bersicht ) */ # termindetails { height : 100 px ; font-family : Tahoma ; font-size : 10 pt ; }
A.3
ajax.js
Diese Datei enth alt die Ajax-Engine.

1 2 3 4 5
aktuelleZelle = " " ; /* Funktion f u r die Erstellung eines XMLHttpRequest - Objekts */ function getXMLHttpObject () { // Test , ob X M L H t t p R e q u e s t O b j e k t nativ oder per ActiveX unterst u tzt wird if ( window . XMLHttpRequest ) { // Browser unterst u tzt das XMLHttpRequest - Objekt ( alle auer Interner Explorer < 7) return new XMLHttpRequest () ; } else if ( window . ActiveXObject ) { // Browser unterst u tzt ActiveX ( Internet Explorer < 7) // Versuch , zun a chst aktuellstes ActiveX - Objekt zu erstellen try { return new ActiveXObject ( " Msxml2 . XMLHTTP " ) ; } catch ( ex ) { // Fehlgeschlagen , a ltere Version erstellen try { return new ActiveXObject ( " Microsoft . XMLHTTP " ) ; } catch ( ex ) { } } } } /* Legt einen neuen Termin an */ function neuerTermin () { // neues XMLHttpRequest - Objekt erstellen var resObjekt = new XMLHttpRequest () ; // Callback - Funktion definieren resObjekt . on re ad ys ta te ch an ge = function () { // Ist Request fertig geladen ?
6 7
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
30
32 33 34 35 36
37
38 39 40 41 42 43 44 45 46 47
48
49
50 51
52 53 54 55
56 57 58
59 60 61 62 63 64 65 66 67 68 69 70 71 72
if ( resObjekt . readyState == 4) { // Termin - Elemente aus Response - XML - Dokument auslesen liste = resObjekt . responseXML . g e t E l e m e n t s B y T a g N a m e ( " termin " ) ; // Tag der zur u ckgel iefer ten Elemente auslesen // ( damit klar ist , welche Kalenderzelle aktualisiert werden soll ) tagElem = resObjekt . responseXML . g e t E l e m e n t s B y T a g N a m e ( " day " ) [0]; tag = datumElem . firstchild . data ; anzahl = liste . length ; // Wurden Termine zur u ckgegeben ? if ( anzahl > 0) { termineShort = " " ; termineLong = " " ; // F u r alle zur u ckgegebenen Termine ... for ( i = 0; i < anzahl ; i ++) { // Neues Div - Element der Klasse " Termin " erstellen , // einmal ohne Beschreibung ( f u r Kalender ) und einmal mit ( f u r Detail u bersicht ) . termineShort = termineShort + " < div class =\" termin \" > " + liste [ i ]. g e t E l e m e n t s B y T a g N a m e ( " titel " ) [0]. firstChild . data + " </ div > " ; termineLong = termineLong + " < div class =\" termin \" > " + liste [ i ]. g e t E l e m e n t s B y T a g N a m e ( " titel " ) [0]. firstChild . data + " (" + liste [ i ]. g e t E l e m e n t s B y T a g N a m e ( " beschreibung " ) [0]. firstChild . data + " ) </ div > " ; } // Terminelemente in Kalender eintragen // ( Zelle mit der ID des zu r u ckge liefer ten Tages wird aktualisiert ) document . getElementById ( tag ) . innerHTML = termineShort ; // Terminelemente in Detail u bersicht eintragen document . getElementById ( " termindetails " ) . innerHTML = termineLong ; } else { } } } // Datum aus Textfeld auslesen datum = document . getElementById ( " datum " ) . value ; // Titel des neuen Termins aus Textfeld auslesen titel = document . getElementById ( " titel " ) . value ; // Beschreibung des neuen Termins aus Textfeld auslesen beschreibung = document . getElementById ( " beschreibung " ) . value ; // Animation in aktueller Zelle und Detail u bersicht erzeugen document . getElementById ( aktuelleZelle ) . innerHTML = document . getElementById ( aktuelleZelle ) . innerHTML + < center > < img src =" wait . gif " / > </ center > ; document . getElementById ( " termindetails " ) . innerHTML = document . getElementById ( " termindetails " ) . innerHTML + < center > < img src =" wait . gif " / > </ center > ;
73
31
74
75 76 77
78 79
// Request vorbereiten ( Zugriff auf neuerTermin . php mit Methode POST ) resObjekt . open ( post , neuerTermin . php , true ) ; // Request - Header f u r Senden von POST - Daten setzen resObjekt . setRequestHeader ( " Content - Type " , " application /x - www form - urlencoded " ) ; // Request abschicken ( inkl . POST - Daten ) resObjekt . send ( datum = + datum + & titel = + titel + & beschreibung = + beschreibung ) ; } /* * Liest die Termine aller Kalendertage aus , * wird beim ersten Laden der Anwendung ausgef u hrt . */ function getAlleTermine () { for ( i = 1; i <= 31; i ++) { getTermine (2008 , 1 , i ) } } /* Liest die Termine eines Tages aus und aktualisiert diese im Kalender */ function getTermine ( year , month , day ) { // neues XMLHttpRequest - Objekt erstellen var resObjekt = getXMLHttpObject () ; // Callback - Funktion definieren resObjekt . on re ad ys ta te ch an ge = function () { // Ist Request fertig geladen ? if ( resObjekt . readyState == 4) { // Termin - Elemente aus Response - XML - Dokument auslesen liste = resObjekt . responseXML . g e t E l e m e n t s B y T a g N a m e ( " termin " ) ; anzahl = liste . length ; s = ""; // Wurden Termine zur u ckgegeben ? if ( anzahl > 0) { // F u r alle Termine ... for ( i = 0; i < anzahl ; i ++) { // Neues Div - Element der Klasse " Termin " erstellen s = s + " < div class =\" termin \" > " + liste [ i ]. g e t E l e m e n t s B y T a g N a m e ( " titel " ) [0]. firstChild . data + " </ div > " ; } } // Terminelemente in Kalender eintragen // ( Zelle mit der ID des zur u ckge liefer ten Tages wird aktualisiert ) document . getElementById ( day ) . innerHTML = s ; } } // Animation in zugeh o riger Zelle erzeugen document . getElementById ( day ) . innerHTML = < center > < img src =" wait . gif " / > </ center > ; // Request vorbereiten ( Zugriff auf termine . php mit Methode POST ) resObjekt . open ( post , termine . php , true ) ; // Request - Header f u r Senden von POST - Daten setzen
80 81 82 83 84 85 86 87 88 89 90 91 92
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
110 111 112 113
114 115 116 117 118
119 120 121
32
122
123 124 125 126 127 128
resObjekt . setRequestHeader ( " Content - Type " , " application /x - www form - urlencoded " ) ; // Request abschicken ( inkl . POST - Daten ) resObjekt . send ( datum = + day + . + month + . + year ) ; } /* * Liest die Termine eines Tages aus und schreibt diese in die Detail u bersicht . * Diese Funktion wird beim Klick auf eine Zelle aufgerufen . */ function g e t T e r m i n e U e b e r s i c h t ( year , month , day ) { // neues XMLHttpRequest - Objekt erstellen var resObjekt = getXMLHttpObject () ; // Callback - Funktion definieren resObjekt . on re ad ys ta te ch an ge = function () { // Ist Request fertig geladen ? if ( resObjekt . readyState == 4) { // Termin - Elemente aus Response - XML - Dokument auslesen liste = resObjekt . responseXML . g e t E l e m e n t s B y T a g N a m e ( " termin " ) ; anzahl = liste . length ; // Wurden Termine zur u ckgegeben ? if ( anzahl > 0) { s = ""; // F u r alle Termine ... for ( i = 0; i < anzahl ; i ++) { // Neues Div - Element der Klasse " Termin " erstellen s = s + " < div class =\" termin \" > " + liste [ i ]. g e t E l e m e n t s B y T a g N a m e ( " titel " ) [0]. firstChild . data ; s = s + " ( " + liste [ i ]. g e t E l e m e n t s B y T a g N a m e ( " beschreibung " ) [0]. firstChild . data ; s = s + " ) </ div > " ; } } else { s = " Keine Termine an diesem Tag " ; } // Terminelemente in Detail u bersicht eintragen document . getElementById ( " termindetails " ) . innerHTML = s ; } } // Datum im Textfeld aktualisieren ( da auf die entsprechende Zelle geklickt wurde document . getElementById ( " datum " ) . value = day + . + month + . + year ; // aktuelle Zelle setzen aktuelleZelle = day ; // Animation in Detail u bersicht Zelle erzeugen document . getElementById ( " termindetails " ) . innerHTML = < center > < img src =" wait . gif " / > </ center > ; // Request vorbereiten ( Zugriff auf termine . php mit Methode POST ) resObjekt . open ( post , termine . php , true ) ; // Request - Header f u r Senden von POST - Daten setzen resObjekt . setRequestHeader ( " Content - Type " , " application /x - www form - urlencoded " ) ; // Request abschicken ( inkl . POST - Daten ) resObjekt . send ( datum = + day + . + month + . + year ) ; }
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
148
149 150 151 152 153 154 155 156 157 158
159
160 161 162 163
164 165 166 167
168 169 170
33
A.4
neuerTermin.php
Diese Datei enth alt die serverseitige Applikationslogik zum Anlegen eines neuen Termins. Dazu werden dem PHP-Skript per POST-Methode die Parameter f ur Datum, Titel und Beschreibung des neuen Termins in den Variablen datum, titel, und beschreibung u bergeben (Zeilen 10-12). Das Skript gibt dem Client alle Termine des gew ahlten Datums als XML zur uck, inklusive des neu angelegten Termines, damit der Client diese Termine aktualisieren kann.
1 2
3 4
5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22
<? php // Response - Header auf XML setzen , damit der Client die zur u ckgeli eferte n Daten als XML interpretiert @header ( " Content - type : text / xml " ) ; // Browser - seitiges zw ischen speich ern ( caching ) von u bermittelten Daten deaktivieren , damit nicht alte Daten aus dem Cache verwendet werden @header ( " Cache - Control : no - cache , must - revalidate , max - age =0 " ) ; @header ( " Pragma : no - cache " ) ; // 1 Sekunde Verz o gerung , um Ajax - Funktionalit a t zu demonstrieren sleep (1) ; // U bergebene Parameter ( Datum , Titel , Beschreibung ) aus POST Variablen auslesen $datum_str = $HTTP_POST_VARS [ " datum " ]; $titel = $HTTP_POST_VARS [ " titel " ]; $beschreibung = $HTTP_POST_VARS [ " beschreibung " ]; // U berpr u fung , ob alle Parameter u bergeben wurden if ( isset ( $datum_str ) && isset ( $titel ) && isset ( $beschreibung ) ) { // Typkonvertierung des Datums von String nach Date $datum = date_create ( $datum_str ) ; // Verbindung zum MySQL - Server und zur Datenbank aufbauen $mysql_conn = mysql_connect ( " localhost " , " root " , " " , false ) ; mysql_select_db ( " AjaxBeispiel " ) ; // Neuen Termin per SQL in die Datenbank einf u gen $query = " INSERT INTO termine ( datum , titel , beschreibung ) VALUES (\" " . date_format ( $datum , "Y -m - d " ) . " \" ,\" $titel \" ,\" $beschreibung \") " ; $result = mysql_query ( $query , $mysql_conn ) or die ( " ERROR : " . mysql_error () ) ; // Alle Termine des u bergebenen Tages ausw a hlen $query = " SELECT titel , beschreibung FROM termine WHERE datum = \" " . date_format ( $datum , "Y -m - d " ) . " \" " ; $result = mysql_query ( $query , $mysql_conn ) or die ( " ERROR : " . mysql_error () ) ; // Ergebnis als XML - Formatierte Daten ausgeben echo " <? xml version = \"1.0\" ? > " ; echo " < termine > < tag > " . date_format ( $datum , " j " ) . " </ tag > " ; // Alle Termine in XML - String einf u gen while ( $row = mysql _fetch _array ( $result , MYSQL_BOTH ) ) { echo " < termin > < titel > " . $row [0] . " </ titel > < beschreibung > " . $row [1] . " </ beschreibung > </ termin > " ; } echo " </ termine > " ; } else {
23
24 25 26
27
28 29 30 31 32 33
34 35 36
34
37
38 39 40
// Falls nicht alle Parameter u bergeben wurden , leeres XML zur u ckgeben echo " <? xml version = \"1.0\" ? > < termine > </ termine > " ; } ?>
A.5
termine.php
Diese Datei enth alt die serverseitige Applikationslogik zum Abfragen aller Termine eines Datums. Dazu wird dem PHP-Skript per POST-Methode das Datum in der Variablen datum u bergeben (Zeile 10). Das Skript gibt dem Client alle Termine des gew ahlten Datums als XML zur uck.
1 2
3 4 5 6 7
8 9 10 11 12 13 14 15 16 17 18 19 20
<? php // Response - Header auf XML setzen , damit der Client die zur u ckgeli eferte n Daten als XML interpretiert @header ( " Content - type : text / xml " ) ; // Browser - seitiges Caching deaktivieren @header ( " Cache - Control : no - cache , must - revalidate , max - age =0 " ) ; @header ( " Pragma : no - cache " ) ; // 1 Sekunde Verz o gerung , um Ajax - Funktionalit a t zu demonstrieren sleep (1) ; // U bergebenen Parameter ( Datum ) aus POST - Variablen auslesen $datumstr = $HTTP_POST_VARS [ " datum " ]; // U berpr u fung , ob Parameter u bergeben wurde if ( isset ( $datumstr ) ) { // Typkonvertierung des Datums von String nach Date $datum = date_create ( $datumstr ) ; // Verbindung zum MySQL - Server und zur Datenbank aufbauen $mysql_conn = mysql_connect ( " localhost " , " root " , " " , false ) ; mysql_select_db ( " AjaxBeispiel " ) ; // Alle Termine des aktuellen Tages ausw a hlen $query = " SELECT titel , beschreibung FROM termine WHERE datum = \" " . date_format ( $datum , "Y -m - d " ) . " \" " ; $result = mysql_query ( $query , $mysql_conn ) or die ( " ERROR : " . mysql_error () ) ; // Ergebnis als XML - Formatierte Daten ausgeben echo " <? xml version = \"1.0\" ? > " ; echo " < termine > < tag > " . date_format ( $datum , " j " ) . " </ tag > " ; // Alle Termine in XML - String einf u gen while ( $row = mysql _fetch _array ( $result , MYSQL_BOTH ) ) { echo " < termin > < titel > " . $row [0] . " </ titel > < beschreibung > " . $row [1] . " </ beschreibung > </ termin > " ; } echo " </ termine > " ; } else { // Falls nicht alle Parameter u bergeben wurden , leeres XML zur u ckgeben echo " <? xml version = \"1.0\" ? > < termine > </ termine > " ; } ?>
21
22 23 24 25 26 27
28 29 30 31
32 33 34
35
Kapitel B: Beispielanwendung mit Sajax
Beispielanwendung mit Sajax
Als Beispiel soll hier die Kalenderanwendung mittels Sajax und PHP implementiert und Unterschiede zur normalen Implementierung (siehe Anhang A) erkl art werden. Zuvor wurden in der Kalenderanwendung f ur die einzelnen Funktionen verschiedene PHP-Dateien per XMLHttpRequest aufgerufen. Diese Dateien werden nun als einzelne PHP-Funktionen deniert, damit diese sp ater per Sajax aufgerufen werden k onnen. Quelltext 22 enth alt die Funktion neuerTermin, durch die ein neuer Termin an einem per Funktionsparameter u bergebenen Datum erstellt wird. Die Parameter werden der Funktion dabei durch Sajax u ussen nicht mehr explizit bergeben und m via POST Abgefragt werden. W ahrend der R uckgabewert zuvor manuell als XMLDatei formatiert wurde, wird bei Nutzung von Sajax einfach ein Objekt vom Typ Termine erstellt und zur uckgegeben (Zeilen 11 bis 21). Dazu werden die Termine des angegebenen Datums in ein Array gespeichert (Zeile 8) und anschlieend dem Objekt zugewiesen (Zeile 19).
1 2 3 4 5
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
function neuerTermin ( $datumstr , $titel , $beschreibung ) { sleep (1) ; $tag = " " ; $termine = array () ; if ( isset ( $datumstr ) && isset ( $titel ) && isset ( $beschreibung ) ) { // (...) MySQL - Anfrage while ( $row = mysql _fetch _array ( $result , MYSQLI_BOTH ) ) { array_push ( $termine , array ( $row [0] , $row [1]) ) ; } } class Termine { var $tag , $termine ; function Termine ( $tag , $termine ) { $this - > tag = $tag ; $this - > termine = $termine ; } } $o = new Termine ( $tag , $termine ) ; return $o ; }
Quelltext 6: Sajax: Denition der PHP-Funktion neuerTermin Quelltext 22 zeigt vereinfacht den neuen Aufbau der Hauptseite. Die oben denierte Funktion wird in der Client-Anwendung mittels Sajax export("neuerTermin") (Zeile 7) bekannt gemacht. Durch das PHP-Statement sajax show javascript() (Zeile 13) wird automatisch der n otige Javascript-Code generiert, um diese Funktion clientseitig aufzurufen. Dazu erstellt Sajax die Javascript-Wrapper-Funktion x neuerTermin, in der intern ein XMLHttpRequest-Objekt dazu verwendet wird, die Parameter und den Funktionsnamen an den Server zu u bermitteln und diese Funktion dort aufzu36
rufen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<? php require ( " sajax . php " ) ; require ( " termine . php " ) ; require ( " neuerTermin . php " ) ; sajax_init () ; sajax_export ( " getTermine " ) ; sajax_export ( " neuerTermin " ) ; s a j a x _ h a n d l e _ c l i e n t _ r e q u e s t () ; ?> < html > < link href = " style . css " type = " text / css " rel = " stylesheet " / > < head > < script language = " JavaScript " > <? php s a j a x _ s h o w _ j a v a s c r i p t () ? > </ script > < script language = " JavaScript " src = " ajax . js " > </ script > </ head > < body onload = " getAlleTermine () " > (...) </ body > </ html >
Quelltext 7: Sajax: Vereinfachte Hauptseite der Kalenderanwendung Die Wrapper-Funktion wird durch x neuerTermin(datum, titel, beschreibung,
do neuerTermin cb)
aufgerufen, wenn der Benutzer einen neuen Termin erstellt. Die
ersten drei Parameter sind dabei die an die PHP-Funktion zu u bergebenden Parameter, w ahrend der vierte Parameter eine Referenz auf die Callback-Funktion ist. Das von der PHP-Funktion zur uckgelieferte Termine-Objekt steht im Client in der Callback-Funktion als Parameter val zur Verf ugung. Quelltext 19 zeigt die Callback-Funktion. Hier vereinfacht sich der n otige Code im Vergleich zur urspr unglichen Kalenderanwendung deutlich, da es nun nicht mehr n otig ist, die XMLR uckgabe zu parsen. Stattdessen kann auf die Eigenschaften des u bergebenen Objektes (also tag und termine) mit den gleichen Bezeichnungen wie im serverseitigen Skript zugegrien werden. Auch ist die manuelle Uberpr ufung von Status des XMLHttpRequest Objektes nicht mehr n otig, da die Callback-Funktion von Sajax nur aufgerufen wird, wenn die angeforderten Daten komplett empfangen wurden.
1
2 3 4 5 6 7 8 9 10
// Callback Funktion f u r die Erstellung eines neuen Termins , liefert alle Termine des gew a hlten Tages zur u ck function do_n euerTe rmin_c b ( val ) { // Gew a hlten Tag speichern day = val . tag ; termineShort = " " ; termineLong = " " ; // Termine der zur u ckgegebenen Objektes durchlaufen for ( var i in val . termine ) { // T e r m i n b e s c h r e i b u n g e n ausgeben termineShort = termineShort + " < div class =\" termin \" > " + val . termine [ i ][0] + " </ div > " ;
37
11
12 13 14 15 16 17 18
termineLong = termineLong + " < div class =\" termin \" > " + val . termine [ i ][0]; termineLong = termineLong + " ( " + val . termine [ i ][1]; termineLong = termineLong + " ) </ div > " ; } // T e r m i n b e s c h r e i b u n g e n in die ben ut ze ro be rf l a ch e einf u gen document . getElementById ( day ) . innerHTML = termineShort ; document . getElementById ( " altetermine " ) . innerHTML = termineLong ; }
Quelltext 8: Sajax: Callback-Funktion f ur neuerTermin Durch die Verwendung von Sajax in der Beispielanwendung vereinfacht sich die Entwicklung. Die gew unschten Funktionen werden nur in PHP deniert und stehen in JavaScript automatisch zur Verf ugung. F ur den Datenaustausch zwischen Client und Server k onnen dabei statt XML-formatierten Daten Objekte verwendet werden, was den Zugri auf diese Daten und somit auch die Programmlogik vereinfacht. Schlielich muss das XMLHttpRequest-Objekt inklusive aller browserspezischen Unterschiede nicht manuell erstellt und abgefragt werden. Die Entwicklung auch kleiner Ajax-Anwendungen mit Unterst utzung von Frameworks bietet also viele Vorteile.
38
Literaturverzeichnis
Literatur
[Ga05] Jesse James Garrett: Ajax - A New Approach to Web Applications, Adaptive-Path Webseite. URL: http://www.adaptivepath.com/ideas/essays/archives/000385.php, Abrufdatum: 14. Dezember 2007. [GGA06] Justin Gethland, Ben Galbraith, Dion Almaer: Pragmatic Ajax, The Pragmatic Programmers, 2006. [Gr07] Christian Gross: Ajax - Design Patterns und Best Practices, REDLINE Gmbh, 2007. [GWT07] Google Code: Google Web Toolkit, Google Webseite. URL: http://code.google.com/webtoolkit/overview.html, Abrufdatum: 14. Dezember 2007. [IB07] IT-Business: Gartner sagt zweistelliges Wachstum f ur SAAS voraus, ITBusiness Webseite, 2007. URL: http://www.it-business.de/themenkanaele/marktforschung/trends/ allgemein/articles/90003/, Abrufdatum: 14. Dezember 2007. [Ma06] Michael Mahemo: Ajax Design Patterns, OReilly, 2006. [Me06] Christopher L Merrill: Using Ajax to Improve the Bandwidth Performance of Web Applications, WebPerformance Webseite. URL: http://www.webperformanceinc.com/library/reports/AjaxBandwidth/ index.html, Abrufdatum: 14. Dezember 2007. [NS06] S. Niedermeyer, M. Scholz: JAVA und XML, Galileo Computing, 2006. [Prot07] Prototype Articles: prototype Tips and Tutorials, Prototype Webseite, 2007. URL: http://www.prototypejs.org/learn, Abrufdatum: 14. Dezember 2007. [Re06] John Resig: Pro JavaScript Techniques, Apress, 2006. [St07] Ralph Steyer: Ajax, Markt + Technik, 2007. [We06] Christian Wenz: Ajax, entwickler.press, 2006. 39
Literaturverzeichnis
[WWWC02] W3C Recommendation: XHTML 1.0 The Extensible HyperText Markup Language (Second Edition), W3C Webseite, 2002. URL: http://www.w3.org/TR/xhtml1/, Abrufdatum: 14. Dezember 2007. [WWWC06] W3C Recommendation: Extensible Markup Language (XML) 1.0 (Fourth Edition), W3C Webseite, 2006. URL: http://www.w3.org/TR/2006/REC-xml-20060816/, Abrufdatum: 14. Dezember 2007. [WWWC98] W3C Working Draft: Level 1 Document Object Model Specication, W3C Webseite, 1998. URL: http://www.w3.org/TR/WD-DOM/, Abrufdatum: 14. Dezember 2007. [WWWC99] W3C Recommendation: Cascading Style Sheets, Level 1, W3C Webseite, 1999. URL: http://www.w3.org/TR/CSS1, Abrufdatum: 14. Dezember 2007. [WWWC07] W3C Candidate Recommendation: XForms 1.1, W3c Webseite, 2007. URL: http://www.w3.org/TR/xforms11/, Abrufdatum: 14. Dezember 2007. [OA07] Open Ajax Alliance, Open Ajax Alliance Webseite, 2007. URL: http://www.openajax.org/, Abrufdatum: 14. Dezember 2007.
40

Ajax

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ajax

Hochgeladen von

Copyright:

Verfügbare Formate

Westf alische Wilhelms-Universit at Mu nster

3 Ajax-Elemente 3.1 3.2 3.3 3.4 3.5 (X)HTML und CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4 Ajax in der kritischen Betrachtung 4.1 4.2

5 Ajax-Frameworks 5.1 5.2 5.3

Sajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 25 26

6 Die Zukunft von Ajax A Quellcode der Beispielanwendung

Abbildung 1: Google Suggest

Eigenschaften von Ajax-Anwendungen

(X)HTML und CSS

XML und XSLT

Quelltext 3: Beispiel XML-Dokument

Document Object Model (DOM)

und getElementByID bereit. Durch den Aufruf 13

Das XMLHttpRequest Objekt

erstellt. Dies ist ein vereinfachter Aufruf, der in der

Quelltext 5: XMLHttpRequest in der Beispielanwendung (vereinfacht)

Kapitel 4: Ajax in der kritischen Betrachtung

Ajax in der kritischen Betrachtung

Kapitel 4: Ajax in der kritischen Betrachtung

Kapitel 4: Ajax in der kritischen Betrachtung

Kapitel 4: Ajax in der kritischen Betrachtung

Google Web Toolkit

Kapitel 6: Die Zukunft von Ajax

Die Zukunft von Ajax

Kapitel A: Quellcode der Beispielanwendung

Quellcode der Beispielanwendung

Diese Seite bietet das Grundger ust der Kalenderanwendung.

Kapitel A: Quellcode der Beispielanwendung

Kapitel A: Quellcode der Beispielanwendung

Diese Datei enth alt die CSS-Formatierungen f ur die o.a. HTML-Seite.

Kapitel A: Quellcode der Beispielanwendung

Kapitel A: Quellcode der Beispielanwendung

Diese Datei enth alt die Ajax-Engine.

Kapitel A: Quellcode der Beispielanwendung

Kapitel A: Quellcode der Beispielanwendung

110 111 112 113

114 115 116 117 118

119 120 121

Kapitel A: Quellcode der Beispielanwendung

123 124 125 126 127 128

160 161 162 163

164 165 166 167

168 169 170

Kapitel A: Quellcode der Beispielanwendung

Kapitel A: Quellcode der Beispielanwendung

Kapitel B: Beispielanwendung mit Sajax

Beispielanwendung mit Sajax

Kapitel B: Beispielanwendung mit Sajax

aufgerufen, wenn der Benutzer einen neuen Termin erstellt. Die

Kapitel B: Beispielanwendung mit Sajax

Das könnte Ihnen auch gefallen