Ajax

Westfalische Wilhelms-Universitat Munster

Ausarbeitung

Ajax

im Rahmen des Seminars Multimedia

Jannik Niemer

Themensteller: Prof. Dr. Herbert Kuchen

Betreuer: Christian Arndt

Institut fur Wirtschaftsinformatik

Praktische Informatik in der Wirtschaft

Inhaltsverzeichnis

1 Einleitung 1

2 Ajax-Grundlagen 2

2.1 Ajax-Architektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Eigenschaften von Ajax-Anwendungen . . . . . . . . . . . . . . . . . 5

3 Ajax-Elemente 8

3.1 (X)HTML und CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3.2 XML und XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.3 Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . 13

3.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.5 Das XMLHttpRequest Objekt . . . . . . . . . . . . . . . . . . . . . . 16

4 Ajax in der kritischen Betrachtung 19

4.1 Vorteile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.2 Nachteile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

5 Ajax-Frameworks 23

5.1 Sajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.2 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5.3 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

6 Die Zukunft von Ajax 25

A Quellcode der Beispielanwendung 26

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 36

Literaturverzeichnis 39

i

Kapitel 1: Einleitung

1 Einleitung

Die Popularitat 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 fur Webanwendungen auch weiter-

hin wachsen wird [IB07].

Das Web 2.0 markiert den Beginn eines neuen Internet-Zeitalters, getrieben

durch eine Veranderung der Webanwendungen in den letzten Jahren. Webanwen-

dungen verandern sich von einer statischen hin zu einer dynamischen Benutzero-

berflache und werden Desktopanwendungen immer ahnlicher. Diese Dynamisierung

von Webanwendungen wird vor allem durch”Ajax“, eines der Schlagworte und

Schlusseltechnologien des Web 2.0, ermoglicht.

Das Ziel dieser Arbeit ist es, die Funktionsweise von Ajax darzustellen und zu

beschreiben, wie mit Ajax die Lucke zwischen Webanwendungen und Desktopanwen-

dungen geschlossen wird. Zur Veranschaulichung wurde im Rahmen dieser Arbeit

eine einfache Ajax-unterstutzte Kalender-Anwendung entwickelt, welche es erlaubt,

Termine anzulegen und zu betrachten.

Zunachst werden in Kapitel 2 die Grundlagen von Ajax beschrieben. Dazu wird

zunachst die Bedeutung von”Ajax“ erlautert und anschließend auf die Architektur

hinter Ajax sowie typische Eigenschaften von Ajax-Anwendungen eingegangen.

In Kapitel 3 werden die einzelnen Technologien , aus denen sich Ajax zusammen-

setzt, sowie deren Bedeutung und Zusammenspiel im Rahmen von Ajax erklart.

Anschließend werden in Kapitel 4 in einer kritischen Bewertung von Ajax die Vor-

und Nachteile gegenuber Desktopanwendungen und klassischen Webanwendungen

herausgestellt.

In Kapitel 5 werden Ajax-Frameworks vorgestellt, die die Entwicklung von Ajax-

Anwendungen vereinfachen und Losungen fur einige der Nachteile bieten. Die Kalender-

Anwendung wurde zur Veranschaulichung noch einmal unter Nutzung eines vorge-

stellten Frameworks implementiert.

Zum Abschluss der Arbeit wird in Kapitel 6 ein Ausblick auf die Zukunft von

Ajax gegeben.

1

Kapitel 2: Ajax-Grundlagen

2 Ajax-Grundlagen

Der Begriff Ajax steht fur”Asynchronous Javascript and XML“ und wurde im Jahr

2005 von Jesse James Garett in seinem Essay”Ajax - A New Approach to Web

