André Langer
Evaluierung von AJAX-basierten Frameworks für das Web 2.0
ISBN: 978-3-8366-0332-4
Druck Diplomica® Verlag GmbH, Hamburg, 2007
Zugl. Technische Universität Chemnitz, Chemnitz, Deutschland, Studienarbeit, 2007
Dieses Werk ist urheberrechtlich geschützt. Die dadurch begründeten Rechte,
insbesondere die der Übersetzung, des Nachdrucks, des Vortrags, der Entnahme von
Abbildungen und Tabellen, der Funksendung, der Mikroverfilmung oder der
Vervielfältigung auf anderen Wegen und der Speicherung in Datenverarbeitungsanlagen,
bleiben, auch bei nur auszugsweiser Verwertung, vorbehalten. Eine Vervielfältigung
dieses Werkes oder von Teilen dieses Werkes ist auch im Einzelfall nur in den Grenzen
der gesetzlichen Bestimmungen des Urheberrechtsgesetzes der Bundesrepublik
Deutschland in der jeweils geltenden Fassung zulässig. Sie ist grundsätzlich
vergütungspflichtig. Zuwiderhandlungen unterliegen den Strafbestimmungen des
Urheberrechtes.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in
diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme,
dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei
zu betrachten wären und daher von jedermann benutzt werden dürften.
Die Informationen in diesem Werk wurden mit Sorgfalt erarbeitet. Dennoch können
Fehler nicht vollständig ausgeschlossen werden, und die Diplomarbeiten Agentur, die
Autoren oder Übersetzer übernehmen keine juristische Verantwortung oder irgendeine
Haftung für evtl. verbliebene fehlerhafte Angaben und deren Folgen.
© Diplomica Verlag GmbH
http://www.diplom.de, Hamburg 2007
Printed in Germany
André Langer
Wartburgstraße 22
09126 Chemnitz
Email: andre.langer@informatik.tu-chemnitz.de
Lebenslauf
Persönliche Daten:
Geburtstag:
01. November 1983
Geburtsort:
Karl-Marx-Stadt
Familienstand:
ledig, keine Kinder
Staatsangehörigkeit: deutsch
Ausbildungsdaten:
1990-1994
Grundschule Heinrich-Heine in Chemnitz
1995-2002 Johann-Wolfgang-von-Goethe-Gymnasium Chemnitz
Mathematisch-naturwissenschaftliches Profil
Leistungskurse: Mathematik, Physik
Abschluss mit Abitur, Durchschnittsnote 1.2 (,sehr gut')
Seit 2002
Student an der Technischen Universität Chemnitz
Diplomstudiengang
Angewandte
Informatik
mit
Vertiefungsrichtung
Medieninformatik
2004
Vor-Diplom mit Gesamtprädikat ,gut'
Vorauss. Abschluss:
Oktober 2007 Diplom-Informatiker (VR Medieninformatik)
Tätigkeiten und Erfolge:
1995-1997
- Chefredakteur Schülerzeitung
1997-1999
- Schülerfirma ,,Web-Design-Studium", Leitung Kundenservice/-betreuung
1997-2002
- Systemadministrator Schulcomputernetzwerk
1998
- Preisträger Sächsischer Informatikwettbewerb 3.Platz
1998
- Auszeichnung beim Zeitbild-Wettbewerb ,,Hallo Deutschland"
1999
- Schulpraktikum im Solaris Förderzentrum für Jugend und Umwelt
1999
- Preisträger beim ,,Join Multimedia Wettbewerb" der Firma Siemens
2000
- 3. Preis beim Schülerwettbewerb für polit. Bildung des Sächsischen Landtags
2001
- Kursleiter der Sächsischen Initiative ,,Senioren @ns Netz"
2002
- Teilnehmer ,,Jugend forscht" Gruppensieger auf Regional- und Landesebene
2002
- Mitglied der Dt. Physikalischen Gesellschaft
- Buchpreis des Forschungszentrums Rossendorf (Dresden)
2003
- Gebrauchsmuster beim Dt. Patent- und Markenamt in München
2004
- Praktikum bei Sachsen Fernsehen, Drehscheibe Chemnitz
- Übernahme in Angestelltenverhältnis, Aufbau einer neuen Online-Redaktion
- Stipendiat der SDW (Stiftung der Deutschen Wirtschaft)
-
Hiwi-Stelle
Übungsleitung
Digitaltechnik
TU
Chemnitz
2005
- Mitglied im neu gegründeten Arbeitskreis der Medienschaffenden / AK Journalismus
- Ausbau der Sachsen Fernsehen Online-Redaktion auf ein Regionalportal für
bundesweit 20 lokale Fernseh- und Rundfunkstationen
2006
- Semesterstipendium des Deutschen Akademischen Austauschdienstes (DAAD)
- Auslandssemester an der University of California, Santa Barbara / USA
- Paper, André Langer, Tom Kühnert: "Security issues in Address Autoconfiguration
Protocols An improved version of the Optimized Dynamic Address Configuration
Protocol (ODACP)"
- Mitglied in der Jugendpresse Sachsen
- Verantwortlicher für Presse- und Öffentlichkeitsarbeit im Projekt "Unternehmer im
Wandel" im Rahmen der Initiative "Herausforderung Unternehmertum" der Stiftung
der Deutschen Wirtschaft und der Heinz-Nixdorf-Stiftung
2007
- Studienarbeit ,,Evaluierung von AJAX-basierten frameworks für das Web 2.0"
-
Diplomarbeit
(lfd.)
Chemnitz, 02. Mai 2007
III
Zusammenfassung
,,Remote Scripting"-Anwendungen erleben seit einigen Jahren einen regelrechten Anfrageboom.
Während aus usability-Sicht bisher eine strikte Unterscheidung zwischen Desktop-Anwendungen
und Webapplikationen herrschte, finden sich seit einiger Zeit zunehmend Angebote im World Wide
Web, die diese strikte Trennung verwischen lassen. Interaktive Nutzerdialoge, nebenläufige Pro-
zessabarbeitung und visuelle Unterstützungsmittel wie Drag & Drop- Effekte halten auf Webseiten
Einzug, die dem Nutzer bisher nur aus eigenständigen Softwareprodukten in einer spezifischen
Betriebssystemumgebung bekannt waren. Viele dieser neuen Anwendungs- und Interaktionsmög-
lichkeiten im weltweiten Datennetz werden inzwischen unter dem Oberbegriff Web 2.0
zusammengefasst. Für den Nutzer bringt dieser neue Entwicklungstrend viele Vorteile: Anspre-
chende, intuitive Nutzerführungen ohne die Notwendigkeit, eine ganze Internetseite bei jedem
Interaktionsschritt neu zu laden und ohne bemerkbaren zeitlichen Overhead.
Was für den Nutzer Erleichterung bringen soll, bedeutet häufig für einen Programmierer zunächst
Mehraufwand. Eine Technik zur Realisierung solcher so genannten Rich Internet Applications, die
sich in den letzten beiden Jahren immer mehr in den Vordergrund gedrängt hat, wird unter der
Bezeichnung AJAX zusammengefasst. Einen einheitlichen Standard gibt es dabei nicht, sodass
fast täglich neue AJAX-basierte frameworks veröffentlicht werden, die dem Programmierer (we-
nigstens einen Teil der) Komplexität der Programmflusssteuerung abnehmen sollen. Aufgabe der
Studienarbeit soll es daher sein, das inzwischen unüberschaubar gewordene Angebot an AJAX
frameworks zu systematisieren und einen Überblick über Vor- und Nachteile ausgewählter Pro-
grammbibliotheken zu geben. Dafür ist ein Kriterienkatalog zu erarbeiten, der eine Bewertung der
verschiedenen frameworks nach unterschiedlichen Gesichtspunkten ermöglicht. Besonderer
Schwerpunkt ist dabei auf Kriterien aus Programmierersicht (Sprachunabhängigkeit, Overhead,
Implementierungsmöglichkeiten,...) und Anwendersicht (Plattformanforderungen, Einarbeitungszeit,
Ergebnisqualität, ...) zu legen. Auf den Kriterienkatalog ist anschließend eine Auswahl an bereits
existierenden, frei verfügbaren AJAX frameworks anzuwenden, die als zukünftig relevant einge-
schätzt werden. Die Ergebnisse sind abschließend in einer Gesamtübersicht zu präsentieren, die
eine objektive Empfehlung für Nutzer darstellen soll, die vor der Wahl stehen, welche AJAX Pro-
grammbibliothek sie zukünftig einsetzen sollten.
IV
Inhaltsverzeichnis
ZUSAMMENFASSUNG ... III
INHALTSVERZEICHNIS... IV
ABBILDUNGSVERZEICHNIS ... VII
TABELLENVERZEICHNIS ... VIII
LISTINGS... IX
ABKÜRZUNGSVERZEICHNIS... X
1.
EINLEITUNG... 1
1.1.
AJAX eine kurze Einführung... 1
1.2.
Zielsetzung der Arbeit... 5
1.3.
Aktueller Stand... 6
2.
GRUNDLEGENDE BETRACHTUNGEN ... 9
2.1.
Geschichtlicher Ursprung von AJAX ... 9
2.2.
Begriffsklärung... 13
2.2.1.
MVC... 13
2.2.2.
Remote Scripting ... 14
2.2.3.
RIA ... 14
2.2.4.
Widget ... 15
2.2.5.
Wrapper ... 15
2.2.6.
Stub... 15
2.3.
Definition der Anwendungsdomäne... 16
2.3.1.
Web Remoting... 16
2.3.2.
DOM-Manipulation... 18
2.3.3.
Widgets... 18
2.3.4.
Visuelle Effekte ... 19
2.3.5.
Browseranwendungen ... 19
2.4.
Beispiel-Szenarien... 21
2.4.1.
,,Hello World" example ... 21
2.4.2.
Adresskartei... 25
2.4.3.
AJAX-Bildergalerie... 30
2.5.
Was ist AJAX?... 33
3.
AJAX FRAMEWORKS ... 37
3.1.
Der Begriff ,,framework"... 37
3.2.
Abgrenzung zu Funktionsbibliotheken... 38
3.3.
Anforderungen an ein framework ... 39
3.4.
Klassifikation ... 41
V
3.5.
Überblick... 43
4.
BESCHREIBUNG DER EVALUIERUNG... 47
4.1.
Allgemeiner Überblick ... 47
4.2.
Testauswahl... 47
4.3.
Beschreibung der Durchführung ... 48
4.4.
Testumgebung... 49
4.5.
Kriterien ... 50
4.6.
Bewertungsmaßstab ... 53
5.
DURCHFÜHRUNG DER EVALUIERUNG ... 55
5.1.
Clientframeworks ... 55
5.1.1.
Javascript-basierte Bibliotheken (Basisframeworks)... 55
5.1.1.1.
ACE ... 55
5.1.1.2.
AjaxToolbox... 56
5.1.1.3.
Bajax... 57
5.1.1.4.
HTMLHttpRequest... 58
5.1.1.5.
Lokris... 59
5.1.1.6.
MAJAX ... 60
5.1.1.7.
Prototype... 61
5.1.2.
Javascript-basierte Effektbibliotheken (Applicationframeworks) ... 63
5.1.2.1.
Adobe Spry... 63
5.1.2.2.
DOJO... 64
5.1.2.3.
jQuery... 65
5.1.2.4.
MochiKit... 66
5.1.2.5.
Mootools... 67
5.1.2.6.
Yahoo User Interface library ... 67
5.1.3.
Basis- und Applikationsframeworks erweiternde frameworks... 70
5.1.3.1.
Freja... 70
5.1.3.2.
OpenRico... 71
5.1.3.3.
Script.aculo.us ... 73
5.2.
Serverframeworks ... 74
5.2.1.
PHP... 74
5.2.1.1.
AJAXAgent ... 74
5.2.1.2.
Flexible AJAX... 75
5.2.1.3.
My-BIC... 76
5.2.1.4.
Sajax ... 78
5.2.1.5.
tinyAjax ... 79
5.2.1.6.
XAJAX... 80
5.2.2.
Perl... 82
5.2.2.1.
Catalyst ... 82
VI
5.2.2.2.
CGI::AJAX... 83
5.2.3.
Python... 85
5.2.3.1.
CherryPy... 85
5.2.3.2.
Nevow... 86
5.2.4.
Java... 88
5.2.4.1.
DWR... 88
5.2.4.2.
Google Web Toolkit ... 89
5.2.4.3.
JSON-RPC-Java ... 92
5.2.5.
DotNet ... 94
5.2.5.1.
AJAX.NET ... 94
5.2.5.2.
Anthem.Net ... 95
5.2.5.3.
ASP.NET AJAX (Codename 'Atlas') ... 96
5.2.5.4.
ComfortASP.NET... 99
5.2.5.5.
Visual WebGUI ... 100
6.
RESULTATE... 103
6.1.
Übersicht ... 103
6.2.
Fehlerbetrachtung ... 104
6.3.
Testergebnisse... 106
6.4.
Bewertung der frameworks ... 110
6.4.1.
Basisframeworks ... 110
6.4.2.
Applicationframeworks ... 112
6.4.3.
Basis- oder Applicationframeworks erweiternde Frameworks... 114
6.4.4.
Serverframeworks PHP ... 115
6.4.5.
Serverframeworks Perl ... 117
6.4.6.
Serverframeworks Python ... 117
6.4.7.
Serverframeworks Java... 119
6.4.8.
Serverframeworks DotNet... 120
6.5.
Diskussion... 121
7.
AUSBLICK... 125
7.1.
Frameworkentwicklungen ... 125
7.2.
Die Zukunft von AJAX ... 128
LITERATURVERZEICHNIS ... 131
INDEX ... 135
A.
ANHANG...A-3
A.1.
Grafische Darstellung der Messwerte... A-3
A.2.
Übersicht über AJAX frameworks ... A-7
A.3.
Testbögen ... A-15
VII
Abbildungsverzeichnis
Abbildung 1: Standardbeispiel für neue Trends im Web 2.0: Google Suggest Das Auto Completing ist in
AJAX frameworks mit wenigen Anweisungen realisierbar ... 2
Abbildung 2: AJAX als "buzzword" in der "tag cloud" des Web 2.0 (Quelle: http://www.openjacob.org)... 7
Abbildung 3: traditioneller Ablauf bei der Anforderung von Daten von einem Webserver: Die gesamte
Website wird neu geladen, im Beispiel: eine Bilderauswahl unter http://www.flickr.com ... 16
Abbildung 4: Die gleiche Anfrage wie in Abb. 2 mittels AJAX, während die AJAX Engine auf das Eintreffen
der HTTP Response wartet, kann der Nutzer die ursprüngliche Seite uneingeschränkt weiter benutzen 17
Abbildung 5: Mit AJAX verschwinden allmählich die Grenzen zwischen Desktop- und Webanwendungen,
Bsp.: http://www.bindows.net ... 19
Abbildung 6: Schematische Einordnung von AJAX frameworks ... 43
Abbildung 7: Grafische Darstellung der Anzahl der Suchergebnisse von www.google.de bei der Suche nach
der Kombination +ajax +{frameworkname}, Durchführung: 31.01.2007... 45
Abbildung 8: Bewertung der getesteten frameworks im Schulnotensystem ... 107
Abbildung 9: Traffic bei Erstaufruf in kB in Boxplot-Darstellung ... 109
Abbildung 10: Ladezeit je Anwendungsszenario in s in Boxplot-Darstellung... 109
Abbildung 11: Ladezeitvergleich basierend auf den einzelnen Anwendungsszenarien ...A3
Abbildung 12: Zeit zum Ausführen eines asynchronen Requests je framework in s ... A-4
Abbildung 13: übertragene Datenmenge bei Seitenerstaufruf je framework je Anwendungsbeispiel in kB. A-5
Abbildung 14: Messwertübersicht für die Abbildungen 11-13 ... A-6
VIII
Tabellenverzeichnis
Tabelle 1: Bestandteile von AJAX ... 33
Tabelle 2: Einordnung von AJAX frameworks nach Kategorien... 42
Tabelle 3: Klassifikation im Internet verfügbarer frameworks nach Sprachplattform ... 44
Tabelle 4: Übersicht über Anzahl der getesteten frameworks ... 48
Tabelle 5: Kriterienkatalog für Evaluierung... 53
Tabelle 6: Meistgenutzte AJAX Toolkits im Vergleich (Quelle: [Ore06]) ... 126
Tabelle 7: Bedeutung wesentlicher IT-Technologien und der Zeitraum bis deren voraussichtliche
Durchsetzung (Quelle: Computerzeitung/Gartner)... 128
IX
Listings
Listing 1: "Hello World" - klassische Realisierung mit PHP ... 21
Listing 2: Das "Hello World" Beispiel als AJAX-Realisation ... 22
Listing 3: Das "Hello World"-Beispiel in einer verbesserten AJAX-Variante... 24
Listing 4: Eine mögliche Implementierung des Beispiels 2 mittels PHP ... 26
Listing 5: Das Adresskarteibeispiel basierend auf AJAX ... 29
Listing 6: Beispiel 3 in einer klassischen Realisierung mit PHP... 31
Listing 7: Eine einfache, AJAX-basierte Bildergalerie ... 32
Listing 8: Beispiel 1 aus Kapitel 2.3.1 mit der ahah.js ... 36
X
Abkürzungsverzeichnis
AHAH
Asynchronous HTML and HTTP
AJAJ
Asynchronous JavaScript and JSON
AJAX
Asynchronous Javascript And XML
API
Application Programming Interface
ASP
Active Server Pages
CGI
Common Gateway Interface
CMS
Content Management System
CSS
Cascading Style Sheets
DHTML
Dynamic Hypertext Markup Language
DnD
Drag
and
Drop
DOM
Document Object Model
ECMA
Computer Manufacturers Association
FW
Framework
GUI
Graphical User Interface
ID Identificator
IDE
Integrated
Development
Environment
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
JS
Javascript
JSF
Java Server Faces
JSNI
JavaScript Native Interface
JSON
JavaScript Object Notation
JSP
Java Server Pages
LOC
Lines of Code
MS
Microsoft
MVC
Model-View-Controller
OWA
Outlook Web Access
PHP
Hypertext
Preprocessor
RIA
Rich
Internet
Application
RPC
Remote Procedure Call
SGML
Standard Generalized Markup Language
SQL
Structured Query Language
URL
Uniform Resource Locator
VS
Visual
Studio
WWW
World Wide Web
XI
XHR
XMLHttpRequest
XHTML
eXtensible HyperText Markup Language
XML
eXtensible Markup Language
XSL
eXtensible Stylesheet Language
XSLT
eXtensible Stylesheet Language Transformation
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1. Einleitung
Studienarbeit
Seite 1 / 136
André Langer
1.
Einleitung
1.1.
AJAX eine kurze Einführung
Bereits im antiken Griechenland verband man mit dem Namen AJAX vor allem eins: Macht,
Schönheit und Größe. Die Rede ist hier von Ajax dem Großen, Sohn des Königs von Salamis, der
in Homers Illiade in der Schlacht um Troja als Mutigster aller Griechen im Zweikampf dem Trojaner
Hektor gegenüber stand. Der Kampf dauerte einen ganzen Tag, doch keiner der beiden Helden
konnte ihn für sich entscheiden, weswegen beide letztendlich den Kampf mit Respekt gegenüber
dem Anderen beendeten. [Fid07] Jahrhunderte lang wurde der Mythos weitergetragen, doch aus-
gerechnet im Jahr 2005 tauchte der Name AJAX in einem vollkommen neuen Zusammenhang
wieder auf: Wie ein griechischer Held ,,eroberte" der Begriff binnen kurzer Zeit die Welt des Inter-
nets und selbst zwei Jahre später kann noch niemand einen Orakelspruch sprechen, wohin der
Weg von AJAX im ,,Web 2.0" in nächster Zeit führen wird. [Hos07]
AJAX dies ist zu Beginn des 21. Jahrhunderts eine Art Modewort (,,buzzword"), mit dessen
Techniken es möglich sein soll, die Bedienung des klassischen World Wide Web zu revolutionie-
ren
1
oder zumindest zu vereinfachen und das Nutzungskonzept einer Webseite stärker auf die
Bedürfnisse der Nutzer auszulegen. Interessant dabei ist, dass sich hinter AJAX kein vollkommen
neues Programmierkonzept oder sogar eine eigene neue Sprache verbirgt, sondern zunächst nur
ein Akronym für ,,Asynchronous Javascript And XML". Den sprichwörtlichen Stein ins Rollen ge-
bracht hat dabei ein inzwischen vielfach zitierter Aufsatz von dem Amerikaner Jesse James Garrett
unter dem Titel ,,Ajax: A New Approach to Web Applications" im Februar 2005 [Gar05]. Seitdem hat
sich einiges im Web getan: In den darauf folgenden Monaten entstanden Angebote im Internet, die
Mitte der Neunziger Jahre noch kaum vorstellbar waren.
2
Diese Entwicklung setzte in einer Zeit
ein, der mit der steigenden Verbreitung von so genannten Wikis und Blogs bereits ein weiterer
Trend vorausgegangen war. Inhalte, die aktiv von Nutzern erstellt wurden, rückten immer mehr in
den Mittelpunkt des Interesses der Nutzer selbst verbunden mit möglichst einfach und intuitiv zu
bedienenden Benutzeroberflächen wurde zunehmend wichtiger.
1
Etwas vereinfacht betrachtet hat sich das zugrunde liegende Konzept des WWW seit 1989 mit der Einführung der Hyper-
Text Markup Language am CERN nicht mehr wesentlich geändert.
2
An dieser Stelle wird in Publikationen und Artikeln häufig auf bekannte Beispiele wie GoogleMaps
(http://maps.google.com), GoogleSuggest (http://labs.google.com/suggest/) oder beispielsweise Flickr (http://www.flickr.com)
verwiesen.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1.1. AJAX eine kurze Einführung
Seite 2 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Die Techniken dafür gab es bereits
vorher; so wurde zum Beispiel eine
Vielzahl von Content Management
Systemen entwickelt, mit der auch ein
Nutzer ohne Programmierkenntnisse
schnell Inhalte im Web publizieren
konnte und die entsprechenden Seiten
dynamisch im Hintergrund generiert und
als HTML-Seiten ausgeliefert wurden.
Doch im Gegensatz dazu wirkten
Internetseiten, die im Hintergrund auf
Techniken wie AJAX, XML und Webser-
vices aufsetzten, plötzlich wesentlich
lebendiger und ,,reicher" an Funktionali-
täten.
Im Herbst 2004 beschäftigte sich in San Francisco eine Konferenz unter dem Titel ,,Web 2.0" mit
dieser Entwicklung. Community-Orientierung, erhöhte Benutzerfreundlichkeit, eine intuitive Bedie-
nung und das allmähliche Verwischen von Dienstgrenzen durch Kombination bestehender
Techniken und Inhalte (,,Mashup") wurden auf der Konferenz als wesentliche Aspekte identifiziert,
sowie weitere Schlüsselprinzipien für die kommenden Jahre benannt. Dale Dougherty ein Mitor-
ganisator der Konferenz vom O'Reilly Verlag stellte eine Reihe von Vergleichen an, in welchem
Veränderungsprozess sich das Internet aktuell befinden würde, und welche altbekannten Services
in Zukunft durch neuen Technologien ersetzt werden würden. Der Name der Konferenz steht seit-
dem als Schlagwort für diesen gesamten Veränderungsprozess. ,,Web 2.0 ist heute, Web 1.0 war
gestern" wird beispielsweise auf der Website von Helge Städtler unter dem Titel ,,Tachometer der
Webentwicklung" [Sta07] getitelt
3
.
3
Dass sich aufgrund derartiger Slogans und Schlagwörter schnell ein nur schwer zu kontrollierender Hype entwickeln kann,
bei dem mit zunehmendem Fortschreiten Begrifflichkeiten und ursprüngliche Konzepte immer stärker verwässern, wird am
Beispiel Web 2.0, AJAX und Mashup schnell deutlich. So verwundert es nicht, dass bereits im Jahr 2006 erste Spekulatio-
nen wie ,,Überholt das Web 3.0 gar das Web 2.0" [Bas06] in einigen Weblogs zu finden waren, welche zumeist ohne
wissenschaftlichen Hintergrund von Unternehmen und anderen selbst ernannten Experten zu Marketingzwecken genutzt
wurden.
Abbildung 1: Standardbeispiel für neue Trends im Web 2.0: Google
Suggest Das Auto Completing ist in AJAX frameworks mit wenigen
Anweisungen realisierbar
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1. Einleitung
Studienarbeit
Seite 3 / 136
André Langer
Rückblickend kann wohl festgestellt werden, dass AJAX als Programmierkonzept an dieser Ent-
wicklung einen maßgeblichen Anteil hat und weiterhin haben wird. Die Grenzen zwischen Web-
Applikationen und Desktop-Anwendungen scheinen allmählich zu verschwinden. Plötzlich entde-
cken Web-Designer wieder ,,Drag and Drop"-Effekte sowie weitere Animationsarten für sich,
Websitebesuchern werden Hilfeassistenten angeboten und reine textuelle Informationen werden
grafisch ansprechend aufbereitet und sind von Nutzerseite aus jederzeit anpassbar.
Zu erwähnen ist dabei, dass diese Sonderfunktionen nicht mehr Ressourcen benötigen als die
althergebrachten Websiteinhalte der letzten Jahre. Eher im Gegenteil kann gesagt werden, dass
auf AJAX-basierten Internetseiten ein völlig neues ,,look-and-feel" entsteht. Websiteinhalte schei-
nen spürbar schneller zu laden, jeder Mausklick ruft anscheinend eine unmittelbare Aktion hervor,
und das gesamte Timingverhalten von Webanwendungen scheint sich unter Einsatz dieser neuen
Technik zu verbessern, da ein wesentlicher Anteil aller Operationen nun auf Clientseite verlagert
wird.
Der Mehraufwand für diese Reihe von Vorteilen ist zunächst auf Programmiererseite zu suchen,
denn gegenüber traditionellen Programmieransätzen auf Serverseite (ASP, PHP, Perl, Python und
andere) ist nun ein wesentlich komplexerer Programmablauf zu realisieren, der sowohl auf Server-
als auch auf Clientseite stattfindet und ebenso eine wechselseitige Kommunikation zwischen die-
sen einschließt. Nicht nur die eindeutige Abarbeitung von Programmcode verwischt unter dem
Konzept von AJAX, auch die Vielfalt der eingesetzten Sprachen stellt eine Herausforderung für die
Entwickler von AJAX-basierten Webapplikationen dar. Während es vor Jahren genügte, Spezial-
kenntnisse in PHP oder Perl zu besitzen und das Layout der Internetseite einem Grafiker
überlassen blieb, der mithilfe von Cascading Style Sheets die einzelnen Elemente einer Seite op-
tisch ansprechend anordnete, verzahnen sich bei modernen Internetseiten diese Techniken immer
mehr. Einzelne Skriptsprachen sind nicht mehr alleinstehend, sondern agieren zunehmend mitein-
ander: So werden die Stärken von Javascript, XHTML / DOM, CSS, XML und Sprachen wie PHP,
DotNet, Java sowie Datenbankanfragesprachen wie MySQL immer häufiger kombiniert, um noch
ansprechendere Internetauftritte zu realisieren.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1.1. AJAX eine kurze Einführung
Seite 4 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Diese Entwicklung mag aus Benutzersicht erfreulich sein, birgt auf Entwicklerseite aber mehrere
Gefahren. Während seit Jahren stetig versucht wurde, Softwareentwicklung mithilfe von Standardi-
sierungen, integrierten Softwareentwicklungsumgebungen (IDEs) und ,,Best Practise"-
Empfehlungen in geregelte Bahnen zu lenken, besteht durch die Vermischung verschiedener
Sprachen und Programmierkonzepte die Gefahr, die Bestrebungen ungewollt wieder umzukehren.
Webseitenentwickler haben immer mehr Wahlmöglichkeiten, unter dem Einsatz welcher Techniken
sie ein konkretes Problem lösen. Wird keine konsequente Umsetzung gefunden, entsteht schnell
ein Mischcode, der schwer zu warten ist.
Eine weitere Gefahr ist, dass Webanwendungen aufgrund begrenzter Entwicklungsressourcen
häufig nur für bestimmte Anwendungsfälle und Browserfamilien entwickelt werden. Auch wenn
heutige moderne Browser größtenteils Webstandards mit dem gleichen Endverhalten umsetzen, so
ist für einen Programmierer dennoch ein relativ hoher Aufwand mit vielen Fallunterscheidungen
und Work-arounds nötig, um sowohl aktuelle Internetbrowser wie Internet Explorer, Mozilla/Firefox,
Safari und Opera, als auch ältere Versionen dieser Programme zu unterstützen und alle Informati-
onen einer Webseite identisch (oder zumindest in gleicher Art und Weise benutzbar) in diesen
darzustellen.
Das skizzierte Problemszenario ist seit langem in der Softwareentwicklung bekannt und beschränkt
sich nicht nur auf die Entwicklung von Webapplikationen. Um einen Programmierer bei seiner Ar-
beit zu unterstützen und ihm die Behandlung ständig wiederkehrender Problemszenarien zu
vereinfachen, finden sich für nahezu jede Sprache eine Reihe von frameworks in Form von Pro-
grammbibliotheken. Dazu verbergen frameworks in unterschiedlichem Maße die zugrunde liegende
Komplexität und abstrahieren von den technischen Realisierungen. Auch nach der rasanten
Verbreitung von AJAX im Jahr 2005 wurden weltweit ob nun von Privatpersonen oder größeren
Unternehmen, ob kommerziell oder open-source - verschiedenste frameworks konzipiert, entwi-
ckelt und anderen Nutzern bereitgestellt. Knapp zwei Jahre später ist die Vielfalt dieser frameworks
so groß geworden, dass es einem Einsteiger nur noch schwer möglich ist, einen Gesamtüberblick
zu bekommen und herauszufinden, welche frameworks für welche Zwecke am Besten geeignet
sind. Darüber hinaus ist es inzwischen schon nicht leicht, überhaupt zu unterscheiden, welche von
den angebotenen AJAX-Programmbibliotheken wirklich AJAX-Komponenten mit erweiterten Funk-
tionalitäten enthalten und welche sich unter Umständen nur so nennen, aber keinen Mehrwert
bringen. Ebenso wenig ist häufig nicht genau erkennbar, inwieweit angebotene AJAX frameworks
bereits einen stabilen Entwicklungsstand erreicht haben und ob sie auch in Zukunft unter der gro-
ßen Konkurrenz weiter Bestand haben und unterstützt werden, oder ob in wenigen Monaten im
schlechtesten Fall ein komplettes Reengineering des damit realisierten Projektes nötig werden
könnte.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1. Einleitung
Studienarbeit
Seite 5 / 136
André Langer
1.2.
Zielsetzung der Arbeit
Ziel der vorliegenden Studienarbeit ist es, einen Überblick über bestehende AJAX frameworks zu
geben und diese nach unterschiedlichen Kriterien zu bewerten. Datengrundlage dazu ist eine im
Oktober 2006 durchgeführte Recherche, in der zunächst zum 31.10.2006 insgesamt 231 frame-
works identifiziert wurden, die einen Bezug zu der Thematik ,,Asynchronous JavaScript and
XML" erkennen ließen. Schwerpunktmäßig wurden rein Javascript-basierte Funktionssammlun-
gen, sowie frameworks basierend auf PHP, Perl, Python, DotNet und Java untersucht. Daneben
existieren weitere frameworks für andere Sprachen, wobei hier exemplarisch Flash und Coldfusion
genannt seien. Da Flash als Technologie bereits vor Jahren eine ähnliche Motivation wie AJAX
verfolgte und die Thematik AJAX unter Flash eine eigene Studienarbeit füllen könnte, werden diese
frameworks in der weiteren Betrachtung ausgeklammert. Das Gleiche gelte an dieser Stelle für
Javascript-basierte frameworks mit einer reinen Spezialisierung auf Debugging und Logging, da
diese aus Webseitenbesuchersicht ebenfalls keine Relevanz unter dem Schlagwort ,,Web 2.0" auf-
weisen. Aus dem genannten Grund reduzierte sich die Zahl der aktuell verfügbaren framework um
22 auf insgesamt 209 Programmbibliotheken.
In einem zweiten Untersuchungsschritt konnte festgestellt werden, dass 18 der verbliebenen fra-
meworks zwar überdurchschnittlich oft in Verbindung mit dem Begriff AJAX genannt wurden, selbst
aber keine erkennbaren AJAX-ähnlichen Funktionalitäten implementierten. Die Projektwebsites von
6 weiteren frameworks, die auf mehreren anderen Internetseiten empfohlen wurden, waren sogar
in mehreren Stichproben über einen Zeitraum von zwei Wochen generell nicht zu erreichen und ihr
Entwicklungsstand erschien eingestellt. Insgesamt blieben deshalb als Datengrundlage für diese
Studienarbeit 185 AJAX frameworks. Deren genaue Klassifikation wird im Kapitel 3.4 näher be-
schrieben. Eine Übersicht mit generellen Informationen zu allen AJAX frameworks ist im Anhang 1
zu finden. Die Übersicht erhebt aufgrund der derzeitigen sehr dynamischen Entwicklung in diesem
Bereich dabei keinen Anspruch auf Vollständigkeit.
Die Studienarbeit besteht aus insgesamt sieben Teilen. Nach einer kurzen Einführung in die The-
matik im vorliegenden Kapitel 1 beschäftigt sich Kapitel 2 zunächst mit einigen Grundlagen von
AJAX, die für das spätere Verständnis der framework Evaluation nötig sind. Die Ziele und
Einsatzgebiete stehen dabei im Mittelpunkt und es wird versucht die Frage zu klären, was AJAX
selbst eigentlich ist. Anhand von Fallbeispielen wird die Einsatzweise von AJAX geklärt, welche
später als Grundlage für die Evaluierung der verschiedenen frameworks dienen. Kapitel 3 klärt
darauf aufbauend zunächst grundlegende Begriffe im Zusammenhang mit AJAX frameworks und
gibt einen Überblick über das breite Spektrum an AJAX frameworks.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1.3. Aktueller Stand
Seite 6 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
In Kapitel 4 wird anschließend der Kriterienkatalog definiert, welcher der Durchführung der Evalua-
tion und der Bewertung der AJAX frameworks zugrunde liegt und legt die Kriterien offen, unter
welchen Gesichtspunkten die Auswahl an frameworks getroffen wurde, die von den knapp 200
Vertretern repräsentativ evaluiert wurden. Kapitel 5 stellt den experimentellen Teil der Studienar-
beit dar, in dem kategorisiert nach den zugrunde liegenden Skriptsprachen einzelne frameworks
untersucht und deren Vor- und Nachteile beschrieben werden. Daran anschließend gibt Kapitel 6
eine Übersicht über die gewonnenen Ergebnisse aus der Evaluierung und versucht, eine objektive
Bewertung der getesteten frameworks abzugeben. Empfehlungen über gute und weniger gute
frameworks für bestimmte Einsatzgebiete werden getroffen und deren Potential in Verbindung mit
anderen Techniken diskutiert. Kapitel 7 schließlich versucht als Abschluss der Studienarbeit einen
Ausblick auf die Zukunft von AJAX sowie AJAX frameworks anhand aktuell verfügbarer Fakten und
Prognosen zu geben.
1.3.
Aktueller Stand
Paradox an der Thematik ,,AJAX" ist, dass sich hinter diesem Schlagwort im Grunde genommen
keine neuen Technologien verbergen Javascript, HTML und XML sind seit langem bekannt und
wurden dementsprechend schon in einer Vielzahl wissenschaftlicher Arbeiten analysiert und vor
wenigen Jahren auch standardisiert. Neu erscheint zwar zunächst der Ansatz der Asynchronität,
aber auch dafür gab es die nötigen Techniken bereits 1998
4
. Warum erst zu Beginn des Jahres
2005 ein sprunghaftes Interesse an dieser Thematik aufkam, soll in Kapitel 2 geklärt werden. Die
bedeutendste wissenschaftliche Arbeit zu dem Thema prägte Jesse James Garrett mit dem Titel
,,Ajax: A New Approach to Web Applications" im Februar 2005 [Gar05]. Obwohl der Begriff
,,AJAX" letztendlich ein Marketingbegriff für die Beschreibung von etwas bereits Bekanntem war,
kam es in den Medien zu einem regelrechten Hype. Allein in dem Internet-Versandhaus ama-
zon.com fanden sich im Februar 2006 knapp 200 verschiedene Buchtitel, die sich mit der Thematik
AJAX beschäftigen, als Suchbegriff unter www.google.com waren es sogar geschätzte 92.900.000
Ergebnisse.
5
Zumeist beschäftigen sich diese Artikel mit einer Einführung in das Thema AJAX,
vorwiegend für Programmierneulinge in diesem Gebiet, oder sind Gegenstand von threads in ver-
schiedenen Diskussionsforen.
4
Siehe Kapitel 2.1
5
Gesucht wurde am 08.02.07 nach der Wortkombination ,,+ajax +xml"
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1. Einleitung
Studienarbeit
Seite 7 / 136
André Langer
Im Gegensatz dazu oder vielleicht gerade deswegen finden sich nur sehr wenige weitere wissen-
schaftliche Abhandlungen oder Veröffentlichungen, die sich mit der Thematik ,,Asynchronous
Javascript" oder sogar mit AJAX frameworks auseinandersetzen. Viele davon wurden erst inner-
halb der letzten Monate im englischsprachigen Raum verfasst. Wissenschaftlich fundierte,
deutschsprachige Artikel sind selten und finden sich zumeist als Veröffentlichung in speziellen Ma-
gazinen (entwickler.press). Exemplarisch sei hierfür das AJAXspecial vom Software & Support
Verlag genannt.
Daneben erfolgt aktuell ein regelmäßiger Wissensaustausch auf verschiedensten Konferenzen
zum Thema AJAX weltweit. Neben der Ursprungsveranstaltung ,,Web 2.0" jedes Jahr im Oktober in
San Francisco sei hier vor allem die ,,w-jax 2006" in München und ,,Ajax in Action" im Februar 2007
in Frankfurt genannt.
Obwohl Quellen im Internet wegen der kurzen Lebensdauer und der schwer einzuschätzenden
Relevanz in der Regel kritisch zu sehen sind, sei abschließend an dieser Stelle auch die Seite
www.ajaxpatterns.org erwähnt, die erstmals den Versuch startete, eine lückenlose Übersicht über
bestehende AJAX frameworks zu geben.
Es finden sich eine Reihe weiterer derartiger Übersichten im weltweiten Datennetz, doch repräsen-
tieren diese jeweils nur einen Bruchteil der tatsächlich angebotenen Programmbibliotheken oder
beschäftigen sich tiefergehend mit einer bestimmten Art von AJAX frameworks wie zum Beispiel
der ASP.Net-framework-Vergleich von Zeiss [Zei07] zeigt.
Abbildung 2: AJAX als "buzzword" in der "tag cloud" des Web 2.0 (Quelle: http://www.openjacob.org)
Evaluierung von AJAX-basierten frameworks für das Web 2.0
1.3. Aktueller Stand
Seite 8 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 9 / 136
André Langer
2.
Grundlegende Betrachtungen
2.1.
Geschichtlicher Ursprung von AJAX
Im Folgenden soll kurz diskutiert werden, was die Ursprünge von AJAX sind und warum sich dieser
Ansatz erst in den letzten Jahren durchsetzen konnte. Die aktuelle Diskussion um das Thema
AJAX ist dabei der vorläufige Höhepunkt einer Entwicklung, deren Wurzeln bis in die Achtziger
Jahre zurückreichen. Zu dieser Zeit bestand das Hauptinteresse darin, in einer zweistufigen (two-
tier-, Client-Server-) Architektur verschiedenste Daten mehreren Nutzern gleichzeitig zur Verfügung
zu stellen. Während die gesamte Darstellungslogik in einzelnen Komponenten einer Software rein
auf Clientseite implementiert wurde, wurden die Daten selbst von einem Server bereitgestellt.
Diese strikte Trennung veränderte sich ab dem Zeitpunkt, wo HTTP und HTML es jedermann er-
möglichten, Informationen im Internet zu suchen und auf eigenen Internetseiten zu veröffentlichen.
Diese Informationen waren zu Beginn meist nur statische Inhalte, die von einem Server als elekt-
ronischer Text bereitgestellt und auf eine Anfrage hin zu einem Client geschickt wurden, welcher
diese Informationen schließlich in einem Internetbrowser darstellte. Einer der ersten Internetbrow-
ser dieser Zeit war unter anderem der im Februar 1992 an der University of Illinois / Urbana
Champaign (USA) entwickelte Mosaic Browser, dem weitere Entwicklungsprodukte wie beispiels-
weise 1994 in den USA der Netscape Navigator, in Norwegen der Opera Browser, oder 1995 der
Internet Explorer folgten. Auch wenn es zu Beginn reichte, von einem Server statische Informatio-
nen ausliefern zu lassen welche von Clients angefordert wurden, stiegen allmählich die
Erwartungen der Internetnutzer. Das Internet war nicht mehr nur ein Netz zum wissenschaftlichen
Austausch, sondern stellte inzwischen auch immer mehr private und kommerzielle Angebote zur
Verfügung. Die Nutzer verglichen zunehmend die Möglichkeiten, die ihnen das reine Hypertext-
Konzept von HTML anbot mit den Möglichkeiten von Desktopanwendungen, und als Konsequenz
wurde schnell nach Erweiterungen und Alternativen gesucht, Internetinhalte in einem ersten Schritt
dynamisch verändern und in einem weiteren Schritt grafisch ansprechender aufbereiten zu können.
Die Firma Sun Microsystems stellte dazu im Mai 1995 erstmals die Entwicklung der Programmier-
sprache Java der Öffentlichkeit vor, deren Applet-Konzept nun interaktive Anwendungen auf einer
Webseite ermöglichten. Durch eine Kooperation mit Netscape und einer reibungslosen Browserun-
terstützung im zu der Zeit weit verbreiteten Netscape Navigator wurde Java schnell zu einer
bedeutenden Technik. Trotz der Erfolge von Java Applets bestanden jedoch zwei wesentliche
Probleme: Zum Einen liefen applets nur in Internetbrowsern, die eine Java Virtual Machine in einer
korrespondierenden Version bereitstellten, für die das applet entworfen wurde.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.1. Geschichtlicher Ursprung von AJAX
Seite 10 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Zum Anderen waren die Internetanbindungen häufig noch dial-up-Verbindungen, sodass der
Download von Code von komplexen Java applets durchaus länger dauern konnte, als manche
Nutzer bereit waren zu warten. Aus diesem Grund wurde weiter nach Alternativen gesucht und
schnell entstand die Idee, dass es möglich sein müsste, direkt auf dem Server dynamisch Code
generieren zu können und durch diesen letztendlich statische Seiteninhalte an Clients auszuliefern.
Eine erste Lösung, die es ermöglichte, Webseiten ein dynamischeres Verhalten zu verleihen, war
das Common Gateway Interface (CGI) . Dies ermöglichte es, Skripte auf dem Server zu erstellen,
die bei einer Anfrage direkt als Programm ausgeführt werden können. In die Kritik geriet CGI, da
aus Sicherheitssicht Bedenken erhoben wurden, dass beliebiger Code direkt auf dem Webserver
ausgeführt werden könnte. Sun erkannte diese Entwicklung und führte 1996 das Servlet-Konzept
ein Java-Code, der nun direkt auf einem Applikationsserver ausgeführt werden konnte und das
Wartungsproblem löste, welches bei applets in verschiedenen Browsern bestand. Gleichzeitig er-
kannte man nun bei servlets, dass eine stärkere Trennung zwischen der Verarbeitung der
dynamischen Inhalte und der Darstellung dieser Inhalte in den Skripts nötig sei und erweitere
dies zu Java Server Pages (JSP) . Ein ähnliches Konzept entwickelte Microsoft parallel zuvor unter
der Bezeichnung Active Server Pages (ASP) . Auch weitere Skriptsprachen wie PHP entstanden in
diesem Zeitraum.
Zur gleichen Zeit wurde von Brendan Eich für die Netscape Communication Corporation eine wei-
tere dynamisch typisierte Sprache entwickelt, die letztendlich JavaScript genannt wurde und
Programmierern ohne weitere Kenntnisse in Java ermöglichen sollte, einer Webseite eine dynami-
sches Verhalten zu verleihen. Aus dieser Entwicklung heraus entstand auch die Idee, eine
Webseite mit ihren Tags als Objekt anzusehen, die zueinander in Beziehung stehen und dyna-
misch modifiziert werden können, was später zum Document Object Model (DOM) weiterentwickelt
wurde.
Die Firma Microsoft konnte als zunehmender Konkurrent diese Entwicklungen nicht ignorieren und
entwickelte zunächst eine eigene Skriptsprache mit einem ähnlichen Funktionsumfang wie JavaSc-
ript, welche JScript genannt wurde. Stückweise begann damit eine Entwicklung, die heute unter
dem Begriff ,,Browserkrieg" bekannt ist. Entwickler mussten mit verschiedensten Inkompatibilitäten
kämpfen und durch die unterschiedliche Darstellung in verschiedenen Browsertypen entstand
schnell der Ruf nach einer Standardisierung, welche letztendlich durch die European Computer
Manufacturers Association erfolgte, die die Basisfunktionalitäten von Javascript als ECMAScript
definierten.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 11 / 136
André Langer
Diese Entwicklung kann als der Beginn des Strebens nach einer Browserdominanz angesehen
werden. Während der Netscape Navigator bis 1996 der führende Webbrowser war, gelang es
Microsoft ab dem Internet Explorer 3.0 erstmals, Nutzer zu einem Umstieg zu bewegen. Der Höhe-
punkt des Browserkrieges wird mit dem Jahr 1998 angegeben, wo immer neuere proprietäre
Formate durch die Browserhersteller eingeführt wurden, um einerseits neue Nutzer, andererseits
einen Vorsprung gegenüber anderen Konkurrenten zu gewinnen. Eine Entwicklung aus dieser Zeit
war in den Browsern der vierten Generation unter anderem DHTML eigentlich ein Marketingbeg-
riff, der bereits bekannte Technologien umfasste, und nicht vom W3C standardisiert ist, aber jetzt
erst populär wurde. Mit DHTML war es nun möglich, Inhalte und die Struktur einer Internetseite ,,on
the fly" zu verändern, auch wenn bedingt durch den Browserkrieg Inkompatibilitäten die Entwick-
lung erschwerten.
Obwohl mit DHTML zwischenzeitlich sehr aufwändige Seiten entstanden, konnte sich die Idee
dahinter zunächst nur bedingt durchsetzen. Die Gründe dafür sind vielschichtig. Das Hauptargu-
ment bezog sich auf Javascript selbst. Die abweichenden Implementierungen und Interpretationen
in verschiedenen Browsern wurden immer wieder angeführt, auch dass Javascript jederzeit von
Benutzern aus Sicherheitsgründen ausgeschaltet werden konnte. Zwischenzeitlich aufkommende
Sicherheitsrisiken wurden in den Medien hochgespielt und auch der erhöhte Entwicklungsaufwand
von Javascript mit wenig Debuggingmöglichkeiten war immer ein Argument, so wenig Javascript
wie möglich auf eigenen Webseiten einzusetzen. So kam es, dass Javascript als Teilkonzept von
DHTML letztendlich als eine Art ,,Spielzeug für Programmierer" abgetan wurde und sich lange Zeit
auf das serverseitige Erstellen von dynamischen Inhalten konzentriert wurde.
Dennoch bestand weiterhin das Problem, dass Nutzer auf Internetseiten zunehmend die intuitive
Bedienung vermissten, die sie aus anderen Softwarebereichen gewöhnt waren. Man fand sich
damit ab, dass die Navigation in Webseiten meist nur in Form von Textlinks ablief, die Frage be-
stand jedoch trotzdem, wie man Nutzern bessere Interaktionsmöglichkeiten anbieten könnte. Die
Firma FutureWave stellte dazu bereits 1996 einen Ansatz namens Future Splash Animator vor, der
auf einer javabasierten Animationswiedergabesoftware aufsetzte und später an Macromedia ver-
kauft und in Flash umbenannt wurde. Trotz dass mit dieser Technologie bis dahin noch nicht da
gewesene Effekte auf Webseiten Einzug hielten, hatte Flash ähnliche Probleme wie Java zu Be-
ginn: nämlich dass es nicht universell einsetzbar war und auf jedem Client eine spezielle
Abspielsoftware benötigte.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.1. Geschichtlicher Ursprung von AJAX
Seite 12 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Bis ins Jahr 2001 stellte sich immer stärker heraus, dass in der Entwicklung von Webseiten immer
weniger das Layout als vielmehr die Inhalte im Mittelpunkt standen. Immer aufwändigere Content-
Management-Systeme wurden entwickelt, die dem Nutzer einen Teil der Arbeit abnahmen, das
dynamische Verhalten von Internetseiten selbst programmieren zu müssen. Vielmehr wurden Sei-
teninhalte nur noch definiert, in Datenbanken zwischengespeichert und beispielsweise mithilfe von
templates dynamisches zu kompletten Seiten zusammengesetzt. DHTML-Effekte wurden dazu
nicht benötigt und wurden im Zweifelsfalle eher mit Flash umgesetzt, da dort erheblich weniger bis
teilweise gar kein Programmieraufwand nötig war, um ansprechende Effekte zu erzeugen.
In der folgenden Zeit beschränkten sich die Entwicklungen vorwiegend auf Standardisierungen und
festgelegte Schnittstellen, wodurch der Programmieraufwand wesentlich reduziert werden sollte.
Nachdem sich viele Unternehmen um das Jahr 2000 herum mangels Erfolgen aus dem Web zu-
rückzogen und sich der Internet Explorer gegenüber dem Netscape Navigator als meistgenutzter
Browser durchsetzte, setzte auch ein Umdenken bei den Browserherstellern ein. Trotz dass sich
die aktuell auf dem Markt befindlichen Browser an einigen Punkten im Verhalten und der Imple-
mentierung von Funktionen unterschieden, wurden dennoch vermehrt Standards einheitlich
umgesetzt. Das Ergebnis dieser knapp 20 Jahre dauernden Entwicklung ist nun, dass Internetsei-
ten von heute mit denen von einst kaum zu vergleichen sind. Trotz dass sich (X)HTML als
elementauszeichnende Sprache über die Jahre hinweg fest etabliert und gehalten hat, ist ein im-
menser Funktionsumfang hinzugekommen, der Programmierern und Webdesignern heutzutage für
die Entwicklung von Internetauftritten zur Verfügung steht.
Die entscheidende Frage ist nun, wo in dieser Entwicklung der Begriff AJAX einzuordnen ist. Mit
dem Aufkommen neuer Angebote wie GoogleMaps stiegen sprunghaft wieder die Service-
Erwartungen der Nutzer auf Webseiten. Die Präsentation dynamisch generierter Informationen
wurde zunehmend von Besuchern schlichtweg erwartet, daher fielen immer mehr neue Konzepte
auf, die die Benutzung oder den Umgang mit Webseiteninhalten vereinfachten. Garrett als Mitar-
beiter der Firma Adaptive Path fasste diese Beobachtung 2005 in seinem vielfach beachteten
Aufsatz zusammen [Gar05]. Der Name AJAX war geboren und innerhalb eines Jahres begann ein
regelrechter Boom um diese Technik. Alte Entwicklungen wie DHTML und Javascript wurden wie-
der entdeckt und wieder verstärkt auf Internetseiten eingesetzt. Selbst das einizig neu
erscheinende Konzept von AJAX das asynchrone Nachladen von einzelnen Seiteninhalten im
Hintergrund ist bei weitem nicht neu, sondern wurde erstmals im Jahr 1998 von Microsoft im
Internet Explorer 5.0 als Hilfsobjekt implementiert und unter anderem unter einer Anwendung mit
dem Namen ,,Outlook Web Access" genutzt, um unbemerkt HTTP Requests im Hintergrund an
einen Server senden zu können, um Informationen ohne Neuladen der gesamten Seite nachladen
zu können. Nur wurde dieser Ansatz zu seiner Zeit von keinem anderen Internetbrowser unterstützt.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 13 / 136
André Langer
Abschließend bleibt die Frage zu klären, warum der endgültige Durchbruch von Javascript als Ba-
sistechnologie von AJAX erst 10 Jahre nach deren Entwicklung gelungen scheint. Gelin nennt
dazu in [Gel06] zwei wesentliche Gründe: Als erstes werden in diesem Artikel die beschränkten
Einsatzmöglichkeiten von DHTML im lange Zeit genutzten Netscape 4 Browser genannt, weswe-
gen ständig Fallunterscheidungen bei Browserabfragen getroffen werden mussten. Die Ausführung
von DHTML war zu seiner Zeit oft langsam und fehleranfällig und führte oft zu Abstürzen. Erst mit
der Entwicklung verbesserter Internetbrowser und einer gesteigerten Ausführungsgeschwindigkeit
von Javascript wurde DHTML für Webentwickler wieder interessant. Der zweite Grund seien die
hohen Sicherheitsbedenken gegenüber dem XMLHttpRequest-Objekt gewesen, da in der An-
fangszeit die Gefahr bestand, dass Unbefugte über ActiveX-Komponenten beliebige Dateien von
lokalen Festplatten auslesen konnten und erst nach und nach auch Gecko-basierte Browser ein
XMLHttpRequest-Objekt implementierten. Mit dem Fortschreiten aktueller Servertechnologien und
verbesserter Hardware wurde nun schnell offensichtlich, dass mit asynchronen Anfragen an Web-
server ein wesentlicher Mehrwert zu erreichen war, was die Ausführungsgeschwindigkeit und das
subjektive Nutzungsverhalten angeht. Genau in dieser Zeit gab der Begriff AJAX der Entwicklung
einen Namen und wurde von vielen Webdesignern mit Freude aufgenommen und umgesetzt.
2.2.
Begriffsklärung
2.2.1.
MVC
MVC ist ein Akronym für die Bezeichnung Model-View-Controller und repräsentiert ein Architektur-
konzept in der Softwaretechnologie. Erstmals wurde ein MVC-ähnliches Vorgehen 1997 durch den
Norweger Trygve Reenskaug in der Sprache Smalltalk aufgezeigt. Die Idee hinter MVC ist die
Trennung der Anwendungslogik in einen Daten (Model) -, Präsentations (View)- und Steuerungsteil
(Controller). Statt Anwendungen als homogene Einheiten zu konzeptionieren, die später nur
schwer wartbar oder Teile davon nur schwer durch andere Implementierungen austauschbar sind,
soll die Auftrennung in einer MVC-Architektur ein flexibleres Programmdesign und spätere Erweite-
rungen unkompliziert ermöglichen. Komplexität soll dadurch reduziert werden. Die Model-
Komponente definiere dabei die internen Datenstrukturen (mit entsprechenden Zugriffsmethoden)
eines Programms, wobei keine Einschränkungen in der Repräsentation der Daten getroffen wer-
den. Der Teil eines Programms, der mit View umschrieben wird, stelle eine Art frontend dar,
welches die Daten dem Nutzer visuell darstellt und die Control-Komponente übernehme in einer
MVC-Architektur die Koordinierung und Steuerung des Programmablaufs, sowie die Verwaltung
der einzelnen Views.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.2. Begriffsklärung
Seite 14 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
2.2.2.
Remote Scripting
Das Interesse an AJAX entstand vor allem aufgrund einer Funktionalität, die sich Remote Scripting
nennt. Dies umfasst die Möglichkeit, einzelne Skripte auf Clientseite in einem Browser laufen zu
lassen, die während der Ausführung Informationen mit einem Server austauschen, neue Funktio-
nen auf einem Server aufrufen können und zurückgelieferte Ergebnisse weiterverarbeiten können,
ohne dass aktuelle Statusinformationen der Seite verloren gehen. Die Erstellung von Webanwen-
dungen basierend auf Remote Scripting umfasst daher die Entwicklung von Clientskripts und
Serverskripts, die beide im Kontext einer einzelnen Webseite logisch vereint werden. Während
Skripts auf Clientseite vorwiegend für die Darstellung und Realisierung eines User Interfaces ein-
gesetzt werden, und so durch schnelle Antwortzeiten für Nutzer sehr lebendig wirken können,
werden Serverscripts vorwiegend zur Realisierung von business logic im backend-Bereich genutzt
(wodurch wiederum die Komplexität von clientseitigen Skripts erheblich reduziert werden kann)
Vor dem Aufkommen der XMLHttpRequest-Idee bestand das Problem, dass zu einem definierten
Zeitpunkt Client- und Serverskripts nicht gleichzeitig ausgeführt werden konnten in dem Sinne,
dass ein Serverskript zwar dynamische Inhalte an einen Webbrowser ausliefern konnte, bei einer
Nutzerinteraktion jedoch ein neuer request an das Skript auf dem Server geschickt wurde, der die
gesamte Seite erneut an den Browser schickte obwohl mitunter nur ein kleiner Teil der Webseite
tatsächlich modifiziert wurde. Allein die Zeit zur Kommunikation mit dem Server erzeugte teilweise
einen merklichen Overhead.
2.2.3.
RIA
Webanwendungen, also Applikationen, die ohne Notwendigkeit einer Installation direkt auf Inter-
netseiten aufgerufen und genutzt werden können, werden im Zuge der Web 2.0 Debatte oftmals
als Rich Internet Applications bezeichnet. Ein wesentliches Merkmal von RIAs ist, dass sich diese
Anwendungen nicht mehr wie traditionelle Internetseiten verhalten, sondern vom Nutzungsverhal-
ten kaum noch von gängigen Desktopanwendungen unterscheiden, das heißt, einem Nutzer
stehen gleiche Interaktionsmöglichkeiten wie Menus, Schaltflächen, Fenster und Nutzerdialoge zur
Verfügung wie er sie bereits seit Jahren von kommerziellen Softwareprodukten kennt. Zusätzlich
kommunizieren RIAs im Hintergrund häufig mit anderen Datenbanken oder Webservices, können
ohne Datenverlust sogar temporär auch offline eingesetzt werden. Im Zusammenspiel der neuen
Techniken entsteht ein neues Nutzungsgefühl, welches oftmals als ,,reichhaltig" umschrieben wird
(das heißt eine Vielzahl von Funktionen bei einer minimalen Antwortzeit bietet) und sich von der
hierarchischen Hypertextnavigation vergangener Jahre unterscheidet.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 15 / 136
André Langer
2.2.4.
Widget
Widget ist ein Kunstwort aus dem Bereich der Softwaretechnik, welches aus den Teilen window
und gadget zusammengesetzt ist, also alle Arten von Geräten (,,Fensterkontrollelemente") zur In-
teraktion umfasst, insbesondere alle graphischen Module, die auf Click-Events reagieren und
manipuliert werden können (Schaltflächen, Trees, Registerkarten, ... ). Dazu können widgets ent-
sprechende Funktionen zugewiesen werden. WIdgets können eigenständig genutzt und in
bestehende Internetseiten eingebunden werden um damit qualitativ hochwertige, intuitiv bedienba-
re GUIs zu schaffen.
2.2.5.
Wrapper
Der Begriff ,,wrapper" ist ein Entwurfsmuster aus dem Bereich der Softwaretechnologie, in dem
definiert wird, wie zwei Komponenten mit unterschiedlichen Schnittstellen oder anderen Inkompati-
bilitäten gemeinsam zusammenarbeiten können.
2.2.6.
Stub
Stubs sind in der Softwareentwicklung einzelne Programmrümpfe, die stellvertretend für eine kon-
krete Implementierung einer Programmkomponente stehen. Dies kann der Fall sein, wenn die
eigentliche Softwarekomponente noch nicht fertig entwickelt ist, oder sich im Gegensatz dazu die
eigentliche Programmkomponente auf einem anderen Rechner befindet, über ein Pseudoobjekt
jedoch wie eine lokale Ressource angesprochen werden kann, um Komplexität zu verbergen.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.3. Definition der Anwendungsdomäne
Seite 16 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
2.3.
Definition der Anwendungsdomäne
In diesem Abschnitt sollen grundlegende Prinzipien vorgestellt werden, deren Behandlung bei
AJAX im Mittelpunkt stehen. Bezug nehmend auf eine Vorstellung unter [Pat06] sei dazu im Fol-
genden auf Web Remoting, Ausführung auf Clientseite, Widgets, visuelle Effekte und
Browseranwendungen eingegangen.
2.3.1.
Web Remoting
Was AJAX in vergangener Zeit so erfolgreich hat werden lassen, ist mutmaßlicherweise das A im
Namen, welches die Möglichkeit repräsentiert, jederzeit asynchrone Anfragen an einen Server zu
schicken, um von diesem spezifische Daten anzufordern. Während dieser Zeit steht die Applikation
nicht zwangsweise still, um auf das Eintreffen der Serverantwort zu warten, sondern kann in der
Regel ohne Einschränkungen weiter bedient werden, was die eigentliche Anfrage an den Server im
Hintergrund transparent werden lässt.
Abbildung 3: traditioneller Ablauf bei der Anforderung von Daten von einem Webserver: Die gesamte Website wird neu gela-
den, im Beispiel: eine Bilderauswahl unter http://www.flickr.com
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 17 / 136
André Langer
Javascript wird also um Funktionen erweitert, die genutzt werden können, um zur Ausführungszeit
direkt HTTP-Anfragen an einen Webserver stellen zu können. Internetbrowser der neuesten Gene-
ration implementieren dazu ein Javascript-Objekt namens XMLHttpRequest, dessen Methoden
nach einer Instantiierung genutzt werden können. Im Microsoft Internet Explorer Version 6 geschah
dies noch über ein eigenes ActiveX-Objekt.
Das Ziel ist dabei in erster Linie, das Neuladen kompletter Internetseiten zu vermeiden im Falle,
dass sich eigentlich nur einzelne Seitenbereiche verändern. Objektiv betrachtet war dieser Ansatz
bereits seinerseits mit frames realisierbar, doch geht der AJAX-Ansatz über die Idee von frames
weit hinaus. So können die asynchron angefragten Daten direkt in Javascript weiterverarbeitet und
letztendlich dank des Dynamic Object Models an beliebiger, nicht vorher explizit per Tag ausge-
zeichneter Stelle in ein HTML-Dokument hineingeladen werden. Darüber hinaus ist nicht nur das
Abfragen von Daten von einem Webserver möglich, sondern ebenso das Senden von Daten an
einen Webserver, was diese Technik universell einsetzbar werden lässt. Mit Daten, die von der
AJAX Engine gesendet und empfangen werden können, ist dabei keine Einschränkung getroffen
worden: Sowohl XML, ein spezielles Serialisierungsformat namens JSON als auch reiner Text
können beliebig übertragen werden. Besonders XML ist für eine Kommunikation mit Webservern
interessant, die bestimmte Dienste anbieten, weswegen an dieser Stelle auf die Thematik Webser-
vices verwiesen sei.
Abbildung 4: Die gleiche Anfrage wie in Abb. 2 mittels AJAX, während die AJAX Engine auf das Eintreffen der HTTP Res-
ponse wartet, kann der Nutzer die ursprüngliche Seite uneingeschränkt weiter benutzen
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.3. Definition der Anwendungsdomäne
Seite 18 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
2.3.2.
DOM-Manipulation
Ein weiteres Grundprinzip von AJAX ist es, jede mögliche Operation von Server- auf Clientseite zu
verlagern. Während es bedingt durch den steigenden Einsatz von Serverskriptsprachen zuneh-
mend dazu kam, dass alle Daten an einen Webserver gesendet wurden, der die Validierung dieser
Daten übernahm und anschließend entsprechende Berechnungen durchführte, soll dies in der
AJAX-Philosophie zunehmend auf Clientseite im Webbrowser stattfinden. Beispielsweise kann die
Überprüfung von eingegebenen Formulardaten direkt auf Clientseite mittels Javascript erfolgen,
wodurch eine sofortige Rückmeldung noch während der Eingabe an den Nutzer gewährleistet wer-
den kann was wiederum direkt dem AJAX-Ansatz entspricht, Ladezeiten zu minimieren und neue
interaktive Interaktionsmöglichkeiten zu schaffen. In Kombination mit bestehenden und lange be-
reits bekannten Techniken von DHTML besitzt der Programmierer alle Möglichkeiten, ein HTML-
Dokument direkt auf Clientseite über das DOM dynamisch zu verändern.
2.3.3.
Widgets
Kein unmittelbarer Bestandteil, aber im Rahmen von AJAX als innovative Technik für das Web 2.0
mit verbreitet hat sich der zunehmende Einsatz von kleinen Bedienassistenten, die dem Nutzer
Informationen interaktiv und grafisch aufbereitet zur weiteren Verarbeitung präsentieren. Exempla-
risch seien an dieser Stelle Infofenster, Baumstrukturen, Navigationstabs oder sortierbare
Tabellenelemente genannt, die in Desktopanwendungen schon lange bekannt sind. Da deren Pro-
grammierung auf Webseiten bis vor kurzem relativ aufwändig war, fand man solche
,,Widgets" bisher höchstens als Spielereien vor. Durch die zunehmende Verbreitung von AJAX und
entsprechender frameworks werden nun in speziellen Applikationsframeworks immer häufiger fer-
tige Funktionen bereit gestellt, mit denen relativ einfach Daten entsprechend aufbereitet und
dargestellt werden können und dies in erprobten Implementierungen, die in der Mehrzahl aller
gängigen Internetbrowser das gleiche fehlerfreie Ergebnis liefern sollten. In diesem Sinne knüpft
der Hype um die AJAX-Technologie an Methoden des Software-Engineerings an, die von Desk-
topapplikationen schon längst bekannt sind: Programmierer werden stärker ermutigt, bereits
bestehende, zuverlässige Lösungen zu nutzen, als in mühevoller Arbeit immer wieder von Neuem
eine eigene Problemlösung implementieren zu müssen.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 19 /136
André Langer
2.3.4.
Visuelle Effekte
Das Gleiche, was bereits in 2.3.3 über die Wiederentdeckung von Bedienassistenten gesagt wurde,
gilt ebenso für sonstige Animationen und Effekte. Nachdem 1998 mit dynamischem HTML (DHTML)
in den Browsern die Möglichkeiten geschaffen wurden, beliebige grafische Effekte auf Webseiten
mittels Javascript zum Einsatz kommen zu lassen, fanden sich seitdem nur wenige sinnvolle An-
wendungen auf Internetseiten im Netz. Immer wieder wurde gewarnt, nicht zu viele von diesen
Effekten einzusetzen, da diese den Nutzer abschrecken könnten, wenn sie übermäßig oft einge-
setzt würden. Darüber hinaus stand mit Adobe (früher Macromedia) Flash eine professionelle
Alternative bereit, grafisch aufwändige Seiten konsistent zu entwickeln.
Durch die aktuellen Entwicklungen rund um das Thema AJAX und die Möglichkeit, direkt auf
Clientseite mit Daten von einem Webserver umzugehen, stieg nun auch wieder das Interesse an
erweiterten Layoutmöglichkeiten mit den Bordmitteln der Internetbrowser. Drag and Drop Effekte
wurden wieder entdeckt, die ohne ein zusätzliches Plugin intuitiv benutzbar sind.
6
Da auch diese
Effekte inzwischen gebündelt in Applikationsframeworks bereitgestellt werden (man sich so nicht
für jeden neuen Effekt erst auf die Suche nach einer passenden Funktionsbibliothek machen muss)
und eine einfache API bieten, ist auch der Einsatz dieser Möglichkeiten in den letzten Monaten
beachtlich gestiegen.
2.3.5.
Browseranwendungen
Überhaupt ist es durch die Idee hinter AJAX
zu einer Reihe neuer Anwendungsangebote
im Internet gekommen, die bis vor kurzem in
dieser Form nicht vorstellbar oder zumindest
schwer realisierbar waren. Neben
interaktiven Terminplanern finden sich
inzwischen leicht zu bedienende Fotoalben
bis hin zu ganzen Textverarbeitungs- und
Tabellenkalkulationsprogrammen.
6
Als Beispiel seien hierfür die Konfigurationsmöglichkeiten auf der personalisierten Startseite von http://www.google.de
genannt
Abbildung 5: Mit AJAX verschwinden allmählich die Grenzen zwi-
schen Desktop- und Webanwendungen, Bsp.:
http://www.bindows.net
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.3. Definition der Anwendungsdomäne
Seite 20 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Die Grenze zwischen klassischen Desktopanwendungen und Webapplikationen scheint durch die
Entwicklungen, die mit der Verbreitung von AJAX eingesetzt haben, mehr und mehr zu verwischen.
Ein gutes Beispiel dafür, was mithilfe von AJAX frameworks (die die zugrunde liegende Komplexi-
tät abstrahieren und einfache Möglichkeiten zur Erstellung von Webanwendungen bereitstellen)
heute bereits möglich ist, zeigt unter anderem die Seite www.bindows.net [Bin06].
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 21 / 136
André Langer
2.4.
Beispiel-Szenarien
Bevor in Kapitel 3 näher auf AJAX frameworks eingegangen wird, sollen im Folgenden zunächst
drei Beispielanwendungen verdeutlichen, wie AJAX zur Lösung bestehender Problemszenarien
genutzt werden kann und wo bei der Programmierung möglicherweise Probleme auftreten können.
Diese Beispiele sollen schließlich im experimentellen Teil als Grundlage genutzt werden, um Krite-
rien für die Evaluierung verschiedener frameworks definieren zu können.
2.4.1.
,,Hello World" example
Als erstes Beispiel soll die klassische ,,Hello World" Ausgabe in einer modifizierten Variante die-
nen, welche die Stärken und Schwächen von AJAX hervorheben soll.
Beschreibung: Die aufgerufene HTML-Datei enthält einen Hyperlink mit der Beschriftung ,,La-
den" sowie zwei ausgezeichnete Ebenen mit den Identifikatoren div1 und div2. Nach Klick auf den
Link ,,Laden" soll in die Ebene div1 der Inhalt einer Datei hello1.txt hineingeladen werden und
gleichzeitig in die Ebene div2 der Inhalt der Datei hello2.txt. Die Dateien hello1.txt und hello2.txt
befinden sich beide im gleichen Dateisystem relativ zu der eigentlichen HTML-Datei, die aufgeru-
fen wurde. hello1.txt enthalte den Schriftzug ,,Hallo Welt1" und hello2.txt den Schriftzug ,,Hallo
Welt2".
Zielsetzung:
-
Verdeutlichen des Einsatzes von AJAX
-
Fallunterscheidung für verschiedene Browser
-
Behandlung paralleler HTTP-Requests
Ein möglicher klassischer Lösungsansatz könnte so aussehen, dass der Inhalt der HTML-Datei
dynamisch mithilfe einer Skriptsprache wie beispielsweise PHP erstellt wird. Listing 1 zeigt eine
mögliche Realisierungsvariante.
Listing 1: "Hello World" - klassische Realisierung mit PHP
(01) <html>
(02) <head><title>Beispiel 1</title></head>
(03) <body>
(04) <a href='<?="$_SERVER[PHP_SELF]?load=1";?>'>Laden</a>
(05) <div id="div1"> <?php if($_GET[load]) readfile("hello1.txt"); ?></div>
(06) <div id="div2"><?php if($_GET[load]) readfile("hello2.txt"); ?></div>
(07) </body>
(08) </html>
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.4. Beispiel-Szenarien
Seite 22 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Um das Beispiel nun mithilfe einer asynchronen Anfrage zu realisieren, ist die gesamte Logik auf
Clientseite zu verlagern und mittels JavaScript und dem XMLHttpRequest-Objekt zu realisieren,
wie beispielsweise Listing 2 zeigt:
7
Sonstige, für die korrekte Funktionalität irrelevante Anweisungen wie Meta- oder Stylesheet-Angaben werden in den ab-
gedruckten Beispielquelltexten nicht abgebildet. Ebenso liege der Fokus zunächst nicht auf Best Practise Empfehlungen,
welche Vor- und Nachteile beispielsweise der Aufruf von Javascript-Funktionen über ,,href='javascript:foo()'" oder als ,,onc-
lick='foo()'" event bietet, sowie mögliche Modifikationen der Quelltexte hinsichtlich Fallback-Möglichkeiten um die
Funktionalität der Internetseite zu gewährleisten, falls bspw. Javascript deaktiviert sein sollte.
Listing 2: Das "Hello World" Beispiel als AJAX-Realisation
7
(01) <html>
(02) <head><title>Beispiel 1</title>
(03) <script type="text/javascript">
(04) function httpRequest(url,target) {
(05)
request = new XMLHttpRequest( );
(06) request.onreadystatechange=function()
{handleResponse(target);};
(07) request.open("GET",url,true);
// dritter Parameter bestimmt synchrones oder
// asynchrones Verhalten
(08) request.send(null);
(09) }
(10) function handleResponse(target) {
// Callback-Funktion
(11)
if(request.readyState == 4)
(12)
if(request.status == 200)
(13)
document.getElementById(target).innerHTML=request.responseText;
(14)
else
(15)
alert("Fehler");
(16) }
(17) function loadtxt() {
(18) httpRequest("hello1.txt","div1");
(19) httpRequest("hello2.txt","div2");
(20) }
(21) </script></head>
(22) <body>
(23) <a href='javascript:loadtxt();'>Laden</a>
(24) <div id="div1"></div>
(25) <div id="div2"></div>
(26) </body>
(27) </html>
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 23 / 136
André Langer
Was die genaue Bedeutung der Befehle und Argumente zur Initialisierung des AJAX-Requests
angeht (Listing 2, Zeilen 05-08 und 11-13), sei an dieser Stelle auf die jeweilige Fachliteratur ver-
wiesen.
Unter Annahme einer fehlerfreien Testumgebung funktioniert Listing 2 unter folgenden zwei Ein-
schränkungen:
-
als Internetbrowser auf Clientseite wurde der Mozilla Browser, Firefox, Safari ab Version
1.3, Opera ab Version 7.6 oder der Internet Explorer ab Version7.0 verwendet
-
Nach Klick auf den Link ,,Laden" enthält sowohl die Ebene div1 als auch die Ebene div2
den gleichen Text, in der Regel ,,Hello World2"
Benutzt man beispielsweise den Internet Explorer 6.0, so bietet dieser zwar ebenfalls einen AJAX-
Support, der jedoch in Form einer ActiveX-Komponente namens ,,Microsoft.XMLHTTP" zur Verfü-
gung steht, was eine Fallunterscheidung nötig macht, in welchem Browser die jeweilige HTML-
Datei nun tatsächlich verarbeitet wird. Weiterhin würden die Nutzer anderer Browser benachteiligt
werden, welche keine AJAX-Unterstützung bereitstellen. Statt einer Fehlermeldung wäre es mög-
lich, dass eine Alternativlösung bereitgestellt wird, die unter Verwendung von iframes die Abfrage
einer Ressource auf einem Webserver realisiert und so das AJAX verhalten nachahmt und vor
dem Nutzer verbirgt (,,fallback-Lösung")
Das zweite Problem entsteht dadurch, dass zwar für jede Anfrage eine eigene Instanz des
XMLHttpRequest-Objekts erzeugt und der Variable request zugewiesen wird, diese jedoch eine
lokale Variable in der gleichen Javascript-Funktion für beide Aufrufe darstellt und die Referenz auf
die erste Instanz in der Variablen request sofort beim zweiten Aufruf der httpRequest()-Funktion
überschrieben wird.
Daneben existieren weitere Fallstricke, die nicht sofort offensichtlich sind. Wird beispielsweise ein
dynamisch generierter Dateiinhalt vom Webserver angefordert, so wird laut HTTP-Spezifikation
ohne weitere Vorkehrungen bei GET-Anfragen der empfangene Dateiinhalt in einem Cache zwi-
schengespeichert. Wird die Datei später ein zweites Mal angefordert, so wird der Inhalt unter
Umständen direkt aus dem lokalen Browsercache geladen, ungeachtet dessen ob sich der dyna-
mische Inhalt auf Serverseite vielleicht geändert hat. Der Internet Explorer implementiert dieses
Verhalten korrekt, was jedoch ohne Beachtung dieser Cachingeffekte zu schwer zu findenden
Problemen führen kann. Eine mögliche Lösung wäre beispielsweise, Requests nur per POST zu
versenden, was nicht immer möglich ist, oder in jedem GET-Request einen eindeutigen Parame-
terwert im Query String der URL zu ergänzen.
Eine verbesserte Version des Listings 2 findet sich in Listing 3.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.4. Beispiel-Szenarien
Seite 24 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Listing 3: Das "Hello World"-Beispiel in einer verbesserten AJAX-Variante
(01) <html>
(02) <head><title>Beispiel 1</title>
(03) <script type="text/javascript">
(04) function httpRequest(request,url,target) {
(05) if(window.XMLHttpRequest)
(06)
request = new XMLHttpRequest( );
(07)
else if (window.ActiveXObject) {
(08)
request=new
ActiveXObject("Msxml2.XMLHTTP");
(09)
if (!request) request=new ActiveXObject("Microsoft.XMLHTTP");
(10)
}
(11) if(request)
{
(12)
request.onreadystatechange=function()
{handleResponse(request,target);};
(13)
request.open("GET",url,true);
(14)
request.send(null);
(15)
} else
(16)
alert(`Ajax not supported');
(17) }
(18) function handleResponse(request, target) {
(19)
if(request.readyState == 4)
(20)
if(request.status == 200)
(21)
document.getElementById(target).innerHTML=request.responseText;
(22)
else
(23)
alert("Fehler");
(24) }
(25) function loadtxt() {
(26)
req1=null; httpRequest(req1," hello1.txt","div1");
(27)
req2=null; httpRequest(req2," hello2.txt","div2");
(28) }
(29) </script></head>
(30) <body>
(31) <a href='javascript:loadtxt();'>Laden</a>
(32) <div id="div1"></div>
(33) <div id="div2"></div>
(34) </body>
(35) </html>
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 25 / 136
André Langer
2.4.2.
Adresskartei
Anwendungsbeispiel 2 sei ein Standardbeispiel, welches bei vielen framework-tutorials als Einfüh-
rungsbeispiel realisiert wird: Eine webbasierte Adresskartei.
Beschreibung: Es ist eine Webanwendung zu realisieren, die das Eintragen von Adressdaten in
und das Abfragen von Kontaktdaten aus einer Adressdatenbank ermöglicht. Die Webseite dafür
bestehe aus insgesamt drei Bereichen. Eine Ebene mit der ID eingabe enthalte ein Formular, des-
sen eingegebene Daten nach Absenden dieses Formulars in die Adressendatenbank übernommen
werden sollen. Die zweite Ebene mit der ID namen enthalte eine Übersicht der Namen aller bereits
in der Datenbank eingetragenen Kontakte. Die dritte Ebene mit der ID info enthalte schließlich
nach Auswahl eines Kontaktes dessen vollständige Adressübersicht aus der Datenbank. Alle Ad-
ressdaten werden in einer MySQL-Datenbank gespeichert. Eine entsprechende ausführbare Datei
auf dem Webserver (im Quelltextbeispiel zugriff.php genannt) im gleichen Verzeichnis auf dem
Server stelle dazu die nötigen Funktionen bereit, um per POST übertragene Formulardaten in die
Datenbank zu übernehmen (Definition beispielsweise durch zugriff.php?cmd=insert).und eine Liste
aller Vor- und Zunamen der in der Datenbank enthaltenen Kontakte bereitzustellen
(zugriff.php?cmd=namen). Um die XML-Unterstützung in AJAX testen zu können, werden die voll-
ständigen Adressdaten eines einzelnen Kontaktes im XML-Format bereitgestellt (daten.xml.php mit
Parameter ?contact=[contactid]).
Zielsetzung:
-
Datenübermittlung via POST
-
Umgang mit Formularen
-
Aufruf einer Funktion auf einem Webserver
-
Umgang mit XML-Daten
-
Behandlung von Zeichensätzen
Des Weiteren soll dieses Beispiel später Möglichkeiten einer Erweiterung der Nutzerfreundlichkeit
durch AJAX frameworks bieten, sodass beispielsweise die Ebene namen durch ein Eingabefeld mit
einer Autocomplete-Funktion ersetzt werden könnte, die Formulardaten während der Eingabe au-
tomatisch validiert werden oder die Ebenen insgesamt beispielsweise als Registerkarten
voneinander getrennt werden können.
Listing 4 zeigt die klassische Realisierung des gestellten Problemfalls mittels PHP. Die Variable
$db sei ein Platzhalter für die konkrete Datenbankbezeichnung und die Funktion mysqldata() abs-
trahiere von den konkreten Anfrageoperartionen. Ebenfalls seien Funktionen zur Herstellung der
Datenbankverbindung und zum Parsen der XML-Daten nicht aufgeführt.
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.4. Beispiel-Szenarien
Seite 26 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
Listing 4: Eine mögliche Implementierung des Beispiels 2 mittels PHP
(01) <?php if(is_array($_POST) && trim($_POST[name])!='') {
(02)
mysql_query("INSERT INTO $db (name, firma, strasse, plz, ort, tel, fax, mobil, email) VALUES
(03)
('$_POST[name]', '$_POST[firma]', '$_POST[strasse]', '$_POST[plz]', '$_POST[ort]', '$_POST[tel]',
(04) '$_POST[fax]', '$_POST[mobil]', '$_POST[email]')");
(05) } ?>
(06) <html>
(07) <head><title>Beispiel 2</title></head>
(08) <body>
(09) <div id='namen' >
(10) <?php if($data=mysqldata("SELECT * FROM $db")) {
(11)
foreach($data as $key=>$value) {
(12)
echo "<a href='$_SERVER[PHP_SELF]?contact=$value[id]'>$value[name]</a><br>";
(13)
}
(14) }
else
(15)
echo "No data available"; ?>
(16) </div>
(17) <div id='info'>
(18) <?php if(trim($_GET[contact])!='') {
(19)
$xml_parser = xml_parser_create();
(20)
xml_set_element_handler($xml_parser, "startElement", "endElement");
(21)
xml_set_character_data_handler($xml_parser,
'cdata');
(22)
$fp=fopen("daten.xml.php?contact=$_GET[contact]","r");
(23)
while ($data = fread($fp, 4096))
(24)
xml_parse($xml_parser, $data, feof($fp));
(25)
xml_parser_free($xml_parser);
(26) } ?>
(27) </div>
(28) <div id='eingabe'>
(29) <form method="POST" action='<?=$_SERVER[PHP_SELF];?>'>
(20) <table>
(31) <tr><td>Name:</td><td><input type='text' name='name'></td></tr>
(32) <tr><td>Firma:</td><td><input type='text' name='firma'></td></tr>
(33) [...]
(34) <tr><td></td><td><input type='submit' name='submit' value='Speichern'></td></tr>
(35) </form>
(36) </div>
(37) </body>
(38) </html>
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 27 / 136
André Langer
Um dieses Beispiel zu ,,ajaxifizieren" ist es nötig, die AJAX-Hilfsfunktionen aus Listing 2 zu erwei-
tern, damit auch Daten via POST gesendet werden können. Des Weiteren steht nun das ,,X" aus
AJAX im Mittelpunkt, wie XML-Daten behandelt und eingebunden werden. Listing 5 zeigt eine bei-
spielhafte Implementierung.
(01) <html>
(02) <head><title>Beispiel 2</title>
(03) <script type="text/javascript">
(04) function setPostContent( ) {
(05) var
PostContent="";
(06)
var frm = document.forms[0];
(07)
var numberElements = frm.elements.length;
(08)
for(var i = 0; i < numberElements; i++) {
(09)
if(i < numberElements-1) {
(10)
PostContent
+=
frm.elements[i].name+"="+
(11)
encodeURIComponent(frm.elements[i].value)+"&";
(12)
} else {
(13)
PostContent
+=
frm.elements[i].name+"="+
(14)
encodeURIComponent(frm.elements[i].value);
(15)
}
(16) }
(17) return
PostContent;
(18) }
(19) function httpRequest(request,reqType,url,async, target,isxml) {
(20) if(window.XMLHttpRequest)
(21)
request = new XMLHttpRequest( );
(22)
else if (window.ActiveXObject) {
(23)
request=new
ActiveXObject("Msxml2.XMLHTTP");
(24)
if (! request) request=new ActiveXObject("Microsoft.XMLHTTP");
(25) }
(26)
if(request) {
(27)
if(isxml)
(28)
request.onreadystatechange=function()
{handleResponseXML(request,target);};
(29)
else
(30)
request.onreadystatechange=function()
{handleResponse(request,target);};
(31)
request.open(reqType,url,async);
(32)
if(reqType=="POST") {
(33)
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
(34)
request.send(setPostContent());
(35)
} else
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2.4. Beispiel-Szenarien
Seite 28 / 136
Technische Universität Chemnitz
Professur Verteilte und Selbstorganisierende Rechnersysteme
(36)
request.send(null);
(37) }
(38) else
(39)
alert("AJAX not supported");
(40) }
(41) function getDocInfo(doc) {
(42)
var root = doc.documentElement.childNodes[0];
(43)
var info = "";
(44) if(root.hasChildNodes())
{
(45)
var
nds=root.childNodes;
(46)
info += "<table>";
(47)
for (var i = 0; i < nds.length; i++) {
(48)
info+= "<tr><td>" + nds[i].nodeName + ":</td><td>";
(49)
if(nds[i].hasChildNodes(
))
(50)
info+=
nds[i].firstChild.nodeValue;
(51)
else
(52)
info+=
"Empty";
(53)
info+="</td></tr>";
(54)
}
(55)
info+="</table>";
(56) }
(57) return
info;
(58) }
(59) function handleResponseXML(request, target) {
(60)
if(request.readyState == 4)
(61)
if(request.status == 200) {
(62)
var myxml = request.responseXML;
(63)
var myhtml = getDocInfo(myxml);
(64)
document.getElementById(target).innerHTML
=
myhtml;
(65)
}
(66)
else
(67)
alert("Fehler
beim
Laden");
(68) }
Evaluierung von AJAX-basierten frameworks für das Web 2.0
2. Grundlegende Betrachtungen
Studienarbeit
Seite 29 / 136
André Langer
Listing 5: Das Adresskarteibeispiel basierend auf AJAX
(69) function handleResponse(request, target) {
(70)
if(request.readyState == 4)
(71)
if(request.status == 200)
(72)
document.getElementById(target).innerHTML
=
request.responseText;
(73)
else
(74)
alert("Fehler
beim
Laden");
(75) }
(76) function getcontactlist() {
(77) var req1=null;
(78) httpRequest(req1,"GET"," zugriff.php?cmd=namen",true,"namen");
(79) }
(80) function getcontactinfo(contactid) {
(81) var req2=null;
(82) httpRequest(req2,"GET"," daten.xml.php?contact=" + contactid,true,"info",true);
(83) }
(84) </script></head>
(85) <body onload='getcontactlist()'>
(86) <div id='namen'></div>
(87) <div id='info'></div>
(88) <div id='eintrag'>
(89) <form action='javascript:var req3=null; httpRequest(req3,
(90) "POST"," zugriff.php?cmd=insert",true,"message"); getcontactlist();'>
(91) <table>
(92) <tr><td>Name:</td><td><input type='text' name='name'></td></tr>
(93) <tr><td>Firma:</td><td><input type='text' name='firma'></td></tr>
(94) [...]
(95) <tr><td></td><td><input type='submit' name='submit' value='Speichern'></td></tr></table>
(96) </form>
(97) </div>
(98) </body>
(99) </html>
Ende der Leseprobe aus 230 Seiten
- nach oben
Details
- Arbeit zitieren
- , 2007, Evaluierung von AJAX-basierten Frameworks für das Web 2.0, Hamburg, Bedey Media GmbH, https://www.diplom.de/document/225267
Ähnliche Arbeiten
Deutschlands größter Sharing Community
Jetzt Zusammenfassungen, Skripte und Klausuren kostenlos downloaden!
Uniturm.de
Ihre Vorteile als Autor
Geld verdienen Für jedes verkaufte Exemplar erhalten Sie Autorenhonorar - bis zu 40%.Kostenlose Buchveröffentlichung
Als eBook-Studie im Original und / oder auf Wunsch zusätzlich als hochwertiges Fachbuch in unserem renommierten Buchverlag.
Renommee als Fachbuchautor
Präsentieren Sie sich als Fachfrau oder Fachmann in Ihrem Fachgebiet und machen Sie sich bekannt.
Persönliche Betreuung
Unser Lektorat wird Sie persönlich betreuen und ist auch telefonisch unter 040-655992-14 erreichbar.
Weltweit im Buchhandel
Ihr Buch ist weltweit im Buchhandel und Online-Buchhandel wie z.B. amazon erhältlich.
Jetzt Autor werden!
Kommentare