Lade Inhalt...

Untersuchung von Ajax-Nutzen für Business User, Ajax-Frameworks und Prototyp-Entwicklung eines Ajax-basierten Clients für Geschäftsprozesse und ToDos (Human Tasks)

Diplomarbeit 2007 141 Seiten

Informatik - Internet, neue Technologien

Leseprobe

Inhaltsverzeichnis

Abstract

0 Einleitung

1 Das Web 2.0 und Ajax
1.1 Web 2.0 – Eine Einführung
1.2 Ajax – Eine Einführung
1.3 Möglichkeiten von Ajax anhand vorhandener Applikationen
1.3.1 Google Maps
1.3.2 Google Suggest
1.3.3 IBM BlueMail
1.4 Zusammenfassung

2 Ajax-Grundlagen
2.1 Asynchrone Kommunikation mit Frames und IFrames
2.1.1 Hidden Frame-Technik
2.1.2 Hidden IFrame-Technik
2.1.3 Vor- und Nachteile
2.2 Asynchrone Kommunikation mit XMLHttpRequest
2.2.1 XMLHttpRequest
2.2.2 Vor- und Nachteile
2.3 Datenformate bei der asynchronen Übertragung
2.3.1 HTML
2.3.2 Text
2.3.3 XML versus JSON
2.4 Zusammenfassung

3 Untersuchung von Ajax-Bibliotheken
3.1 Beliebteste Ajax-Bibliotheken
3.1.1 Scriptaculous
3.1.2 Dojo Toolkit
3.1.3 Yahoo! UI
3.1.4 Google Web Toolkit
3.1.5 Microsoft ASP .NET Ajax
3.2 Vergleich der Toolkits
3.2.1 Nutzung der Bibliothek
3.2.2 Behandlung des Vor-/Zurück-Button-, Lesezeichen-Problems
3.2.3 Anzahl, Benutzung und Erweiterbarkeit von Widgets
3.2.4 Abstraktion der Ajax-Kommunikation
3.2.5 Visuelle Effekte
3.2.6 Dokumentation
3.3 Zusammenfassung

4 OpenAjax-Allianz
4.1 Integrationsprobleme von Ajax-Bibliotheken
4.2 Idee von OpenAjax
4.3 Aktivitäten der Allianz
4.3.1 Marketing-/Kommunikationsaktivitäten
4.3.2 Technische Aktivitäten
4.3.3 Arbeitsgruppen
4.4 OpenAjax-Hub
4.5 Eclipse Ajax Toolkit Framework
4.6 Zusammenfassung

5 Analyse
5.1 Websphere Integration Developer
5.1.1 Human Task Webclient
5.1.2 Business Process Choreographer Explorer
5.2 Zielbestimmung
5.3 Funktionale Anforderungen
5.4 Nichtfunktionale Anforderungen
5.4.1 Gebrauchstauglichkeit
5.4.2 Erweiterbarkeit und Wiederverwendbarkeit
5.4.3 Performanz
5.4.4 Zuverlässigkeit
5.4.5 Technische Anforderungen
5.5 Auswahl der Entwicklungsumgebung
5.5.1 Dojo
5.5.2 Datenaustauschformat
5.5.3 Ajax für IBM Websphere Platform Early Program
5.5.4 Websphere Applikationsserver
5.5.5 Rational Software Architekt und Aptana
5.5.6 Microsoft Internet Explorer und Mozilla Firefox
5.5.7 Debugging mit Firebug
5.6 Gliederung in Teilprodukte
5.7 Zusammenfassung

6 Dojo
6.1 Dojo-Architektur
6.2 Aspektorientiertes Programmieren mit Dojo´s Ereignissystem
6.2.1 Ereignisbehandlung mit der connect()-Funktion
6.2.2 Ereignisbehandlung mit der subscribe()-Funktion
6.3 Widgetentwicklung mit Dojo
6.3.1 Nutzung von Widgets
6.3.2 Entwicklung von Widgets
6.3.3 Erweiterung von Widgets
6.4 Zusammenfassung

7 Design
7.1 Design der Benutzeroberfläche
7.1.1 Anfordern und Freigeben einer Human Task
7.1.2 Bearbeitung einer Human Task oder Subtask
7.1.3 Erzeugen einer Subtask
7.1.4 Hilfesystem
7.1.5 Aktualisierung von Daten
7.2 Architekturübersicht
7.3 Wiederverwendbare Komponenten
7.3.1 AccordionContainer
7.3.2 TableController
7.3.3 ComboBox
7.3.4 InputCollector
7.4 Anwendungsspezifische Komponenten
7.4.1 ToDo
7.4.2 Task
7.4.3 Subtask
7.4.4 SliderContainer
7.4.5 Help
7.5 Zusammenfassung

8 Implementierung
8.1 Ordnerstruktur
8.2 Aufbau der Oberfläche
8.3 Objektorientiertes Programmieren mit Dojo
8.4 Kommunikation mit dem Server
8.5 Comet
8.5.1 Grundlagen
8.5.2 Einsatz in diesem Projekt
8.6 Nutzung wiederverwendbarer Komponenten
8.6.1 TableController
8.6.2 InputCollector
8.7 Erweiterung anwendungsspezifischer Komponenten
8.7.1 ToDo-, Task- und Subtaskkomponente
8.7.2 SliderContainer
8.8 Zusammenfassung

9 Zusammenfassung und Ausblick

Abbildungsverzeichnis

Tabellenverzeichnis

Listings

Abkürzungsverzeichnis

Literaturverzeichnis

Anhang
Anhang A: Anforderungen
Anhang B: Gesamtklassendiagramm