Applications“ gepragt [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 folgendermaßen definiert:”

An Ajax

Application builds on standard web technologies to deliver a rich, responsive user

experience“. Ajax-Anwendungen basieren also wie klassische Webanwendungen ein-

zig und allein auf einem Webbrowser, es wird keine Installation auf dem Rechner

benotigt. Dabei heben sich Ajax-Anwendungen durch eine verbesserte Benutzerin-

teraktion von klassichen Webanwendungen ab. Eine reichhaltige Benutzeroberflache

wird durch Einsatz von Animationen und Oberflachenkomponenten erreicht. Da-

bei ergibt sich eine hohe Reaktionsfreudigkeit der Anwendung durch viele kleine

Anderungen in der Benutzeroberflache. Die Anderungen aktualisieren jeweils nur

einzelne Teile der Benutzeroberflache, ohne den Benutzer in seiner Arbeit zu un-

terbrechen. Diese und weitere Charakteristika von Ajax-Anwendungen werden in

Kapitel 2.2 erklart.

Hinter dem relativ neuen Begriff verbirgt sich keine eigenstandige Technologie,

sondern eine Architektur, die einige bereits bekannte und standardisierte Techno-

logien in einer zuvor nicht bekannten Art miteinander kombiniert. Neben den in

der Abkurzung Ajax enthaltenen Technologien JavaScript und XML kommen da-

bei weitere Technologien zum Einsatz. Die im Zuge von Ajax angewendeten und

kombinierten Technologien sind [Ga05]:

• (X)HTML in Kombination mit CSS fur Layout und Struktur der Webabwen-

dung.

• Document Object Model (DOM) zur dynamischen Manipulation von Daten.

• XML (in Kombination mit XSLT) fur 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 fur 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 schlagt dem Benutzer schon wahrend der Eingabe des

gewunschten Suchbegriffs passende Begriffe vor (Abbildung 1). Wahrend die Seite an

sich identisch mit der normalen Google-Suchmaschinenseite ist, wird bei der Eingabe

von Text ins Suchfeld schon nach passenden Begriffen gesucht und diese dem Benut-

zer prasentiert. Durch Ajax wird also ein zusatzliches Feature zu einer bereits be-

stehenden Anwendung hinzugefugt. Google Maps (http://maps.google.com) hin-

gegen ist ein gutes Beispiel fur eine Anwendung, die Ajax in großem Stil einsetzt.

Bei der Interaktion mit dem angezeigten Kartenausschnitt (z.B. zoomen) werden

die neuen Kartendaten nachgeladen, wahrend der Benutzer bereits mit der unvoll-

standigen Karte weiterarbeiten kann. In diesem Fall basiert also die Kernfunktiona-

litat der Anwendung auf Ajax.

Abbildung 1: Google Suggest

3


2.1 Ajax-Architektur

Alle Webanwendungen basieren auf einer Client-Server-Architektur, in denen der

Webbrowser vom Webserver ubertragene Daten fur den Benutzer darstellt. Fur

die Kommunikation zwischen Webserver und Browser wird das Hypertext Transfer

Protocol (HTTP) verwendet. Dieses Protokoll basiert auf einem Anfrage-Antwort-

Schema, bei dem vom Client benotigte Daten in einer Anfrage (HTTP-Request) vom

Webserver angefordert und in Form einer HTTP-Response als HTML-codierte Web-

seite (formatiert mit CSS) vom Webserver an den Browser zuruckgeliefert. Dabei

wird keine permanente Verbindung zwischen Webserver und Browser aufrechterhal-

ten, das Protokoll ist also zustandslos [St07, S. 56ff.].

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 zugehorigen Webserver gesen-

det. Der Webserver verarbeitet diesen Request, fordert notige Daten von Daten-

banksystemen oder anderen Webservern an und sendet eine aus diesen Daten ge-

nerierte HTML-Seite zuruck an den Browser (Abbildung 2), der diese dann dar-

stellt. Wahrend der Weberver den Request bearbeitet und der Browser auf eine

Antwort wartet, wird der Benutzer in seiner Arbeit unterbrochen. Der Datenaus-

tausch zwischen Client und Server erfolgt also synchron und nur als Reaktion auf

Benutzeraktionen [St07, S. 61]. Zudem wird fur jede Benutzerinteraktion eine kom-

plette Webseite neu geladen und dargestellt. Dies erhoht zum einen die ubertragene

Datenmenge unnotig, zum anderen verlangsamt es die Interaktion mit der Weban-

wendung.

In einer Ajax-Anwendung hingegen kann unabhangig von Benutzerinteraktionen

weitere Kommunikation zwischen Server und Client erfolgen. Dazu verwenden Ajax-

Anwendungen eine in JavaScript programmierte Ajax-Engine, welche beim ersten

Aufruf der Anwendung geladen wird [Ga05]. Die Ajax-Engine ist fur das asynchrone

Nachladen von benotigten Daten und den Einbau dieser Daten in die bestehende

Webseite zustandig und erlaubt es dem Benutzer weiterzuarbeiten, wahrend gleich-

zeitig Benutzerinteraktionen bearbeitet und Daten nachgeladen werden. Die Benut-

zerinteraktionen werden hier nicht direkt als HTTP-Requests an einen Webserver

weitergeleitet, sondern zunachst der Ajax-Engine ubergeben (Abbildung 3). Einfa-

che Operationen wie etwa eine Validierung eingegebener Daten (z.B. Formatprufung

einer Email-Adresse) konnen direkt beim Client durch die Ajax-Engine bearbeitet

werden. Werden zusatzliche Daten benotigt, so werden diese durch die Ajax-Engine

in Form eines HTTP-Request angefordert. Dabei wird nicht jedesmal eine komplette

4


Abbildung 2: Web-Applikationsmodell klassisch (nach [Ga05])

HTML-Seite ubertragen, sondern nur die wirklich von der Anwendung benotigten

Daten in einem beliebigen textbasierten Datenformat, in der Regel XML oder JSON

(siehe Kapitel 3.2). So wird vermieden, dass mehr Daten als notig zwischen Ser-

ver und Client ubertragen werden. Der Benutzer kann weiterarbeiten, wahrend die

Ajax-Engine auf die Daten vom Webserver wartet und diese nach Empfang mittels

DOM (siehe Kapitel 3.3) in die bestehende Benutzeroberflache einbaut. Es ist al-

so fur Ajax-Anwendungen nicht zwingend notwendig, bei jeder Benutzeraktion die

gesamte Seite neu zu laden.

In der Kalenderanwendung wird beispielsweise beim Anlegen eines neuen Ter-

mins nicht die gesamte Seite neu geladen, sondern lediglich der neue Termin im

Kalender hinzugefugt. Wahrend der neue Termin eingetragen wird, kann der Benut-

zer 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 Weban-

wendungen. Die wichtigsten Merkmale, die Ajax-Anwendungen ausmachen und von

klassischen Webanwendungen differenzieren, werden im Folgenden erlautert.

5


Abbildung 3: Web-Applikationsmodell Ajax (nach [Ga05])

Anwendungen statt Webseiten

Ajax-Anwendungen bieten einen großeren Funktionsumfang als klassische Weban-

wendungen und sind daher als vollwertige Anwendungen zu betrachten, mit denen

auch komplexere alltagliche Aufgaben bearbeitet werden konnen. Beispielsweise gibt

es komplette Ajax-unterstutzte Textverarbeitungen wie AjaxWrite (http://ajaxwrite.de/).

Kontinuierliche Interaktion

Der Benutzer einer Ajax-Anwendung wird nicht wie bei einer klassischen Webanwen-

dung standig in seiner Arbeit unterbrochen, sondern kann weiter arbeiten, wahrend

Daten vom Server nachgeladen werden. Es gibt kein klassisches Laden von neuen

Seiten mehr, sondern nur noch ein Aktualisieren der Benutzeroberflache in Reaktion

auf Benutzeraktionen.

6


Aktualitat

Da eine Ajax-Anwendung auch eine Webanwendung ist, sind die verwendeten und

dargestellten Daten immer aktuell. So ist es z.B. fur einen Ajax-Newsreader moglich,

den Server in bestimmten Zeitabstanden nach aktuellen Daten zu uberprufen, diese

im Hintergrund in die Benutzeroberflache einzubauen und dem Benutzer somit im-

mer die aktuellsten Daten zu prasentieren. Bei einer klassischen Webanwendung ist

dies nicht moglich, ohne die komplette Seite neu zu laden.

Neuere Benutzeroberflache

Ajax-Anwendungen verwenden erweiterte oder neue Oberflachenkomponenten (z.B.

Tree-Views oder Kalenderfelder) fur die Gestaltung einer Benutzeroberflache, die

der von Desktopanwendungen ahnelt.

Visuelle Effekte

Ajax-Anwendungen setzen in der Regel Animationen und andere visuelle Effekte

starker als klassischen Webanwendungen ein, um Anderungen in der Benutzerober-

flache an den Benutzer zu kommunizieren. Die Effekte dienen in Ajax-Anwendungen

nicht nur dem Design, sondern unterstutzen den Benutzer bei seiner Arbeit und in-

formieren ihn uber die momentan ablaufenden Prozesse.

Neue Interaktionswege

In Ajax-Anwendungen werden bisher nur aus Desktopanwendungen bekannte In-

teraktionsstile verwendet, wie z.B. Drag-And-Drop oder eine Contentbearbeitung

direkt in der Webseite.

Standardisiert und Plattformunabhangig

Ajax-Anwendungen basieren auf bereits etablierten und standardisierten Techno-

logien (Kapitel 3) und sind somit in jedem neueren Webbrowser (d.h. aus dem

vergangenen Jahr) unabhangig von Hardware oder Betriebssystem lauffahig.

7

Kapitel 3: Ajax-Elemente

3 Ajax-Elemente

In diesem Kapitel werden die einzelnen Technologien, aus denen sich Ajax zusam-

mensetzt, sowie die Zusammenarbeit dieser Technologien in Ajax-Anwendungen er-

klart. Die Technologien kommen dabei nur auf der Clientseite zum Einsatz. Die

Ajax-Engine lauft also komplett im Browser des Benutzers. Zur Erstellung von dy-

namischen Webanwendungen, bei denen z.B. Daten aus Datenbanken geladen wer-

den, bietet sich der Einsatz einer serverseitigen Programmiersprache wie z.B. PHP

an. Dabei ist es fur den Einsatz von Ajax irrelevant, welche serverseitigen Tech-

nologien konkret verwendet werden, solange diese in der Lage sind, Daten mit der

Ajax-Engine auszutauschen (also z.B. XML oder JSON unterstutzen) [St07, S. 61].

3.1 (X)HTML und CSS

HTML

Die Hypertext Markup Language (HTML) ist eine Auszeichnungssprache (engl.: Mar-

kup Language) fur Webseiten, welche neben den eigentlichen Daten (dem Seitenin-

halt) auch die logische Struktur der Seiten beschreibt. Die logische Struktur einer

Seite beinhaltet Elemente wie Uberschriften, Absatze, Bilder und Tabellen. Diese

Elemente werden in HTML durch Steuerelemente, sogenannte Tags, reprasentiert,

welche durch spitze Klammern markiert werden und den Inhalt des jeweiligen Ele-

ments umschließen (z.B. <h1>Dies ist eine Uberschrift</h1>) [St07, S. 94 - 100].

Einzelnen Elementen konnen Klassen und IDs zugeordnet werden, um sie leich-

ter identifizieren zu konnen. Quelltext 7 zeigt ein Element aus der HTML-Datei der

Beispielanwendung, welches den Kalender als Tabelle in einem Containerelement

enthalt. Containerelemente werden durch einen”<div>“-Tag definiert und dienen

der logischen Strukturierung, haben aber keinen Einfluss auf das Aussehen der Seite.

Mit ihrer Hilfe kann auf Teilbereiche einer HTML-Seite gezielt zugegriffen werden.

Sowohl das Containerelement als auch die Tabelle werden mit IDs versehen, um

spater in der Anwendung auf diese Elemente zugreifen zu konnen.

<div id="kalender"><table id="kalendertab">

<tr><th colspan="7">Januar 2008</th></tr>(...)

</table ></div>

Quelltext 1: Kalenderdefinition in der Beispielanwendung

Web-Browser verhalten sich bezuglich HTML sehr tolerant und versuchen auch

fehlerhafte Seiten moglichst korrekt und ohne Fehlermeldungen darzustellen. Dieses

8


Prinzip der Fehlertoleranz vereinfacht die Entwicklung von Webseiten und erhoht die

Kompatibilitat zwischen Browsern [St07, S. 101]. Gleichzeitig erschwert es aber die

Maschinenlesbarkeit von HTML-Dokumenten, da diese nicht zwangslaufig fehlerfrei

sein mussen, um im Webbrowser korrekt dargestellt zu werden.

XHTML

Die Extensible Hypertext Markup Language (XHTML) ist eine auf XML basierende

Neuauflage von HTML [WWWC02]. Wahrend 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 forma-

tiert sind. Die strengeren Syntaxregeln gewahrleisten eine bessere Maschinenlesbar-

keit von XHTML-Dokumenten im Vergleich zu HTML-Dokumenten. Zudem wird

mit XHTML die Layout-Gestaltung komplett zu CSS ausgelagert, da in HTML ent-

haltene Layout-Elemente hier nicht definiert sind (zumindest in der strikten Variante

der Sprache) [St07, S. 106].

CSS

Wahrend der grundlegende Aufbau und Inhalt von Webseiten in (X)HTML be-

schrieben 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

konnen die Eigenschaften aller HTML-Elemente wie Farbe, Form und Position fest-

gelegt werden. Diese Eigenschaften konnen nach bestimmten Regeln z.B. auf alle

Elemente einer Art, alle Elemente einer Klasse oder fur einzelne Elemente anhand

ihrer ID’s angewendet werden. Auch einfache Beziehungen konnen abgebildet wer-

den (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, erhalt eine festgelegte Große und wird auf dem Bildschirm

positioniert (Quelltext 13).

9


/* Formatierung fur Element mit ID "Kalender"*/#kalender {

/* Durchgehenden Rahmen anzeigen */border-style: solid;/* Rahmenbreite mittel */border-width: medium;/* Breite und Hohe des Kalenders auf 700 Pixel setzen */width: 700px;height: 700px;/* Kalender soll auf der rechten Seite schweben */float: right;

}

Quelltext 2: Kalenderformatierung

Ajax-Relevanz

Die Benutzeroberflache einer Ajax-Anwendung besteht wie eine klassische Weban-

wendung aus (X)HTML in Kombination mit CSS. Da sich XHTML-Dokumente we-

gen der strikteren Syntax leichter maschinell auswerten lassen als HTML-Dokumente,

ist XHTML fur Ajax-Anwendungen die bessere Wahl [St07, S. 108ff]. Besondere Be-

deutung haben fur 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 ermoglicht in ein dynamisches Einfugen von neuen

Daten in bestehende Seiten. Diese dynamische Veranderung 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 und XSLT

XML

Die Extensible Markup Language (XML) ist eine Sprache, die zum plattformneu-

tralen 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. 264ff.]. Elemente wer-

den wie in HTML durch Tags beschrieben, welche ebenfalls in spitzen Klammern

eingeschlossen werden. Da die XML-Spezifikation im Gegensatz zu HTML keine

vorgeschriebenen Tag-Namen enthalt, konnen XML-Daten frei strukturiert werden

[NS06, S. 23]. Allerdings gelten strikte syntaktische Regeln fur den Aufbau einer

XML-Datei. Diese Regeln mussen eingehalten werden, damit ein XML-Dokument

10


als wohlgeformt gilt. In einem gultigen XML-Dokument muss zusatzlich auf eine

DTD (Document Type Definition) verwiesen werden, in der die Struktur des XML-

Dokumentes definiert wird [WWWC06]. Unter [NS06, Kap. 1] findet sich eine Be-

schreibung von DTD und weiteren XML-Aspekten.

Durch Nutzung eines XML-Parsers konnen Anwendungen maschniell Informa-

tionen aus XML-Dokumenten extrahieren. Ein XML-Dokument wird dazu vom

XML-Parser durchlaufen, eingelesen und auf Gultigkeit uberpruft. Auf ein Prin-

zip der Fehlertoleranz wird dabei verzichtet, um in Kombination mit den strikten

syntaktischen Vorgaben eine gute und einheitliche Maschinenlesbarkeit von XML-

Daten zu garantieren [St07, S. 264ff.].

In Quelltext 12 findet sich ein XML-Dokument, welches vom Server an den Brow-

ser der Kalenderapplikation versendet wird. In diesem Dokument werden alle beste-

henden Termine fur einen Tag ubertragen. Das <termine>-Element ist das Wurzelele-

ment dieser XML-Datei. Die einzelnen Termine finden sich innerhalb dieses Elements

und sind jeweils durch einen Kurztitel und eine Beschreibung definiert.

<?xml version = "1.0" encoding="ISO -8859 -1" ?><termine datum="08.01.2008">

<termin ><titel >Test8 </titel ><beschreibung >Testtermin fur den 8. Januar </beschreibung >

</termin ><termin >

<titel >Test8_2 </titel><beschreibung >Testtermin fur den 8. Januar (2)</beschreibung >

</termin ></termine >

Quelltext 3: Beispiel XML-Dokument

XSLT

XSLT ist eine Sprache, die definiert, 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 XSLT-

Prozessor (wird in jedem modernen Browser unterstutzt) mit einem XSL-Stylesheet

initialisiert, in dem die Regeln der Transformation definiert sind. Anschließend kann

der Prozessor nach den definierten Regeln XML-Dateien transformieren.

Eine XML-Datei kann mittels XLST auch in ein HTML-Format transformiert

werden. Dies ermoglicht die Erstellung von XSL-Templates, mit denen XML-Daten

direkt in eine Webseite eingefugt werden konnen.

11


Ajax-Relevanz

In Ajax-Anwendungen wird XML fur den Datenaustausch zwischen Server und Cli-

ent verwendet. Dabei werden die per Ajax nachgeladenen Daten auf dem Server

per XML formatiert und in der Ajax-Engine wieder dekodiert oder direkt im Brow-

ser angezeigt. Die Nutzung von XML fur den Datenaustausch bietet den Vorteil,

dass sie als plattformunabhangige Sprache von jedem Browser und jedem System

verstanden wird. In allen modernen Browsern sind bereits XML-Parser eingebaut

und konnen XML-Dokumente automatisch in DOM-Objekte (siehe Kap. 3.3) um-

wandeln [Re06, S. 229]. Auch XML-Elemente konnen mit CSS zu formatieren, was

Ajax-Anwendungen die Moglichkeit bietet, nachgeladene XML-Daten direkt pas-

send formatiert im Browser anzuzeigen, und somit den Datenaustausch vereinfacht.

Ein Nachteil von XML stellt der relativ große Overhead durch Tags, DTD und

XML-Definition dar.

Da in Ajax Anwendungen oft XML-Daten in ein HTML-Format konvertiert wer-

den mussen, 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

fur den Datenaustausch von Ajax-Anwendungen sinnvoll ist, so ist sie jedoch kei-

neswegs zwingend. Im Prinzip konnen Ajax-Anwendungen Daten in jeder beliebigen

durch Text reprasentierten 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) fur den Datenaustausch verwendet.

JSON bezeichnet eine Methode, JAVA-Script-Objekte in Text umzuwandeln (Se-

rialisierung), damit diese einfach versendet werden konnen [Re06, S. 232]. Die Text-

Reprasentation kann dann beim Empfanger wieder in ein Objekt zuruckverwandelt

werden (Deserialisierung). Mittlerweile ist JSON nicht mehr nur auf JavaScript be-

schrankt, sondern wird auch von anderen Sprachen und Plattformen unterstutzt

[We06, S. 63].

Der Vorteil der Nutzung von JSON besteht darin, dass JSON-Daten nicht manu-

ell durchlaufen werden mussen, wie es bei XML der Fall ist, um an einzelne Elemente

zu gelangen. Stattdessen kann direkt auf die Eigenschaften des zuruckgelieferten Ob-

jektes zugegriffen werden. Dies vereinfacht die Nutzung von JSON im Verleich zu

XML. Allerdings beinhaltet JSON ein gewisses Sicherheitsrisiko, da der per Text

ubertragene Code wahrend der Deserialisierung im Webbrowser ausgefuhrt wird

[We06, S. 68].

12


3.3 Document Object Model (DOM)

Das Document Object Model (DOM) ist ein Standard, der 1998 vom W3 Kon-

sortium beschlossen wurde [WWWC98]. Es beschreibt ein plattformunabhangiges

Programmier-Interface, mit dem baumartig aufgebaute Dokumente (z.B. HTML-

und XML-Dokumente) nicht nur als statischer Text, sondern als dynamische Struk-

tur reprasentiert werden. Mit Hilfe eines DOM-Parsers wird dazu aus einem Do-

kument ein Baum aufgebaut, der alle in diesem Dokument enthaltenen Elemente

mit ihren Eigenschaften enthalt. Uber das DOM-Interface kann dann auf einzel-

ne Elemente im Baum zugegriffen werden. Diese Elemente lassen sich nachtraglich

verandern oder loschen und es lassen sich neue Elemente in den Baum einfugen

[WWWC98]. So konstruiert ein Webbrowser beispielsweise beim Besuch einer We-

beite aus dem HTML-Code (Quelltext 16) einen Baum aus HTML-Elementen (Ab-

bildung 4), welcher sich nachtraglich durch den Einsatz von Javascript und DOM

verandern lasst [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 re-

prasentiert. Um auf ein Element der Seite zuzugreifen, kann ausgehend von diesem

Objekt uber die untergeordneten Elemente bis hin zum gewunschten Element durch

den DOM-Baum navigiert werden. Alle Elemente eines Typs (z.B. Bilder oder For-

mulare) sind zudem in Arrays organisiert, um das Auffinden dieser Elemente zu

vereinfachen. Der Zugriff auf das erste Bild in einer Webseite ist beispielsweise fol-

gendermaßen moglich:

document.images [0]

Neben der Navigation durch den DOM-Baum lassen sich auch Elemente nach Tags,

Namen oder ID auswahlen. Dazu stellt das DOM die Methoden getElementsByTagName(),

getElementsByName() und getElementByID bereit. Durch den Aufruf

13


Abbildung 4: DOM-Baum

document.getElementsByTagName("a")

lassen sich beispielsweise alle Hyperlinks einer Webseite auswahlen. Uber den Aufruf

document.getElementByID("Kalender")

lasst sich hingegen das Element mit der eindeutigen ID”Kalender“ auswahlen, sofern

dieses existiert.

Nach Auswahlen eines Objektes lassen sich dessen Eigenschaften andern (z.B.

der Inhalt uber innerHTML) oder Methoden auf dem Objekt ausfuhren. Zum Bei-

spiel ist es moglich, mit appendChild() neue Elemente an ein bestehendes Element

anzuhangen. Eine ausfuhrliche Liste der Eigenschaften und Methoden von DOM-

Knotenelementen findet sich unter [St07, S. 198ff.].

14


Ajax-Relevanz

Das DOM dient in Ajax-Anwendungen der dynamischen Manipulation von HTML-

und XML-Daten. Ajax-Anwendungen konnen durch das DOM auf einzelne Elemente

einer bereits bestehenden und im Webbrowser geladenen HTML-Seite zugreifen und

neue Elemente in diese Seite einfugen. Das DOM ermoglicht also erst den Einsatz

von DHTML und bildet somit die Basis der dynamischen Benutzeroberflache von

Ajax-Anwendungen.

Des weiteren wird das DOM in Ajax-Anwendungen dazu verwendet, einen ein-

fachen Zugriff auf nachgeladene Daten im XML-Format bereitzustellen, damit diese

Daten durchsucht werden konnen und einzelne Elemente bzw. Datensatze aus kom-

plexen XML-Daten extrahiert werden konnen.

3.4 JavaScript

JavaScript ist eine plattformunabhangige, objektorientierte Skriptsprache mit Java-

ahnlicher Syntax. Die Sprache wird vor allem clientseitig verwendet und ist in allen

modernen Browsern implementiert. JavaScript-Code wird uber 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 Moglichkeiten im Vegleich mit anderen

Skriptsprachen wie z.B. VB-Script. So ist es etwa mit JavaScript nicht moglich,

auf die Festplatte des Host-Rechners zuzugreifen oder Bibliotheken des Betriebssys-

tems aufzurufen. Unter Sicherheitsaspekten sind die eingeschrankten Moglichkeiten

jedoch ein großer Vorteil fur JavaScript [St07, S. 166]. Dennoch wird bei Verwendung

von JavaScript in Webseiten immer (potentiell schadlicher) Code direkt im Browser

ausgefuhrt, weshalb JavaScript von einigen sicherheitsbewussten Internetnutzern im

Browser deaktiviert wird.

Ajax-Relevanz

Da die Ajax-Engine in JavaScript implementiert wird und somit alle anderen Tech-

nologien durch JavaScript verbunden werden, ist dies die zentrale Technologie, um

Ajax-Anwendungen moglich zu machen, was auch an der Integration des Begriffs im

Acronym”Ajax“ erkennbar ist. JavaScript erlaubt zum Einen den Zugriff auf das

XMLHttpRequest Objekt (siehe Kapitel 3.5), um mit diesem asynchron Daten vom

Server nachzuladen. Zum Anderen kann durch JavaScript auf das DOM zugegriffen

und einzelne DOM-Elemente zur Laufzeit der Anwendung ermittelt und verandert

15


werden. Dies erlaubt die dynamische Veranderung 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

ermoglicht 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-Funktionalitat zur Verfugung und

ist das wichtigste Objekt fur AJAX Anwendungen [Ma06, Kap. 6.2]. Weiterhin un-

terstutzt 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 an-

hand eines Code-Auszugs aus der Beispielanwendung erklart werden (Quelltext 10):

1. Zunachst 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 fur die Eigenschaft onreadystatechange

registriert. Diese Funktion wird jedes Mal aufgerufen, wenn sich der Status

des XMLHttpRequest-Objektes andert. Das XMLHttpRequest Objekt kennt

5 Zustande:

Zustandscode Beschreibung

0 nicht initialisiert

1 Ladt gerade (Request wird an Server abgesetzt)

2 Fertig geladen (Request gesendet)

3 Wartet auf Ruckgabe (Antwort wird vom Server empfangen)

4 Vollstandig (Antwort vollstandig empfangen)

Tabelle 1: Zustandscodes XMLHttpRequest

Interessant ist dabei in der Regel lediglich der Zustand 4, welcher anzeigt,

dass das Ergebnis des HTTP-Requests vollstandig vorliegt. Der Status lasst

16


sich uber 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 angege-

ben, mit der der Request ubertragen 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 spezifiziert, 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 eingetroffen

ist.

4. Die Abfrage wird schließlich mit der Methode resObjekt.send() versendet.

In der Beispielanwendung wird die POST-Methode zum Versenden der Re-

quests benutzt, weshalb die Abfrageparameter an dieser Stelle ubergeben wer-

den. Das XMLHttpRequest-Objekt wartet nun auf die Antwort des Servers.

Wahrend der Wartephase konnen andere Java-Script-Funktionen ausgefuhrt

werden, was dem Benutzer eine ununterbrochene Interaktion mit der Anwen-

dung ermoglicht.

5. Wenn die Antwort des Servers vollstandig geladen wurde, wird die Callback-

Funktion mit readyState 4 aufgerufen. Die ubermittelten Daten konnen nun

durch die Eigenschaft resObjekt.responseText abgerufen werden. Sind die Da-

ten XML-formatiert, so werden diese automatisch geparst und stehen zusatzlich

durch die Eigenschaft resObjekt.responseXML als DOM-Objekt zur Verfugung,

was direkten Zugriff auf einzelne XML-Elemente moglich macht.

resObjekt = new XMLHttpRequest ();resObjekt.onreadystatechange = 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 uber das XMLHttpRequest-Objekt

ermoglicht. Ohne dieses Objekt wurde eine Ajax-Anwendung nicht funktionieren,

da keine Daten asynchron nachgeladen werden konnten und somit auch keine Ajax-

Funktionalitat gegeben ware.

18

Kapitel 4: Ajax in der kritischen Betrachtung

4 Ajax in der kritischen Betrachtung

Die Nutzung von Ajax-Anwendungen bietet viele Vorteile gegenuber 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. Fur einige dieser Nachteile bestehen jedoch bereits

Losungsansatze, 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. Wahrend Ajax die Benutzerfreundlichkeit, Inter-

aktivitat und Reaktionsfreudigkeit von Desktopanwendungen bietet, wird dies mit

der Plattformneutralitat und einfacher Anbindung an Datenbanken und Webservices

kombiniert, die sonst nur klassische Webanwendungen bieten. Auch wird fur Ajax-

Anwendungen keine Installation benotigt, da die Anwendungen einfach im Web-

browser laufen.

Plattformunabhangigkeit

Ajax-Anwendungen sind - zumindest bei korrekter Implementierung - unabhangig

vom eingesetzten Browser und Betriebssystem nutzbar. Eine mobile Nutzung von

Ajax-Anwendungen ist ebenfalls einfacher moglich als dies bei Desktopanwendungen

der Fall ist. Es sind keine zusatzlichen Plugins notig, um Ajax-Anwendungen aus-

zufuhren, da samtliche eingesetzten Technologien direkt vom Browser unterstutzt

werden.

Geringere Auslastung

Da bei Ajax-Anwendungen immer nur die jeweils benotigten Daten nachgeladen

werden, statt bei jeder Anfrage an den Server die ganze Seite neu zu ubertragen,

verringert sich die Auslastung der Kommunikationswege und des Servers. Analysen

zeigen, dass durch Einsatz von Ajax die ubertragene Datenmenge einer Webseite

um bis zu 60% reduziert werden kann [Me06].

19


Einfachere Wartbarkeit

Fur Ajax-Anwendungen ist keine lokale Installation auf dem Clientrechner erfor-

derlich, sondern es existiert nur eine Installation der Anwendung auf dem Server.

Dies ermoglicht ein einfacheres Einspielen von Updates und stellt sicher, dass alle

Benutzer der Anwendung immer auf dem gleichen, aktuellen Stand sind.

Hohere Reaktionsfreudigkeit

In Ajax-Anwendungen kann deutlich schneller auf Benutzeraktionen reagiert wer-

den als in klassischen Webanwendungen, da Benutzeraktionen teilweise vollstandig

in der Ajax-Engine behandelt werden und bei Bedarf nur die notigen Daten vom

Server nachgeladen werden. Auch ist es in Ajax-Anwendungen nicht notig, bei jeder

Benutzeraktion die komplette Webseite neu zu laden.

Hohere Interaktivitat

Nutzer von Ajax-Anwendungen konnen weiterarbeiten, wahrend Daten vom Server

nachgeladen werden. Dies ist benutzerfreundlicher als der Zyklus von Arbeits- und

Wartezeit bei klassischen Webanwendungen.

Universelle Anwendbarkeit

Ajax schreibt nur Technologien fur 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)

ubertragen werden, kann die serverseitige Programmiersprache einfach gewechselt

werden.

4.2 Nachteile

Fehlende Unterstutzung fur Zuruck-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 Zustande einer

Ajax-Anwendung sind also fur den Browser nicht transparent und werden nicht in

der Browser-History gespeichert. Dadurch wird auch die Funktionalitat des Zuruck-

Buttons im Browser ausgehebelt, der das vorherige Element aus der History aufruft.

Druckt der Benutzer wahrend der Nutzung einer Ajax-Anwendung den Zuruck-

Button, so wird in der Regel die vor Start der Ajax-Anwendung aktive Seite auf-

gerufen. Dies ist fur Internetnutzer, die an die Navigation mittels Zuruck-Button

20


und History gewohnt sind, sehr ungewohnt und erschwert die Nutzung von Ajax-

Anwendungen. Fur dieses Problem gibt es allerdings bereits Losungsansatze, unter

anderem bieten manche Frameworks eine Unterstutzung an (siehe Kapitel 5).

Fehlende Unterstutzung fur Deep-Links

Lesezeichen (Bookmarks) konnen in einer Ajax-Anwendung nicht verwendet wer-

den, um den Status der Anwendung zu speichern. Dies wird wie die fehlende Un-

terstutzung der History dadurch verursacht, dass die einzelnen Zustande einer Ajax-

Anwendung fur den Browser nicht transparent sind und nicht durch eindeutige URLs

identifizierbar sind (Deep Links). Daraus resultiert weiterhin, dass Suchmaschinen

nicht auf die Daten von Ajax-Anwendungen zugreifen konnen und sie daher nicht

korrekt indizieren konnen. Auch die Unterstutzung fur Deep Links lasst sich mit

einem gewissen Programmieraufwand oder durch den Einsatz mancher Frameworks

aktivieren.

Fehlende Unterstutzung fur Refresh-Button

Im Zusammenhang mit der Fehlenden Unterstutzung fur Deep-Links und die History

ergibt sich ein weiteres Problem bei der Nutzung von Ajax-Anwendungen. Da die

Zustande nicht durch eindeutige URLs gekennzeichnet sind, fuhrt ein Klick auf den

Refresh-Button des Browsers dazu, dass der die urspruungliche URL neu geladen

und somit der Ursprungszustand der Ajax-Anwendung wieder hergestellt wird. Dies

entspricht nicht der von Internetnutzern erwarteten Funktionalitat (eigentlich sollte

der aktuelle Zustand neu geladen werden) und ist somit fur Nutzer ungewohnt.

Dieses Problem lasst sich in Kombination mit den oben genannten Problemen durch

Programmieraufwand oder den Einsatz von Frameworks losen.

Erreichbarkeit

Um die korrekte Ausfuhrung von Ajax-Anwendungen zu garantieren, muss im Brow-

ser JavaScript aktiviert sein. Im Internet Explorer muss bis zur Version 7 zusatzlich

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-Abhangigkeit

Auch wenn Ajax-Anwendungen die Funktionalitat von Dekstop-Anwendungen bie-

ten konnen, so sind sie doch Webanwendungen. Fur die Ausfuhrung einer Ajax-

21


Anwendung ist es also zwingend notwendig, dass der Nutzer wahrend der gesamten

Zeit mit dem Internet verbunden ist. Dies stellt insbesondere bei der mobilen Nut-

zung von Ajax-Anwendungen ein Problem dar.

Browserunterschiede

Der Zugriff auf das XMLHttpRequest-Objekt sowie auf DOM unterscheidet sich

fur verschiedene Browser, da die Schnittstellen unterschiedlich implementiert sind.

Um maximale Kompatibilitat zu gewahrleisten, mussen Entwickler daher Code-

Verzweigungen fur 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 mussen auf Client- und Serverseite zwei

verschiedene Programmiersprachen verwendet werden. Wahrend im Client JavaS-

cript eingesetzt wird, kommt im Server PHP, Java o.a. zum Einsatz, mit evtl. sehr

unterschiedlicher Syntax. Dies stellt einen Mehraufwand fur den Entwickler dar.

Frameworks wie das Google Web Toolkit (Kapitel 5.3) bieten eine Losung fur dieses

Problem, indem sie den notigen JavaScript-Code automatisch erzeugen.

Performanceprobleme

Da eine Ajax-Anwendung unter Umstanden sehr viel haufiger mit dem Server kom-

muniziert als klassische Webanwendungen, kann sich die Serverlast im Vergleich

zu klassischen Anwendungen auch vergroßern, statt geringer zu werden. Gerade

weil HTTP ein zustandsloses Protokoll ist und es nicht moglich ist, eine dauerhaf-

te Verbindung zwischen Ajax-Engine und Server aufrechtzuerhalten und die Ajax-

Engine bei Anderungen auf dem Server per Event zu informieren, mussen Ajax-

Anwendungen evtl. den Server regelmaßig auf eine Anderung der Daten uberprufen.

Dies kann die Verbindung sowie den Server belasten.

22

Kapitel 5: Ajax-Frameworks

5 Ajax-Frameworks

Fur die Entwicklung von Ajax-Anwendungen werden viele Kenntnisse uber einge-

setzte Browservarianten und deren Eigenheiten vorausgesetzt. Auch bestehen Ajax-

Anwendungen aus vielen verschiedenen Komponenten (HTML und CSS, DOM,

JavaScript, serverseitige Programmiersprache wie PHP, Java etc.), was die Ent-

wicklung erschwert und eine Fehlersuche wahrend 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 Benutzeroberflache mittels DOM.

Ajax-Frameworks bieten hier Funktionsbibliotheken, die bereits getestete Funk-

tionen fur viele Einsatzmoglichkeiten zur Verfugung stellen und einem Entwick-

ler den Aufwand fur Entwicklung und Test dieser Funktionen sparen. Alle Frame-

works 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 Zugriff auf DOM, stellen visuelle Effekte und Komponenten zur Gestaltung

einer Benutzeroberflache bereit und bieten eine einfache Behandlung von Events.

Zur Zeit existieren mehr als 200 Ajax-Frameworks mit verschiedenen Ansatzen.

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 notige JavaScript Co-

de automatisch erstellt wird. In diesem Kapitel sollen exemplarisch drei Frameworks

vorgestellt werden, die unterschiedliche Ansatze verkorpern.

5.1 Sajax

Bei Sajax handelt es sich um ein serverseitiges Framework, das unter anderem fur die

Sprachen ASP, PHP, Perl und Ruby angeboten wird. Fur jede unterstutzte Sprache

gibt es eine eigene Bibliothek, welche serverseitig in den Quellcode eingebunden wird.

Serverseitig implementierte Funktionen konnen exportiert werden. Sajax generiert

automatisch den clientseitigen JavaScript-Code fur 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

Datenubertragung per XMLHttpRequest kummern. Daten lassen sich bei Sajax un-

23

Kapitel 5: Ajax-Frameworks

ter anderem als String oder Integer, aber auch als Array oder Objekt ubertragen.

Dabei ubernimmt Sajax die Serialisierung der Objekte im Server und die Deseria-

lisierung im Client. Komponenten fur die Benutzeroberflache, visuelle Effekte oder

ein vereinfachter Zugriff auf DOM werden von Sajax nicht unterstutzt.

Zur Veranschaulichung der Unterschiede zwischen manueller Implementierung

und Nutzung eines serverseitigen Frameworks wurde die Kalender-Anwendung unter

Verwendung von Sajax neu implementiert. Eine Beschreibung findet sich im Anhang

B.

5.2 Prototype

Eines der zur Zeit am haufigsten eingesetzten Ajax-Frameworks ist Prototype. Pro-

totype 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 XMLHttpRe-

quest sowie den Zugriff auf das DOM durch Bereitstellung von objektorienrierten

Schnittstellen. Die Entwicklung von Ajax-Anwendungen wird zudem durch die Un-

terstutzung von globalen und abfragespezifischen Eventhandlern unterstutzt. Au-

ßerdem erweitert Prototype viele JavaScript-Objekte um neue Funktionen, welche

die Arbeit mit diesen Objekten vereinfachen [Prot07]. Das zusatzlich installierbare

Framework script.aculo.us bietet eine Reihe vorgefertigter Effekte und Animationen

und die Moglichkeit zum einfachen Erstellen von eigenen Effekten, welche dann in

die Ajax-Anwendung eingebaut werden konnen.

5.3 Google Web Toolkit

Das Google Web Toolkit (GWT) reprasentiert einen anderen Ansatz. Mit dem GWT

kann die gesamte Ajax-Anwendung mit einer beliebigen Entwicklungsumgebung in

Java entwickelt und getestet werden. Anschließend wird diese Anwendung mit Hilfe

des GWT-Compilers automatisch in eine aus HTML, CSS und JavaScript bestehen-

de Ajax-Anwendung ubersetzt [GWT07]. Entwickler konnen also mit reinen Java-

Kenntnissen eine voll funktionsfahige Ajax-Anwendung erstellen und diese mit den

vollen Debugging-Funktionen ihrer Java-Entwicklungsumgebung testen. Zusatzlich

bietet das GWT einen Satz wiederverwendbarer Komponenten fur die Gestaltung

einer Benutzeroberflache an und unterstutzt auch die Browser-History sowie Book-

marks. Die erstellten Anwendungen sind mit allen großen Browsern (Internet Ex-

porer, Firefox, Mozilla etc.) kompatibel. Auch der Zugriff auf DOM ist mit Hilfe

generalisierter Klassen browserubergreifend realisiert [GWT07].

24

Kapitel 6: Die Zukunft von Ajax

6 Die Zukunft von Ajax

Ajax ermoglicht die Entwicklung von Webanwendungen der nachsten Generation

und wird damit das WWW revolutionieren. Ajax-Anwendungen ermoglichen Be-

nutzern eine interaktivere und naturlichere Arbeit, da ihnen Anwendungen geboten

werden, die die Vorteile von Desktopanwendungen und Webanwendungen kombinie-

ren und damit die Grenzen zwischen diesen Anwendungstypen verwischen.

Auch wenn Ajax nicht in allen Webapplikationen Verwendung finden wird und es

sicherlich Webanwendungen gibt, fur die sich Ajax nicht eignet, so eroffnen sich durch

Ajax Moglichkeiten fur neue Arten von Webanwendungen, wie z.B. web-basierte

Office-Suiten. Außerdem konnen viele bestehende Anwendungen aller Großen durch

Ajax um nutzliche Funktionen erweitert werden, wie Google Suggest zeigt. Un-

terstutzt von Ajax bietet sich also die Moglichkeit, viele Desktop-basierte Anwen-

dungen in Webanwendungen zu transformieren.

Die im Rahmen von Ajax eingesetzten Technologien sind bereits erprobt und

ausgereift, bieten jedoch Moglichkeiten zur Weiterentwicklung. So wurde das Po-

tential von JavaScript erst im Rahmen von Ajax wirklich klar und lasst auf eine

baldige Weiterentwicklung der Sprache schließen. Die Ansatze einiger Frameworks

zur Vereinfachung des DOM-Zugriffs zeigen, dass auch hier noch viel moglich ist.

2006 wurde die OpenAjax Alliance gegrundet, der viele große Firmen wie IBM,

Oracle und Google angehoren [OA07]. Ziel ist die Entwicklung eines OpenSource

Ajax-Frameworks, das als standardisiertes Werkzeug eingesetzt werden soll. Initia-

tiven wie diese zeigen, dass Ajax auch in Zukunft eine große Rolle spielen wird.

Der breite Einsatz eines standardisierten Frameworks wird dazu fuhren, dass Ajax-

Anwendungen fehlerfrei und mit geringerem Aufwand entwickelt werden konnen.

Auch bietet sich hier die Moglichkeit, dass die angesprochenen Nachteile von Ajax-

Anwendungen auf breiter Basis behoben werden und Ajax-Anwendungen benutzer-

freundlicher werden.

Weitere Standardisierungsinitiativen betreffen die Benutzeroberflache. Das World

Wide Web Consortiom (W3C) hat dafur den XForms-Standard entwickelt, wel-

cher ein Bestandteil von XHTML werden soll [WWWC07]. XForms entwickelt die

HTML-Formulare und Oberflachenkomponenten weiter und bietet unter anderem

Moglichkeiten zur clientseitigen Datenuberprufung, zur Reaktion von Komponenten

auf Anderungen anderer Komponenten. Des weiteren werden durch XForms neue Be-

nutzeroberflachenkomponenten (z.B. Kalenderfelder) definiert. Diese Moglichkeiten

und Komponenten werden bei Umsetzung des Standards von allen Browsern un-

terstutzt werden mussen.

25

Kapitel A: Quellcode der Beispielanwendung

A 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 Grundgerust der Kalenderanwendung.

1 <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01// EN" "http :// www.w3.org/TR/html4/strict.dtd">

2 <html>3 4 <link href="style.css" type="text/css" rel="stylesheet" />5 12 <body onload="getAlleTermine ();">13 14 <div id="kalender">15 16 <table id="kalendertab">17 <tr><th colspan="7">Januar 2008</th></tr>18 <tr><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th>

<th>Sa</th><th>So</th></tr>19 <tr>20 <td> </td>21 

22 <td class="cal" onclick="getTermineUebersicht (2008, 1, 1)">01<div id="1"></div></td>





26



28 </tr>29 <tr>30 <td class="cal" onclick="getTermineUebersicht

(2008 , 1, 7)">07<div id="7"></div></td>31 <td class="cal" onclick="getTermineUebersicht (2008, 1, 8)

">08<div id="8"></div></td>32 <td class="cal" onclick="getTermineUebersicht (2008, 1, 9)

">09<div id="9"></div></td>33 <td class="cal" onclick="getTermineUebersicht (2008, 1,

10)">10<div id="10"></div></td>34 <td class="cal" onclick="getTermineUebersicht (2008, 1,



13)">13<div id="13"></div></td>37 </tr>38 <tr>39 <td class="cal" onclick="getTermineUebersicht (2008, 1,
















29)">29<div id="29"></div></td>

27

59 <td class="cal" onclick="getTermineUebersicht (2008, 1,30)">30<div id="30"></div></td>

60 <td class="cal" onclick="getTermineUebersicht (2008, 1,31)">31<div id="31"></div></td>

61 <td> </td>62 <td> </td>63 <td> </td>64 </tr>65 </table >66 </div>67 68 <div class="termincontainer">69 

70 <table class="termintab">71 <tr><th colspan="2">Neuen Termin Anlegen </th></tr>72 <tr><td>Datum:</td><td><input name="datum" id="datum"

unselectable="true" disabled="true"><input type="hidden"id="tag" name="tag"></td></tr>

73 <tr><td>Titel:</td><td><input name="titel" id="titel" value=""></td></tr>

74 <tr><td>Beschreibung:</td><td><input name="beschreibung" id="beschreibung" value=""></td></tr>

75 <tr><td colspan="2"><input type="button" value="speichern"onclick="neuerTermin ()"></td></tr>

76 </table >77 78 <table class="termintab">79 <tr><th>Termine an diesem Tag</th></tr>80 81 <tr><td><div id="termindetails"></div></td></tr>82 </table >83 </div>84 </body>85 </html>

A.2 style.css

Diese Datei enthalt die CSS-Formatierungen fur die o.a. HTML-Seite.

1 /* Formatierung fur Element mit ID "Kalender" (Kalendercontainer)*/

2 #kalender {3 border-style: solid;4 border-width: medium;5 width: 700px;6 height: 700px;7 float: right;8 }9 /* Formatierung fur Element mit ID "Kalendertab" (Kalendertabelle)

*/10 #kalendertab {

28


11 width: 100%;12 height: 100%;13 text-align: center;14 border-collapse: collapse;15 }16 /* Formatierung fur Zellenelement innerhalb des Elementes mit ID "

Kalender" (Kalenderzellen) */17 #kalendertab td {18 border-color: black;19 border-width: thin;20 border-style: solid;21 vertical-align: top;22 width: 14%;23 height: 14%;24 }25 /*26 * Formatierung fur Kalenderzellen der Klasse "cal".27 * Hier wird ein Pointer-Cursor gesetzt , damit erkennbar ist , dass