Ehrenwörtliche Erklärung

Abstract

Das Web hat in den in den letzten Jahren einen enormen Wandel durchlaufen. Das Schlagwort Web 2.0 ist in aller Munde.

Das Internet wird nicht mehr nur genutzt, um Informationen anzuzeigen, sondern als eine Plattform verwendet, das zur Abwicklung von Geschäften dient oder die Interaktion, Kommunikation und Zusammenarbeit von vielen Nutzern fördert. Beispiele hierfür sind Ebay, Amazon, Google oder Wikipedia. Weitere Bestandteile, die das Web 2.0 kennzeichnen, sind unter anderem Weblogs, RSS-Feeds oder soziales Tagging/Bookmarking.

Das Web 2.0 ermöglicht vollkommen neue Geschäftsmodelle. Ein Unternehmen muss nicht mehr unbedingt ein Produkt neu entwickeln, um eine Aufgabe zu lösen. Es stellt eine Infrastruktur zur Verfügung, in der der Kunde durch Kombination von einzelnen Diensten in einer sogenannten Mashup-Applikation eine Lösung für seine Aufgabe zusammenstellen kann. Weiterhin werden Webseiten angeboten, deren Inhalt nicht durch den Betreiber der Seite, sondern durch die Nutzer der Seite zur Verfügung gestellt werden. Der Betreiber bietet lediglich das Rahmenwerk an, mit dem Informationen auf die Seite hinzugefügt werden können. Das wohl berühmteste Beispiel hierfür ist YouTube.

Um Benutzeroberflächen für verschiedene Web 2.0-Anwendungen zu entwickeln, die eine hohe Gebrauchstauglichkeit und Reaktionsfähigkeit haben, werden auch neue Ansätze zur Realisierung solcher Oberflächen benötigt. Ein solcher Ansatz ist Ajax (Asynchronous JavaScript and XML), der es durch das asynchrone Nachladen von Daten erlaubt, Webanwendungen mit der Funktionaliät von Desktopanwendungen zu verwirklichen.

Diese Arbeit befasst sich mit der Untersuchung des Ajax-Ansatzes. Anhand der Entwicklung eines Webclients zur Bearbeitung von Geschäftsprozessen wird festgestellt, ob Ajax nur ein Internet-Hype oder ein zukunftweisender Ansatz ist, welche Mittel aktuell zur Verfügung stehen, um die Ajax-Entwicklung zu vereinfachen sowie beschrieben, wann der Einsatz sinnvoll und wann er es nicht ist.

0 Einleitung

Der Wandel zum Web 2.0 hatte zur Folge, dass viele Startup-Unternehmen gegründet wurden in der Hoffnung, viele Kunden mit dem Modewort Web 2.0 anzuziehen. Aber auch an vielen großen Unternehmen wie IBM ist dieser Wandel haften geblieben. Beispielsweise bietet der Rational Application Developer 7.0 auch Java Server Faces-Komponenten mit Ajax-Unterstützung an. Neue Produkte werden entwickelt wie Lotus Quickr, einem auf Web 2.0 basierendes kollaboratives Content-Management-System oder Mashup-Plattformen realisiert, in der der Kunde seine Anwendung selbst zusammenstellen kann.

Auch für den IBM Websphere Integration Developer sollen entsprechende Erweiterungen entwickelt werden. In diesem Fall ist das ein Ajax-basierter Webclient zur Bearbeitung von Geschäftsprozessen und Human Tasks.

Ajax ist ein keine neue Technologie, sondern ein Ansatz, den es lange gibt, jedoch erst in den letzten zwei bis drei Jahren mit einem Artikel von Jesse James Garrett von Adaptive Path, der den Begriff geprägt hat, eine breite Akzeptanz in der Webgemeinde gefunden hat. Daten werden im Gegensatz zum traditionellen Browser-Server-Kommunikationsmodell asynchron

übertragen. Das hat den Vorteil, dass eine Serveranfrage nicht blockiert und der Nutzer die Anwendung weiterbedienen kann. Durch diese Eigenschaft entstehen vollkommen neue Möglichkeiten in der Gestaltung von Benutzeroberflächen. Besonderheiten von Ajax-Anwendungen sind beispielsweise Drag & Drop, visuelle Effekte, Textboxen mit Autovervollständigung, Tabellen mit dynamisch nachladenden Daten oder Fehlermeldungen zur Eingabezeit in Textboxen, um nur einige zu nennen.

Ajax kann zu einer höheren Gebrauchstauglichkeit führen, ist aber auch mit einer komplexeren Entwicklung aufgrund der Asynchronität verbunden. Weiterhin befinden sich viele zur Verfügung stehende Bibliotheken in einem noch jungen Status, was den Einsatz zusätzlich erschwert.

Um Überlegungen anzustreben, ob sich die Realisierung der eben erwähnten Erweiterung für den Websphere Integration Developer lohnt, wird in dieser Arbeit ein Prototyp zur Bearbeitung von Geschäftsprozessen und Human Tasks entwickelt. In diesem Client werden die eben genannten Ajax-Besonderheiten eingesetzt und durch verschiedene Tests mit mehreren Anwendern festgestellt, ob die Gebrauchstauglichkeit wirklich gesteigert werden kann oder einige Besonderheiten als reine Spielerei gesehen werden. Anhand der Entwicklung wird untersucht, welchen Stand der Technik Ajax hat und welche Bibliotheken zur Verfügung stehen, um die Ajax-Programmierung zu erleichtern. Dabei wird sich auf die Ajax-Bibliothek Dojo konzentriert, dessen Entwicklung von IBM unterstützt wird.