in die Zellen geklickt werden kann.28 */29 #kalendertab td.cal {30 cursor: pointer;31 }32 /* Formatierung fur Uberschriftenzeilen der Kalendertabelle */33 #kalendertab th {34 background-color: blue;35 color: white;36 font-weight: bold;37 }38 /*39 * Formatierung fur Elemente mit Klasse "termin ".40 * wird fur die Termineintrage im Kalender und in der Ubersicht

verwendet41 */42 .termin {43 font-size: 7pt;44 font-family: Tahoma;45 background-color: blue;46 color: white;47 font-weight: bold;48 margin-bottom: 1px;49 margin-top: 1px;50 }51 /* Formatierung fur Element mit Klasse "termincontainer" (

Benutzeroberflache und Terminubersicht) */52 .termincontainer {53 border-style: solid;54 border-width: medium;55 border-color: black;56 width: 350px;57 }58 /* Formatierung fur Elemente mit Klasse "termintab" (Tabellen fur

benutzeroberflache und Terminubersicht) */59 .termintab {60 width: 100%;61 border-collapse: collapse;62 text-align: left;

29


63 }64 /* Formatierung fur Uberschriftenzeile der o.a. Tabellen */65 .termintab th {66 background-color: blue;67 color: white;68 font-weight: bold;69 }70 /* Formatierung fur die Zellen der o.a. Tabellen */71 .termintab td {72 border-style: none;73 }74 /* Formatierung fur Element mit ID "termindetails" (Terminubersicht

) */75 #termindetails {76 height: 100px;77 font-family: Tahoma;78 font-size: 10pt;79 }

A.3 ajax.js

Diese Datei enthalt die Ajax-Engine.

1 aktuelleZelle = "";2

3 /* Funktion fur die Erstellung eines XMLHttpRequest -Objekts */4 function getXMLHttpObject () {5 // Test , ob XMLHttpRequestObjekt nativ oder per ActiveX

unterstutzt wird6 if (window.XMLHttpRequest) {7 // Browser unterstutzt das XMLHttpRequest -Objekt (alle außer

Interner Explorer < 7)8 return new XMLHttpRequest ();9 } else if (window.ActiveXObject) {

10 // Browser unterstutzt ActiveX (Internet Explorer < 7)11 // Versuch , zunachst aktuellstes ActiveX -Objekt zu erstellen12 try {13 return new ActiveXObject("Msxml2.XMLHTTP");14 } catch(ex) {15 // Fehlgeschlagen , altere Version erstellen16 try {17 return new ActiveXObject("Microsoft.XMLHTTP");18 } catch(ex) {19 }20 }21

22 }23 }24

25 /* Legt einen neuen Termin an */26 function neuerTermin () {27 // neues XMLHttpRequest -Objekt erstellen28 var resObjekt = new XMLHttpRequest ();29 // Callback -Funktion definieren30 resObjekt.onreadystatechange = function () {31 // Ist Request fertig geladen?

30


32 if (resObjekt.readyState == 4) {33 // Termin -Elemente aus Response -XML -Dokument auslesen34 liste = resObjekt.responseXML.getElementsByTagName("termin");35 // Tag der zuruckgelieferten Elemente auslesen36 // (damit klar ist , welche Kalenderzelle aktualisiert werden

soll)37 tagElem = resObjekt.responseXML.getElementsByTagName("day")

[0];38 tag = datumElem.firstchild.data;39 anzahl = liste.length;40 // Wurden Termine zuruckgegeben?41 if (anzahl > 0) {42 termineShort = "";43 termineLong = "";44 // Fur alle zuruckgegebenen Termine ...45 for (i = 0; i < anzahl; i++) {46 // Neues Div -Element der Klasse "Termin" erstellen ,47 // einmal ohne Beschreibung (fur Kalender) und einmal mit

(fur Detailubersicht).48 termineShort = termineShort + "<div class =\" termin\"> " +

liste[i]. getElementsByTagName("titel")[0]. firstChild.data + "</div >";

49 termineLong = termineLong + "<div class =\" termin\">" +liste[i]. getElementsByTagName("titel")[0]. firstChild.data +

50 " (" +51 liste[i]. getElementsByTagName("beschreibung")[0].

firstChild.data +52 ") </div >";53 }54 // Terminelemente in Kalender eintragen55 // (Zelle mit der ID des zuruckgelieferten Tages wird