Um ein besseres Verständnis dafür zu erhalten, was Web 2.0 und Ajax ist, wird in Kapitel 1 beschrieben, welche Eigenschaften Web 2.0 charakterisieren, wie Ajax in das Web 2.0 eingeordnet werden kann und vorhandene Web 2.0-Applikationen vorgestellt. Wie Ajax im Gegensatz zum traditionellen Browser-Server-Modell technisch realisiert wird, wird in Kapitel 2 behandelt. Seit der Veröffentlichung des Artikels von Garrett, stieg die Entwicklung von Bibliotheken enorm an. Welche Funktionalität diese bieten, wird anhand einer Evaluation der fünf Bibliotheken Yahoo! UI, Google Web Toolkit, Dojo Toolkit, Microsoft ASP .NET Ajax und Scriptaculous untersucht. Die Ergebnisse der Evaluation werden als Grundlage dafür benötigt, die für die Entwicklung zu nutzende Bibliothek auszuwählen. Werden mehrere Bibliotheken benötigt, weil eine allein nicht die gewünschte Funktionalität bietet, müssen verschiedene Bibliotheken integriert werden. Die Probleme, die dabei entstehen und wie diese anhand des OpenAjax-Hubs gelöst werden können, werden in Kapitel 4 beschrieben. In Kapitel 5 werden vorhandene Anwendungen für die Bearbeitung von Geschäftsprozessen vorgestellt, die Ziele dieser Arbeit im Detail beschrieben, die funktionalen und nichtfunktionalen Anforderungen an den Prototyp analysiert und die für die Entwicklung des Prototyps zu nutzende Umgebung zusammengestellt. Kapitel 6 konzentriert sich auf Dojo und erläutert die Entwicklung von Oberflächenkomponenten mit dieser Bibliothek. Die Nutzung der Benutzeroberfläche sowie das Software-Design der Anwendung mit den einzelnen Komponenten werden in Kapitel 7 gezeigt. Implementierungsspezifische Details werden in Kapitel 8 erläutert.

Die grundlegenden Formatierungen, die in dieser Arbeit genutzt werden, sind:

Times New Roman - normaler Text

kursiv - wichtige Begriffe

Courier New - Programmcode, Namen von Variablen, Klassen in Textabschnitten, Pfade zu Dateien

fett - Definitionen in Aufzählungen

1 Das Web 2.0 und Ajax

In diesem Kapitel wird der Begriff des Web 2.0 (web-zwei-null) näher erläutert und beschrieben, welche Rolle das Phänomen Ajax dabei spielt. Anschließend werden aktuelle Ajax-Applikationen vorgestellt und ein Überblick darüber gegeben, welche Möglichkeiten es bei der heutigen Entwicklung von Webapplikationen gibt.

1.1 Web 2.0 – Eine Einführung

Lange Zeit war das Veröffentlichen von Webseiten im World Wide Web (WWW) nur Nutzern vorbehalten, die über das notwendige technische Hintergrundwissen verfügten, um die Seiten zu entwerfen und auf einem Server für andere zugänglich zu machen. Die Lösung für dieses Problem kam mit der Entwicklung von sozialer Software am Anfang des 21. Jahr-hunderts.

Unter sozialer Software kann man Dienste im WWW verstehen, die es ermöglichen, soziale Netzwerke mit Hilfe von Webseiten aufzubauen, die die menschliche Kommunikation, Interaktion und Zusammenarbeit fördern. Folgende Dienste sind die bekanntesten [4]:

- Weblogs: Ein Weblog kann als Online-Tagebuch verstanden werden. Die Einträge können entweder durch einzelne oder einer Gruppe von Personen vorgenommen werden. Jeder Eintrag erhält einen Datumsstempel und den Namen des Autors, wobei der aktuelle Eintrag ganz oben im Log über den älteren angezeigt wird. Der Inhalt des Weblogs hängt von der Person ab, der sie führt. So können sich Benutzer, die ein

gemeinsames Interesse haben, gegenseitig auf dem Laufenden halten. Zurzeit stehen mehrere tausend Weblogs zur Verfügung, in denen nicht nur Nachrichten, sondern unter anderem auch Audio- oder Videodateien gespeichert werden können.

- Really Simple Syndication (RSS) Feeds: RSS ist ein Nachrichtenformat, das das Abonnieren von Inhalten einer Webseite oder Teilen der Seite als sogenannte RSS-Feeds erlaubt. Ein RSS-Feed enthält eine XML-Datei (eXtensible Markup Language) zur Inhaltsstrukturierung, aber keine Layoutangaben. Das bedeutet: Ein Benutzer kann Einträge in einem bestimmten Weblog abonnieren. Sobald neue Einträge in das Weblog gemacht werden, können diese in einem RSS-Betrachter, beispielsweise im Firefox-Browser, angezeigt werden. Die Art der Darstellung der Nachricht kann der Benutzer jedoch selber festlegen. RSS-Feeds können nicht nur in Form von Nachrichten, sondern auch wie Einträge in Weblogs als Audio- oder Videodateien angeboten werden, was man auch als Podcasting bezeichnet.
- Wikis: Ein Wiki ist eine Seitensammlung im WWW. Einzelne Seiten können von
jedem Benutzer hinzugefügt und online verändert werden. Die Seiten sind über Links miteinander verbunden. Um möglichst vielen Leuten die Mitarbeit an Wikis zu ermöglichen, sind sogenannte WYSIWYG-Editoren (What-You-See-Is-What-You-Get) im Einsatz, die das Formatieren und Verlinken von Inhalten so einfach wie die Bedienung üblicher Texteditoren machen. Das weltweit größte und bekannteste Wiki ist die Online-Enzyklopädie Wikipedia, das zurzeit in 10 verschiedenen Sprachen zur Verfügung steht.
- Soziales Tagging: Unter sozialem Tagging versteht man das mehrfache Indexieren von Objekten auf einer Webseite, seien es Einträge in Weblogs oder Bilder, mit Hilfe von Schlüsselwörtern, sogenannten Tags. Einem Objekt können mehrere vom menschlichen Gehirn mit diesem Objekt in Verbindung gebrachte Tags zugewiesen werden. Das Objekt wird nicht stur in eine einzige Kategorie eingeteilt. Das erleichtert anderen Benutzern, bestimmte Seiten zu finden. Beliebt sind sogenannte Tagwolken, die mögliche Tags auf einer Seite je nach Popularität in verschiedenen Größen dar-stellen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: Beispiel für eine Tagwolke [7]