aktualisiert)56 document.getElementById(tag).innerHTML = termineShort;57 // Terminelemente in Detailubersicht eintragen58 document.getElementById("termindetails").innerHTML =

termineLong;59 }60 else {61 }62 }63 }64

65 // Datum aus Textfeld auslesen66 datum = document.getElementById("datum").value;67 // Titel des neuen Termins aus Textfeld auslesen68 titel = document.getElementById("titel").value;69 // Beschreibung des neuen Termins aus Textfeld auslesen70 beschreibung = document.getElementById("beschreibung").value;71 // Animation in aktueller Zelle und Detailubersicht erzeugen72 document.getElementById(aktuelleZelle).innerHTML = document.

getElementById(aktuelleZelle).innerHTML + ’<center ><img src="wait.gif" /></center >’;

73 document.getElementById("termindetails").innerHTML = document.getElementById("termindetails").innerHTML + ’<center ><img src="wait.gif" /></center >’;

31


74 // Request vorbereiten (Zugriff auf neuerTermin.php mit MethodePOST)

75 resObjekt.open(’post’, ’neuerTermin.php’, true);76 // Request -Header fur Senden von POST -Daten setzen77 resObjekt.setRequestHeader("Content -Type", "application/x-www -

form -urlencoded");78 // Request abschicken (inkl. POST -Daten)79 resObjekt.send(’datum=’ + datum + ’&titel=’ + titel + ’&