Berühmte Webdienste sind zum Beispiel Flickr1, der es ermöglicht, Bilder mit kurzen Kommentaren online zur Verfügung zu stellen und YouTube2, mit dem Videodateien hochgeladen werden können. Mit verschiedenen Tags kann dann ein Bild oder Videoclip gesucht und angeschaut werden.

- Soziales Bookmarking: Mit sozialem Bookmarking ist es möglich, online eine Sammlung von Lesezeichen anzulegen, denen einzeln Tags zugeordnet werden können. So können Lesezeichen von anderen Benutzern gefunden und in die eigene Liste aufgenommen werden, wobei bei jedem Lesezeichen angegeben ist, wie oft dieser schon in andere Listen aufgenommen wurde. Mittels RSS-Feeds ist es möglich, sich beispielsweise über ein bestimmtes Thema die neuesten Lesezeichen zusenden zu lassen. Der bekannteste Dienst für soziales Bookmarking ist zurzeit Delicious3.

Soziale Software ermöglicht das Web, wie es sich Sir Tim Berners-Lee, der Erfinder des WWW, von Anfang an vorgestellt hat. Diese Aussage wird von ihm selbst mit folgendem Absatz bestätigt, mit dem er seinen Weblog im Dezember 2005 einweihte:

„In 1989 one of the main objectives of the WWW was to be a space for sharing information. It seemed evident that it should be a space in which anyone could be creative, to which anyone could contribute. The first browser was actually a browser/editor, which allowed one to edit any page, and save it back to the web if one had access rights. Strangely enough, the web took off very much as a publishing medium, in which people edited offline. Bizarely, they were prepared to edit the funny angle brackets of HTML source, and didn´t demand a what you see is what you get editor. WWW was soon full of lots of interesting stuff, but not a space for communal design, for discourse through communal authorship. Now in 2005, we have blogs and wikis, and the fact that they are so popular makes me feel I wasn´t crazy to think people needed a creative space.” [6]

Das WWW ist nicht mehr nur ein Netz aus Informationen, sondern ein Netz aus Personen mit all ihrem Wissen und sozialen Netzwerken untereinander. In diesem Zusammenhang spricht man von einem Wandel des Web 1.0 zum Web 2.0, der Zukunft des WWW.

Der Begriff entstand 2004 während einer Konferenzvorbereitung der beiden Unternehmen O´Reilly4 und MediaLive International5. Obwohl die Suche des Begriffs bei Google Millionen von Treffern liefert, gibt es verschiedene Meinungen über die Bedeutung. Viele sehen es

lediglich als bedeutungsloses Modewort an, das für Marketingzwecke genutzt wird. Um die Bedeutung des Web 2.0 zu verdeutlichen, beschreibt Tim O´Reilly in seinem Paper What Is Web 2.0 [24] einige Prinzipien, die die nächste Generation des WWW charakterisieren:

- Web als Plattform: Um ein bestimmtes Problem zu lösen, muss keine spezielle Software gekauft werden. Stattdessen ist der Zugriff auf einen entsprechenden Dienst im Web möglich. Das Web dient somit als Programmierplattform und nicht mehr der

lokale Rechner (Desktop als Plattform). Ein Dienst, der von anderen Nutzern zur Verfügung gestellt wird, kann in die eigene Anwendung integriert werden. Dem Nutzer scheint es dabei so, dass der Dienst auf dem lokalen PC (Personal Computer) zur Verfügung steht. Der Zugriff ist somit transparent.

- Nutzung kollektiver Intelligenz: Das Wissen der Menschen ist dezentral verstreut. Über das Web kann dieses Wissen koordiniert und an einem zentralen Punkt gesammelt werden. Das Sammeln von Informationen kann auf verschiedenen Wegen erfolgen. Beispielsweise berücksichtigt Google bei der Suche nach Dokumenten die Anzahl der Verweise auf dieses Dokument, die in anderen Dokumenten im Web vorhanden sind, um ein Page Ranking durchzuführen. Weiterhin spielt die weiter oben

behandelte soziale Software als zentrale Informationsquelle eine wichtige Rolle.

- Daten als Kapital: Der Erfolg einer Web 2.0-Anwendung hängt von der Datenbank ab, auf der sie basiert. Beispiele sind Amazon´s oder Ebay´s Produktdatenbank und Flickr´s Bilderdatenbank. Indem eine Webseite dem Benutzer Informationen zur Verfügung stellt, die andere Unternehmen nicht liefern, kann die Nutzung bevorzugt werden. So ist Amazon Marktführer im Online-Versandhandel, weil es im Gegensatz zu vielen anderen Versandhäusern mehr Informationen zu den Produkten liefert wie Bilder, Inhalts- und Indexverzeichnisse oder Beispielkapitel zu Büchern und sogar Meinungen über das Produkt von anderen Käufern.
- Ende von Software-Release-Zyklen: Software wird nicht mehr als ein Produkt, sondern als Dienst in einer ständigen Betaphase im Web angeboten. Die Nutzer werden so frühzeitig in den Entwicklungsprozess involviert, indem beispielsweise ausgewertet wird, welche neuen Features oft oder selten benutzt werden. Diese Eigenschaft einer Web 2.0-Anwendung hat einen entscheidenden Vorteil gegenüber Desktoplösungen und soll an dieser Stelle in einem Zitat fest gehalten werden:

„Microsoft´s business model depends on everyone upgrading their computing environment every two or three years. Google´s depends on everyone exploring what´s new in their computing environment every day.“ [31]

- Leichtgewichtige Programmiermodelle: Web 2.0-Anwendungen stellen Web Service-APIs (Application Programming Interface) zur Verfügung, die den Zugriff auf Dienste durch andere Anwendungen erlauben. Die Nutzung von REST-Web Services (Representational State Transfer) ist dabei aufgrund der Leichtgewichtigkeit beliebt. Beispielsweise stellen Delicious und Flickr nur REST-Dienste zur Verfügung. Amazon bietet zwar Web Services auch über SOAP (Simple Object Access Protocol) an, jedoch nutzen 95 Prozent der Anwender die REST-Schnittstelle.

Eng verbunden mit dem Begriff des leichtgewichtigen Programmiermodells ist der Begriff des leichtgewichtigen Geschäftsmodells. Ein Dienst muss nicht mehr zwingend von Grund auf neu entwickelt werden. Stattdessen kann er durch Zusammensetzen oder Erweitern von vorhandenen Diensten, die die notwendige Grundfunktionalität enthalten, zur Verfügung gestellt werden. Eine solche zusammengesetzte Webanwendung wird als Mashup bezeichnet. Ein bekanntes Beispiel hierfür ist Housing Maps6, das einfach durch die Verknüpfung von Google Maps (siehe Kapitel 1.3.2) und Craigslist7, einem Dienst für den Zugriff auf Immobilienanzeigen, entstanden ist.

- Rich User Experiences: Die Entwicklung von Webanwendungen mit der Mächtigkeit lokaler PC-Applikationen ist mit Ajax möglich. Benutzeroberflächen können realisiert werden, die in Sachen Gebrauchstauglichkeit mit Desktopanwendungen mithalten können. Auf das Phänomen Ajax und dessen Bedeutung wird in den nächsten Abschnitten näher eingegangen und soll hier nicht weiterbehandelt werden.

Es ist anzumerken, dass das Web 2.0 keine neue Erfindung ist, sondern nichts anderes als das sich weiterentwickelnde Web heutzutage. Es ist das Web, wie man es schon seit seinem Beginn kennt. Allerdings haben sich die Probleme und Technologien und der daraus folgenden Möglichkeiten für die Anwendungsentwicklung in vielerlei Hinsicht geändert, sodass der Begriff Web 2.0 genutzt wird, um einen stetigen Wandel und eine neue Ära des Webs zu kennzeichnen [29]. Die Schlagwörter in der Tagwolke in Abbildung 1 geben noch einmal einen guten Überblick über Prinzipien und aktuelle Technologien.

1.2 Ajax – Eine Einführung

Im letzten Abschnitt wurde beschrieben, dass Ajax ein Mittel ist, um das Web 2.0-Prinzip Rich User Experience umzusetzen. Nun soll erläutert werden, was Ajax überhaupt ist und welche Möglichkeiten durch die Verwendung entstehen.

In einem Interview mit Sebastian Meyen, Chefredakteuer des Java-Magazins8, sagte einmal Stefano Mazzocchi, der Erfinder des Java/XML-basierenden Cocoon-Frameworks9, dass die Webentwicklung die Informationstechnologie um mindestens zehn Jahre zurückgeworfen hätte, weil Entwickler nur die Möglichkeit haben, mit dem primitiven Anfrage/Antwort-Modell aus den Zeiten statischer HTML-Seiten (Hypertext Markup Language) zu arbeiten ([38], S. 4). Dieses Modell zeichnet sich besonders durch folgende Eigenschaften aus:

- Synchronität : Wenn eine Anfrage als Folge einer Benutzerinteraktion mit der Anwendung an den Server gesendet wurde, kann der Benutzer die Webseite solange nicht bedienen, das heißt, die Seite ist solange blockiert, bis die Antwort vom Server empfangen wurde. Die Browser-Server-Kommunikation ist für den Benutzer somit nicht transparent.
- Laden der kompletten Seite : Die Antwort vom Server enthält jedes Mal die komplette HTML-Seite, alle Bilder sowie die Cascading Style Sheets (CSS), auch wenn sie nur minimale Änderungen im Vergleich zu der aktuell angezeigten Seite aufweist.

In diesem klassischen Modell kann der Benutzer die Anwendung erst dann weiterbedienen, nachdem die Seite empfangen und im Browser vollständig geladen wurde (siehe Abbildung 2). Falls der Server länger brauchen sollte, um die neue Seite als Antwort zu erzeugen und die Seite viele Bilder enthält oder beides, kann es sein, dass der Benutzer mehrere Sekunden warten muss bis die neue Seite geladen wurde. Diese Eigenschaften machten es lange unmöglich, Webanwendungen mit der Gebrauchstauglichkeit und Performanz von herkömmlichen Desktopapplikationen zu entwickeln.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2: Das klassische Browser-Server-Kommunikationsmodell [12]

Diese Tatsache änderte sich 1997, als das WWW-Konsortium10 (W3C) das Frameset- und IFrame-Tag in die HTML 4.0-Spezifikation aufgenommen hatte. Mit diesen war es möglich, eine asynchrone Browser-Server-Kommunikation zu simulieren. Microsoft entwickelte 2001 ein ActiveX-Objekt mit der Bezeichnung XMLHttp und ging einen Schritt weiter. Daten konnten programmatisch per JavaScript an den Server gesendet und asynchron empfangen werden ([33], S. 2-4). Mozilla, Opera und Safari folgten mit einer nativen Implementierung der Funktionalität des Objektes für ihren Browser unter dem Namen XMLHttpRequest (XHR) als JavaScript-Objekt. Das XMLHttpRequest-API wurde dieses Jahr vom W3C standardisiert [43]. Wie die einzelnen Techniken für eine asynchrone Browser-Server-Kommunikation eingesetzt werden, wird in Kapitel 2 behandelt.

Obwohl der Ansatz einer asynchronen Datenkommunikation zwischen Client und Server seit mehreren Jahren existiert, stieg die Verwendung erst im Februar 2005 schlagartig an, als Jesse James Garrett, Mitbegründer der Firma Adaptive Path11, einen Artikel über diesen Ansatz verfasste und ihn mit Ajax bezeichnete:

„Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.” [12]

Ajax ist genau genommen keine Technologie und vor allem keine neue Idee. Es ist ein Ansatz, der auf verschiedenen seit langem vorhandenen Technologien wie HTML, CSS, XML, XSLT (eXtensible Stylesheet Language Transformations), JavaScript, XMLHttpRequest und DOM (Document Object Model) beruht, um eine asynchrone Browser-Server-Kommuni-kation zu ermöglichen, in der nicht die komplette Seite, sondern nur die benötigten Daten übertragen werden.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3: Das Ajax Browser-Server-Kommunikationsmodell [12]

Anders als im klassischen Modell wird eine HTTP-Anfrage (HyperText Transfer Protocol) im Ajax-Modell nicht direkt an den Server gesendet, sondern an eine dazwischen geschaltete mittlere Schicht im Browser delegiert, die die Kommunikation mit dem Server steuert (siehe Abbildung 3). Diese Schicht wird als Ajax-Engine bezeichnet. Die Engine ermöglicht das Validieren oder Verändern von Daten im Speicher und sogar das Navigieren, ohne eine Verbindung zum Server aufzubauen. Falls Daten vom Server benötigt werden, führt die Engine eine asynchrone Anfrage durch, ohne dass die Benutzerinteraktion mit der Anwendung unterbrochen wird.

Der Name Ajax ist irreführend. Zum einen können Daten nicht nur im XML-Format, sondern auch in jedem Format, das von der Client- und Serverseite interpretiert werden kann, inklusive Text-, HTML- oder auch JSON-Format (JavaScript-Objektnotation), ausgesprochen wie der englische Name Jason), gesendet werden [17]. Zum anderen können diese Daten auch über HTTPS (HTTP Secure) und müssen nicht über HTTP gesendet werden. Die Ajax-Engine selber ist ein JavaScript-Objekt. Es kann in Form der genannten Techniken mit Framesets und IFrames oder mit dem XMLHttpRequest-Objekt realisiert werden. Diese Techniken werden in Kapitel 2 näher erläutert.

Seit der Veröffentlichung des Artikels von Garrett wurde das Web regelrecht mit Artikeln und Ajax-Anwendungen überflutet. Bücher wurden geschrieben. Viele begannen mit der Entwicklung von Softwarebibliotheken, um die Entwicklung mit Ajax zu erleichtern. In diesem Jahr wurde es sogar zum zweiten Mal in Folge zur Webtechnologie des Jahres gewählt [15].

1.3 Möglichkeiten von Ajax anhand vorhandener Applikationen

In diesem Abschnitt werden vorhandene Ajax-Anwendungen vorgestellt, um einen Überblick darüber zu geben, welche Möglichkeiten der Einsatz von Ajax mit sich bringt.

1.3.1 Google Maps

Mit Google Maps12 ist es möglich, Orte, Hotels, Restaurants oder andere Objekte weltweit zu suchen und deren Position auf einer Landkarte oder einem Bild von der Erdoberfläche, das von einem Satelliten geliefert wird, anzuzeigen.

Der Benutzer hat die Möglichkeit, mit der Maus durch einfaches Ziehen in die jeweilige Richtung, die Karte zu bewegen. Weiterhin kann das Scrollrad benutzt werden, um in die Karte hinein oder aus der Karte heraus zu zoomen. So kann von einer globalen Ansicht der Welt in eine Sicht skaliert werden, in der man alle Straßen einer Ortschaft besichtigen kann. Es ist auch möglich, die Karte über ein Steuerungselement zu bewegen und zu zoomen ([8], S. 26).

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 4: Google Maps

Die Karte besteht aus kleinen Kachelbildern. Wird die Karte bewegt, so werden nur die nötigen Kacheln nachgeladen, was dazu führt, dass die Anwendung flüssig ohne erneutes Laden der kompletten Seite so bedient werden kann als wäre sie eine Desktopapplikation.

1.3.2 Google Suggest

Google Suggest13 war eine der ersten Ajax-Anwendungen. Es bietet die gleiche Benutzeroberfläche zum Eingeben des Suchbegriffs wie man es von der normalen Google-Seite kennt.

Das Besondere daran ist jedoch, dass zur Eingabezeit Vorschläge für den Suchbegriff angezeigt werden, die mit dem eingegeben Text beginnen. Während der Eingabe oder beim Löschen von Zeichen wird nur der Bereich mit den vorgeschlagenen Begriffen aktualisiert, ohne dass die komplette Seite neu geladen wird.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 5: Google Suggest