beschreibung=’ + beschreibung);80 }81

82 /*83 * Liest die Termine aller Kalendertage aus ,84 * wird beim ersten Laden der Anwendung ausgefuhrt.85 */86 function getAlleTermine () {87 for (i = 1; i <= 31; i++) {88 getTermine (2008 , 1, i)89 }90 }91

92 /* Liest die Termine eines Tages aus und aktualisiert diese imKalender */

93 function getTermine(year , month , day) {94 // neues XMLHttpRequest -Objekt erstellen95 var resObjekt = getXMLHttpObject ();96 // Callback -Funktion definieren97 resObjekt.onreadystatechange = function () {98 // Ist Request fertig geladen?99 if (resObjekt.readyState == 4) {

100 // Termin -Elemente aus Response -XML -Dokument auslesen101 liste = resObjekt.responseXML.getElementsByTagName("termin");102 anzahl = liste.length;103 s = "";104 // Wurden Termine zuruckgegeben?105 if (anzahl > 0) {106 // Fur alle Termine ...107 for (i = 0; i<anzahl; i++) {108 // Neues Div -Element der Klasse "Termin" erstellen109 s = s + "<div class =\" termin\">" + liste[i].

getElementsByTagName("titel")[0]. firstChild.data + "</div >";

110 }111 }112 // Terminelemente in Kalender eintragen113 // (Zelle mit der ID des zuruckgelieferten Tages wird