1.3.3 IBM BlueMail

BlueMail ist ein IBM-interner Emailclient. Emails, die normalerweise mit der Desktopapplikation Lotus Notes abgerufen werden, können so auch über einen Browser gelesen und verwaltet werden.

Wird eine Email selektiert, so wird dessen Inhalt dynamisch nachgeladen und angezeigt. Neue Ordner können angelegt werden, wobei nur die benötigten Teile der Benutzeroberfläche aktualisiert werden. Ein besonderes Feature ist das Zuordnen von Emails zu verschiedenen Ordnern. Mehrere Emails können selektiert und dann wie man es nur von Desktopapplikationen gewohnt ist, per Drag & Drop (DnD) in den jeweiligen Ordner kopiert werden. Bei Programmstart wird nicht die komplette Tabelle geladen, sondern nur so viele Emails, die notwendig sind, um den sichtbaren Bereich der Tabelle zu füllen. Beim Scrollen der Tabelle nach unten oder oben werden dann die Emails dynamisch nachgeladen, was als Lazy Loading

bezeichnet wird. Verglichen dazu, müsste man im traditionellen Modell schon bei Programmstart alle Emails laden, auch wenn sie nicht im sichtbaren Bereich liegen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 6: IBM BlueMail Email-Client

1.4 Zusammenfassung

Die Anforderungen an das WWW steigen ständig. Das Web ist nicht mehr nur ein Mittel, um sich Informationen zu beschaffen, sondern dient dem Aufbau sozialer Netzwerke, in denen die Menschen kommunizieren und interagieren. Die Mittel, um solche Netzwerke zu realisieren, sind unter anderem Weblogs, RSS-Feeds, Wikis, soziales Tagging oder soziales Bookmarking, die unter die Kategorie von sozialer Software einzuordnen sind.

Für den Wandel des Webs von einem Netz zur reinen Informationsverbreitung zu einem interaktiven Netzwerk wurde von dem Unternehmen O´Reilly der Begriff des Web 2.0 geschaffen. Nach O´Reilly wird das Web 2.0 dabei durch Prinzipien wie das Web als Plattform, die Nutzung kollektiver Intelligenz, Daten als Kapital, das Ende von Software-Release-Zyklen, leichtgewichtige Programmiermodelle und Rich User Experiences charakterisiert.

Eine Rich User Experience, die man von Desktopapplikationen kennt, kann dabei erreicht werden, indem man vom traditionellen Browser-Server-Kommunikations-Modell, in dem eine Webseite synchron nach jeder Benutzerinteraktion vollständig neu geladen wird, abweicht und asynchron nur die Daten sendet, die wirklich benötigt werden.

Um Daten asynchron zu übertragen, kann zum einen ein Frame oder IFrame zur Kommunikation mit dem Server genutzt werden. Zum anderen kann das XMLHttpRequest-Objekt, dass zurzeit in allen bekannten Browsern implementiert ist und für die asynchrone Browser-Server-Kommunikation entwickelt wurde, verwendet werden.

Obwohl diese Techniken schon lange vorhanden sind, stieg die Nutzung erst schlagartig an, nachdem Jesse James Garrett von Adaptive Path diesem Ansatz den Namen Ajax gab, was für Asynchrones JavaScript + XML steht. Dabei können die Daten nicht wie vom Namen her vermutet nur im XML-Format, sondern auch unter anderem als Text, im HTML- oder JSON-Format über HTTP und HTTPS gesendet werden.

Bekannte Ajax-Applikationen, die typische Ajax-Features wie Autovervollständigung von Textboxen, Drag & Drop oder visuelle Effekte enthalten, sind Google Maps, Google Suggest oder IBM BlueMail.

2 Ajax-Grundlagen

Dieses Kapitel beschreibt die technischen Grundlagen von Ajax. Dabei wird zuerst die Realisierung der asynchronen Browser-Server-Kommunikation mit Framesets und IFrames und anschließend mit dem XMLHttpRequest-Objekt erläutert. Danach folgt eine Beschreibung der Formate, die benutzt werden können, um Daten zwischen Browser und Server auszutauschen.

2.1 Asynchrone Kommunikation mit Frames und IFrames

Ein Frame ist ein Teilbereich einer Webseite, in dem eine andere Webseite dargestellt werden kann. Frames einer Webseite werden zu einem sogenannten Frameset zusammengefasst. Ein Frame wird statisch in einer HTML-Datei definiert. Im Gegensatz dazu sind Iframes auch Frames, die jedoch dynamisch zur Laufzeit mit JavaScript erzeugt werden können.

2.1.1 Hidden Frame-Technik

Jedes Frame kann eine separate von den anderen Frames unabhängige Anfrage an den Server senden. Die Benutzerinteraktion ist nur mit dem Frame unterbrochen, das die Anfrage gesendet hat. Alle anderen Frames werden nicht blockiert. Diese Eigenschaft kann dazu eingesetzt werden, eine asynchrone Browser-Server-Kommunikation durch die sogenannte Hidden Frame -Technik zu realisieren. Mit dieser Technik wird in der Seite ein Frame mit der Höhe und Breite von null Pixeln eingebettet und somit unsichtbar gemacht. Die einzige Aufgabe des versteckten Frames ist die Kommunikation mit dem Server.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 7: Asynchrone Client-Server-Kommunikation mit Hidden Frames ([33], S. 23)