aktualisiert)114 document.getElementById(day).innerHTML = s;115 }116 }117 // Animation in zugehoriger Zelle erzeugen118 document.getElementById(day).innerHTML = ’<center ><img src="wait.

gif" /></center >’;119 // Request vorbereiten (Zugriff auf termine.php mit Methode POST)120 resObjekt.open(’post’, ’termine.php’, true);121 // Request -Header fur Senden von POST -Daten setzen

32


122 resObjekt.setRequestHeader("Content -Type", "application/x-www -form -urlencoded");

123 // Request abschicken (inkl. POST -Daten)124 resObjekt.send(’datum=’ + day + ’.’ + month + ’.’ + year);125 }126

127 /*128 * Liest die Termine eines Tages aus und schreibt diese in die

Detailubersicht.129 * Diese Funktion wird beim Klick auf eine Zelle aufgerufen.130 */131 function getTermineUebersicht(year , month , day) {132 // neues XMLHttpRequest -Objekt erstellen133 var resObjekt = getXMLHttpObject ();134 // Callback -Funktion definieren135 resObjekt.onreadystatechange = function () {136 // Ist Request fertig geladen?137 if (resObjekt.readyState == 4) {138 // Termin -Elemente aus Response -XML -Dokument auslesen139 liste = resObjekt.responseXML.getElementsByTagName("termin");140 anzahl = liste.length;141 // Wurden Termine zuruckgegeben?142 if (anzahl > 0) {143 s = "";144 // Fur alle Termine ...145 for (i = 0; i<anzahl; i++) {146 // Neues Div -Element der Klasse "Termin" erstellen147 s = s + "<div class =\" termin\">" + liste[i].

getElementsByTagName("titel")[0]. firstChild.data;148 s = s + " (" + liste[i]. getElementsByTagName("

beschreibung")[0]. firstChild.data;149 s = s + ") </div >";150 }151 } else {152 s = "Keine Termine an diesem Tag";153 }154 // Terminelemente in Detailubersicht eintragen155 document.getElementById("termindetails").innerHTML = s;156 }157 }158 // Datum im Textfeld aktualisieren (da auf die entsprechende

Zelle geklickt wurde159 document.getElementById("datum").value = day + ’.’ + month + ’.’

+ year;160 // aktuelle Zelle setzen161 aktuelleZelle = day;162 // Animation in Detailubersicht Zelle erzeugen163 document.getElementById("termindetails").innerHTML = ’<center ><

img src="wait.gif" /></center >’;164 // Request vorbereiten (Zugriff auf termine.php mit Methode POST)165 resObjekt.open(’post’, ’termine.php’, true);166 // Request -Header fur Senden von POST -Daten setzen167 resObjekt.setRequestHeader("Content -Type", "application/x-www -

form -urlencoded");168 // Request abschicken (inkl. POST -Daten)169 resObjekt.send(’datum=’ + day + ’.’ + month + ’.’ + year);170 }

33


A.4 neuerTermin.php

Diese Datei enthalt die serverseitige Applikationslogik zum Anlegen eines neuen Ter-

mins. Dazu werden dem PHP-Skript per POST-Methode die Parameter fur Datum,

Titel und Beschreibung des neuen Termins in den Variablen datum, titel, und

beschreibung ubergeben (Zeilen 10-12). Das Skript gibt dem Client alle Termi-

ne des gewahlten Datums als XML zuruck, inklusive des neu angelegten Termines,

damit der Client diese Termine aktualisieren kann.

1 <?php2 // Response -Header auf XML setzen , damit der Client die

zuruckgelieferten Daten als XML interpretiert3 @header("Content -type: text/xml");4 // Browser -seitiges zwischenspeichern (caching) von ubermittelten

Daten deaktivieren , damit nicht alte Daten aus dem Cacheverwendet werden

5 @header("Cache -Control: no -cache , must -revalidate , max -age=0");6 @header("Pragma: no -cache");7 // 1 Sekunde Verzogerung , um Ajax -Funktionalitat zu demonstrieren8 sleep (1);9 // Ubergebene Parameter (Datum , Titel , Beschreibung) aus POST -

Variablen auslesen10 $datum_str = $HTTP_POST_VARS["datum"];11 $titel = $HTTP_POST_VARS["titel"];12 $beschreibung = $HTTP_POST_VARS["beschreibung"];13 // Uberprufung , ob alle Parameter ubergeben wurden14 if (isset($datum_str) && isset($titel) && isset($beschreibung)) {15 // Typkonvertierung des Datums von String nach Date16 $datum = date_create($datum_str);17 // Verbindung zum MySQL -Server und zur Datenbank aufbauen18 $mysql_conn = mysql_connect("localhost", "root", "", false);19 mysql_select_db("AjaxBeispiel");20

21 // Neuen Termin per SQL in die Datenbank einfugen22 $query = "INSERT INTO termine (datum , titel , beschreibung)

VALUES (\"" . date_format($datum , "Y-m-d") . "\",\" $titel\",\" $beschreibung \")";

23 $result = mysql_query($query , $mysql_conn) or die("ERROR: " .mysql_error ());

24

25 // Alle Termine des ubergebenen Tages auswahlen26 $query = "SELECT titel , beschreibung FROM termine WHERE datum =

\"" . date_format($datum , "Y-m-d") . "\"";27 $result = mysql_query($query , $mysql_conn) or die("ERROR: " .

mysql_error ());28 // Ergebnis als XML -Formatierte Daten ausgeben29 echo "<?xml version = \"1.0\" ?>";30 echo "<termine ><tag >" . date_format($datum , "j") . "</tag >";31 // Alle Termine in XML -String einfugen32 while ($row = mysql_fetch_array($result , MYSQL_BOTH)) {33 echo "<termin ><titel >" . $row [0] . "</titel ><beschreibung >" .

$row [1] . " </beschreibung ></termin >";34 }35 echo "</termine >";36 } else {

34


37 //Falls nicht alle Parameter ubergeben wurden , leeres XMLzuruckgeben

38 echo "<?xml version = \"1.0\" ?><termine ></termine >";39 }40 ?>

A.5 termine.php

Diese Datei enthalt die serverseitige Applikationslogik zum Abfragen aller Termine

eines Datums. Dazu wird dem PHP-Skript per POST-Methode das Datum in der

Variablen datum ubergeben (Zeile 10). Das Skript gibt dem Client alle Termine des

gewahlten Datums als XML zuruck.

1 <?php2 // Response -Header auf XML setzen , damit der Client die

zuruckgelieferten Daten als XML interpretiert3 @header("Content -type: text/xml");4 // Browser -seitiges Caching deaktivieren5 @header("Cache -Control: no -cache , must -revalidate , max -age=0");6 @header("Pragma: no -cache");7 // 1 Sekunde Verzogerung , um Ajax -Funktionalitat zu

demonstrieren8 sleep (1);9 // Ubergebenen Parameter (Datum) aus POST -Variablen auslesen

10 $datumstr = $HTTP_POST_VARS["datum"];11 // Uberprufung , ob Parameter ubergeben wurde12 if (isset($datumstr)) {13 // Typkonvertierung des Datums von String nach Date14 $datum = date_create($datumstr);15 // Verbindung zum MySQL -Server und zur Datenbank aufbauen16 $mysql_conn = mysql_connect("localhost", "root", "", false);17 mysql_select_db("AjaxBeispiel");18

19 // Alle Termine des aktuellen Tages auswahlen20 $query = "SELECT titel , beschreibung FROM termine WHERE datum =

\"" . date_format($datum , "Y-m-d") . "\"";21 $result = mysql_query($query , $mysql_conn) or die("ERROR: " .

mysql_error ());22 // Ergebnis als XML -Formatierte Daten ausgeben23 echo "<?xml version = \"1.0\" ?>";24 echo "<termine ><tag >" . date_format($datum , "j") . "</tag >";25 // Alle Termine in XML -String einfugen26 while ($row = mysql_fetch_array($result , MYSQL_BOTH)) {27 echo "<termin ><titel >" . $row [0] . "</titel ><beschreibung >" .

$row [1] . " </beschreibung ></termin >";28 }29 echo "</termine >";30 } else {31 //Falls nicht alle Parameter ubergeben wurden , leeres XML

zuruckgeben32 echo "<?xml version = \"1.0\" ?><termine ></termine >";33 }34 ?>

35

Kapitel B: Beispielanwendung mit Sajax

B Beispielanwendung mit Sajax

Als Beispiel soll hier die Kalenderanwendung mittels Sajax und PHP implementiert

und Unterschiede zur normalen Implementierung (siehe Anhang A) erklart werden.

Zuvor wurden in der Kalenderanwendung fur die einzelnen Funktionen verschie-

dene PHP-Dateien per XMLHttpRequest aufgerufen. Diese Dateien werden nun als

einzelne PHP-Funktionen definiert, damit diese spater per Sajax aufgerufen werden

konnen. Quelltext 22 enthalt die Funktion neuerTermin, durch die ein neuer Termin

an einem per Funktionsparameter ubergebenen Datum erstellt wird. Die Parameter

werden der Funktion dabei durch Sajax ubergeben und mussen nicht mehr explizit

via POST Abgefragt werden. Wahrend der Ruckgabewert zuvor manuell als XML-

Datei formatiert wurde, wird bei Nutzung von Sajax einfach ein Objekt vom Typ

”Termine“ erstellt und zuruckgegeben (Zeilen 11 bis 21). Dazu werden die Termine

des angegebenen Datums in ein Array gespeichert (Zeile 8) und anschließend dem

Objekt zugewiesen (Zeile 19).

1 function neuerTermin($datumstr , $titel , $beschreibung) {2 sleep (1);3 $tag = "";4 $termine = array ();5 if (isset($datumstr) && isset($titel) && isset($beschreibung)

) {6 // (...) MySQL -Anfrage7 while ($row = mysql_fetch_array($result , MYSQLI_BOTH)) {8 array_push($termine , array($row[0], $row [1]));9 }

10 }11 class Termine {12 var $tag , $termine;13

14 function Termine($tag , $termine) {15 $this ->tag = $tag;16 $this ->termine = $termine;17 }18 }19 $o = new Termine($tag , $termine);20 return $o;21 }

Quelltext 6: Sajax: Definition der PHP-Funktion”neuerTermin“

Quelltext 22 zeigt vereinfacht den neuen Aufbau der Hauptseite. Die oben defi-

nierte 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 notige Javascript-Code generiert, um diese Funktion client-

seitig 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 ubermitteln und diese Funktion dort aufzu-

36


rufen.

1 <?php2 require("sajax.php");3 require("termine.php");4 require("neuerTermin.php");5 sajax_init ();6 sajax_export("getTermine");7 sajax_export("neuerTermin");8 sajax_handle_client_request ();9 ?>

10 <html >11 <link href="style.css" type="text/css" rel="stylesheet" />12 <head >13 <script language="JavaScript">14 <?php sajax_show_javascript () ?>15 </script >16 <script language="JavaScript" src="ajax.js"></script >17 </head >18 <body onload="getAlleTermine ()">19 (...)20 </body >21 </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 ubergebenden Para-

meter, wahrend der vierte Parameter eine Referenz auf die Callback-Funktion ist.

Das von der PHP-Funktion zuruckgelieferte Termine-Objekt steht im Client

in der Callback-Funktion als Parameter”val“ zur Verfugung. Quelltext 19 zeigt

die Callback-Funktion. Hier vereinfacht sich der notige Code im Vergleich zur ur-

sprunglichen Kalenderanwendung deutlich, da es nun nicht mehr notig ist, die XML-

Ruckgabe zu parsen. Stattdessen kann auf die Eigenschaften des ubergebenen Ob-

jektes (also tag und termine) mit den gleichen Bezeichnungen wie im serverseitigen

Skript zugegriffen werden. Auch ist die manuelle Uberprufung von Status des XML-

HttpRequest Objektes nicht mehr notig, da die Callback-Funktion von Sajax nur

aufgerufen wird, wenn die angeforderten Daten komplett empfangen wurden.

1 // Callback Funktion fur die Erstellung eines neuen Termins ,liefert alle Termine des gewahlten Tages zuruck

2 function do_neuerTermin_cb(val) {3 // Gewahlten Tag speichern4 day = val.tag;5 termineShort = "";6 termineLong = "";7 // Termine der zuruckgegebenen Objektes durchlaufen8 for (var i in val.termine) {9 // Terminbeschreibungen ausgeben

10 termineShort = termineShort + "<div class =\" termin\">" + val.termine[i][0] + "</div >";

37


11 termineLong = termineLong + "<div class =\" termin\">" + val.termine[i][0];

12 termineLong = termineLong + " (" + val.termine[i][1];13 termineLong = termineLong + ") </div >";14 }15 // Terminbeschreibungen in die benutzeroberflache einfugen16 document.getElementById(day).innerHTML = termineShort;17 document.getElementById("altetermine").innerHTML = termineLong;18 }

Quelltext 8: Sajax: Callback-Funktion fur”neuerTermin“

Durch die Verwendung von Sajax in der Beispielanwendung vereinfacht sich die

Entwicklung. Die gewunschten Funktionen werden nur in PHP definiert und ste-

hen in JavaScript automatisch zur Verfugung. Fur den Datenaustausch zwischen

Client und Server konnen dabei statt XML-formatierten Daten Objekte verwendet

werden, was den Zugriff auf diese Daten und somit auch die Programmlogik verein-

facht. Schließlich muss das XMLHttpRequest-Objekt inklusive aller browserspezi-

fischen Unterschiede nicht manuell erstellt und abgefragt werden. Die Entwicklung

auch kleiner Ajax-Anwendungen mit Unterstutzung 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 Prag-

matic 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,


[IB07] IT-Business: Gartner sagt zweistelliges Wachstum fur SAAS voraus, IT-

Business Webseite, 2007.

URL: http://www.it-business.de/themenkanaele/marktforschung/trends/

allgemein/articles/90003/,


[Ma06] Michael Mahemoff: Ajax Design Patterns, O’Reilly, 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,


[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,


[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 Mar-

kup Language (Second Edition), W3C Webseite, 2002.

URL: http://www.w3.org/TR/xhtml1/,


[WWWC06] W3C Recommendation: Extensible Markup Language (XML) 1.0

(Fourth Edition), W3C Webseite, 2006.

URL: http://www.w3.org/TR/2006/REC-xml-20060816/,


[WWWC98] W3C Working Draft: Level 1 Document Object Model Specification,

W3C Webseite, 1998.

URL: http://www.w3.org/TR/WD-DOM/,


[WWWC99] W3C Recommendation: Cascading Style Sheets, Level 1, W3C Web-

seite, 1999.

URL: http://www.w3.org/TR/CSS1,


[WWWC07] W3C Candidate Recommendation: XForms 1.1, W3c Webseite, 2007.

URL: http://www.w3.org/TR/xforms11/,


[OA07] Open Ajax Alliance, Open Ajax Alliance Webseite, 2007.

URL: http://www.openajax.org/,


40

Ajax

Documents

Transcript of Ajax