Wird diese Technik umgesetzt, so erzeugt eine Benutzerinteraktion, die Daten vom Server benötigt, nicht eine direkte Anfrage an den Server, wie es in einer üblichen Webseite der Fall ist, sondern ruft eine JavaScript-Funktion des versteckten Frames auf. Die Seite wird nicht blockiert und der Nutzer kann die Anwendung weiterbedienen. Die eigentliche Anfrage an den Server wird dann vom versteckten Frame gesendet, der auch für das Empfangen der Antwort zuständig ist. Die Antwort vom Server enthält eine Webseite mit den benötigten Daten. Um diese Daten an den Frame weiterzuleiten, von der aus die Benutzerinteraktion erfolgt ist, enthält die Antwortseite einen window.onload-Ereignisbehandler. Nach vollständigem Laden des versteckten Frameinhalts, wird eine JavaScript-Funktion des sichtbaren Frames aufgerufen und die Daten übergeben, die danach weiterverarbeitet werden können ([33], S. 22-31). Abbildung 7 veranschaulicht noch mal die einzelnen Schritte.

2.1.2 Hidden IFrame-Technik

Der Nachteil des Frame-Ansatzes für die asynchrone Kommunikation ist, dass man gezwungen ist, einen Frameset innerhalb der HTML-Seite zu nutzen und schon bei der Gestaltung der Seite den versteckten Frame im HTML-Code berücksichtigen muss. Die Flexibilität für spätere Änderungen ist somit nicht mehr gegeben. Im Gegensatz dazu kann ein IFrame in einer Seite ohne Framesets genutzt werden. Es kann entweder in den HTML-Code eingebettet oder dynamisch mit JavaScript erzeugt werden. Die asynchrone Kommunikation wird dann in der gleichen Art und Weise wie mit versteckten Frames realisiert. Versteckte Frames werden kaum noch eingesetzt. Der Einsatz von versteckten IFrames wird bevorzugt ([13], S. 163-165).

2.1.3 Vor- und Nachteile

Weil der Browser nicht weiß, dass es sich um einen versteckten Frame/IFrame handelt, speichert es alle Antworten vom Server, die auf eine Anfrage dieses Frames/IFrames gesendet wurden, trotzdem in der Browserhistorie. Der große Vorteil hiervon ist, dass der Benutzer somit die Möglichkeit hat, mit den Vor-/Zurück-Buttons zwischen den einzelnen Seiten zu wechseln. Anzumerken ist jedoch, dass neben Browsern wie der Internet Explorer, die die komplette Historie für Frames/IFrames speichern, es auch welche gibt, die keine abspeichern, wie der Safari-Browser.

Ein großer Nachteil von Frames/IFrames ist, dass man sich darauf verlassen muss, dass eine korrekte Seite vom Server zurückgeliefert wird. Wenn die Seite im versteckten Frame/IFrame aufgrund von Fehlern nicht geladen werden kann, so wird das dem Benutzer nicht angezeigt, da sich die sichtbare Seite solange nicht ändert bis die entsprechende JavaScript-Funktion im sichtbaren Frame/IFrame aufgerufen wurde. Es ist möglich, die Zeit anzugeben, in der die Funktion aufgerufen werden muss. Wenn diese abläuft, könnte eine Nachricht im sichtbaren Frame/IFrame angezeigt werden. Jedoch ist dieses nur ein Umgehen des Problems und schafft keine wirkliche Lösung. Man hat zu wenige Informationen über die HTTP-Anfrage selbst.

2.2 Asynchrone Kommunikation mit XMLHttpRequest

Die Hidden Frame/IFrame-Technik simuliert nur eine asynchrone Browser-Server-Kommuni-kation. Anders ist es bei dem XMLHttpRequest-Objekt. Es wurde entwickelt, um eine Serveranfrage von jeder Stelle des Programms aus zu initiieren.

2.2.1 XMLHttpRequest

Um mit dem Server zu kommunizieren, muss zunächst einmal ein XMLHttpRequest-Objekt erzeugt werden. Weil Microsoft in den Browserversionen bis einschließlich Version 6 die Kommunikation über ein ActiveX-Objekt mit dem Namen XMLHttp steuert und Browser wie Mozilla, Opera, Safari oder der Internet Explorer 7 das XMLHttpRequest-Objekt als natives JavaScript-Objekt implementiert haben, kann zur Erzeugung folgendes Factory-Entwurfs-muster genutzt werden ([13], S. 27-29):

[...]


1 Flickr: <http://flickr.com>

2 YouTube: <http://youtube.com>

3 Delicious: <http://del.icio.us.com>

4 O´Reilly: <http://www.oreilly.com>

5 Media Live International: <http://www.cmp.com>

6 Housing Maps: <http://www.housingmaps.com>

7 Craigslist: <http://sfbay.craigslist.org>

8 Javamagazin: <http://javamagazin.de>

9 Apache Cocoon Framework: <http://cocoon.apache.org>

10 W3C: <http://www.w3.org>

11 Adaptive Path: <http://www.adaptivepath.com>

12 Google Maps: <http://maps.google.de/maps>

13 Google Suggest: <http://labs.google.com/suggest>

Details

Seiten
141
Jahr
2007
ISBN (eBook)
9783638847056
Dateigröße
2.1 MB
Sprache
Deutsch
Katalognummer
v81175
Institution / Hochschule
Hochschule Fulda
Note
1.0
Schlagworte
Untersuchung Ajax-Nutzen Business User Ajax-Frameworks Prototyp-Entwicklung Ajax-basierten Clients Geschäftsprozesse ToDos Tasks)

Autor

Teilen

Zurück

Titel: Untersuchung von Ajax-Nutzen für Business User, Ajax-Frameworks und Prototyp-Entwicklung eines Ajax-basierten Clients für Geschäftsprozesse und ToDos (Human Tasks)