Web 2.0 & AJAX (A)sysnchrones (J)avaScript (A)nd (X)ML Michael Hartl und Laurent Steurer

Inhaltsverzeichnis Web 2.0 Einführung AJAX Funktionsweise von AJAX Klassische synchrone Webapplikation Asynchrone AJAX Webapplikation Verwendete Technologien Eigenschaften und Methoden des Objekts AJAX-Frameworks, –Bibliotheken und -IDE Vor- und Nachteile von AJAX Beispiel AJAX Quellen und Schlusswort http://mypage.bluewin.ch/SpiderNet/GoogleMapInfoPointBeispiel.html

Web 2.0 2005 durch Tim O‘Reilly geprägt Oberbegriff für neue interaktive Techniken und Dienste des Internets

Web 2.0 (II) Webtops - Web-Anwendungen rücken den klassischen Desktop- Anwendungen näher (z. B. durch Ajax, UI-Komponenten, GUI-Effekte) RIA (Rich Internet Applications) Re-Inkarnation des Application Service Providings (G-Mail, Writley) Webservices – Dienste welche mittels Web-API angesprochen werden können Beispiele: Google-Map API, Flickr-API Datenaustausch-Formate: XML, SOAP, JSON, XML-RPC, REST Mashups – Webseite nutzt Material von anderen Sites z.B.: WohnungsInserat bindet Landkartendienst ein News-Feeds via RSS/Atom Social Networking, User Generated Content (Jeder kann mitmachen.) Blogs, Foren, Wikis, Tagging Social Tagging (gemeinschaftliches Indizieren) http://www.heise.de/ct/Redaktion/heb/dragdropspiel.html http://www.heise.de/ct/Redaktion/heb/ajax/wiss.html Web-Service: bezeichnet einen Dienst, den der Anbieter so zur Verfügung stellt, dass Programme Informationen automatisch und auf standardisierte Weise austauschen können. Ein Web Service ist nicht zur direkten Benutzung durch einen Menschen gedacht. Beispielsweise kann ich so eine Google-Map in meine Webseite einbinden oder eine Grafik von Flickr (Fotoarchiv) auf meiner Webseite anzeigen. Social Tagging: anhand Beispiel Flickr (Fotoarchiv) hier können die Bilder nach Belieben mit Tags ohne jegliche Einschränkungen versehen werden. So kann dasselbe Bild die Tags „Weihnachten 2001“ und „Heiligabend vor fünf Jahren“ tragen. Vergleiche dazu eine Top-down-Kategorisierung, welche nur die Zuordnung von fix vorgegebenen Typen erlaubt. Hier könnte man einem Foto lediglich einen der vier Werte zuweisen: Ferien ¦ Ausflug ¦ Arbeit ¦ Diverse SOAP: Simple Object Acces Protocol, ermöglicht genaue Beschreibung der transportierten Daten JSON: JavaScript Object Notation Notation von Objekten ähnlich zu Java Script und somit gut geeignet in AJAX-Umfeld REST: Representational Sate Transfer (verwendet strukturierte URL‘s)

Einführung AJAX steigert Interaktivität von Web-Anwendungen Konzept für Datenübertragung zwischen Browser und Server Möglichkeit nur gewisse Teile einer HTML-Seite bei Bedarf nachzuladen. Nicht jede HTTP-Anfrage führt zur Neuübertragung der kompletten Seite Stark geprägt von Jesse James Garrett (2005) Schöpfer des Begriffs AJAX Technologische Grundlagen und Vorgehensweisen bereits vorher bekannt generell unter dem Begriff XMLHttpRequest zusammengefasst Frühe Umsetzungen noch ohne XMLHttpRequest Verfahren erstmals mit IE 5 (1998) Erster erfolgreicher Vertreter: Outlook Web Access Webseiten werden immer interaktiver. Doch ist der Weg zur 100% Interaktivität ist allerdings schwierig. Im Vergleich zu einer GUI-Anwendung, hängt eine Webseite stark hinterher. Wenn eine Webseite dynamische Bereich hat, wird im Normalfall nach einem Userklick, die gesamte Webseite neu geladen. Das dauert lange und man erhält einen unangenehmen Neuaufbau der Webseite. In GUI-Anwendungen wird einfach der entsprechende Bereich ausgetauscht. Das macht sich die Technik AJAX zu nutze. AJAX ist die Abkürzung für Asynchronous JavaScript and XML. Über das Dokument Objekt Model (DOM) wird mit Hilfe von Javascript mehr Interaktivität in die Webseiten gebracht. Einzelne Bereiche werden mit im Hintergrund abgefragten Daten gefüllt. Dadurch braucht die Webseite nicht mehr „refreshed“ werden und das unangenehme Neuaufbauen entfällt.

Funktionsweise von AJAX Modell einer klassischen Webanwendung Modell einer AJAX-Webanwendung Was passiert nun mit AJAX genau? Die Webseite wird von dem Browser normal per HTTP abgerufen und angezeigt. Der Unterschied liegt hier im Detail. Da das A im AJAX für asynchron steht, muss noch etwas im Hintergrund passieren. Während der Benutzer die Formulare in der Webseite ausfüllt, ruf ein weitere Prozess zusätzliche Daten ab. Dieser Prozess wird von dem Javascriptobjekt XMLHttpRequest erfüllt. Dieses Objekt ist zwar noch nicht Standart, aber es wird von den modernen Browsern wie Mozilla, Firefox und Opera unterstützt. Wie immer braucht der Microsoft Internet Explorer eine extra Wurst. Dieser kennt das Objekt nicht. Allerdings gibt es ein ActiveX-Objekt welches die Funktionalität abbildet. If (window.XMLHttpRequest) { requestobj = new XMLHttpRequest(); } else if (window.ActiveXObject) { requestobj = new ActiveXObject(“Microsoft.XMLHTTP”); } Der oben abgedruckte Code schaut ob der Browser das XMLHttpRequest-Objekt unterstützt. Wenn er dieses tut, dann wird eine Instanz von dem Objekte erzeugt. Unterstützt der Browser das Objekt nicht, dann wird versucht ob der Browser ActiveX-Objekte unterstützt. Wenn ja, dann wird von Microsoft das XMLHTTP-Objekt erzeugt und in der Variable requestobj abgelegt. Glücklichere Weise sind die Objekte XMLHttpRequest und das XMLHTTP ähnlich implementiert.

Verwendete Technologien Aufgabe Hypertext Transfer Protocol (HTTP) Datentransfer über ein Netzwerk eXtensible Markup Language (XML) Asynchroner Datenaustausch eXtensible HyperText Markup Language (XHTML) Beschreibung von Seiteninhalten Cascading Style Sheets (CSS) Aussehen der Website Document Object Model (DOM) Repräsentation der Daten bzw. Inhalte JavaScript - Manipulation DOM - dynamische Darstellung XMLHttpRequest-Object Daten asynchron mit Webserver austauschen Bestandteil vieler Browser

Eigenschaften des Objekts Beschreibung onreadystatechange Zeiger auf die Funktion welche aufgerufen wird, wenn sich der readyState ändert. (Read/write) ReadyState Status des Objektes. 0 : Uninitialisiert 1 : Lädt 2 : Geladen aber Header/Status noch nicht bereit 3 : Interaktiv – Daten sind teilweise geladen 4 : Fertig – Alle Daten sind verfügbar. (Read-only). responseBody Represents only one of several forms in which the HTTP response can be returned. Read-only responseStream responseText Represents the response entity body as a string. Read-only responseXML Geparstes XML aus der Antwort. Read-only status HTTP-Statuscode, welcher der Webserver zurück geliefert hat. Read-only statusText Statustext des Webservers. (Read-only)

Methoden des Objekts Methode Beschreibung abort Abbruch der aktuellen Abfrage getAllResponseHeaders Liefert alle Kopfdaten getResponseHeader Liefert den Wert des Server-Response open - Initialisiert die Abfrage. - Definiert die Request-Art (Get/Post) send Führt die Abfrage aus SetRequestHeader Setzt zusätzliche Headerwerte

AJAX-Frameworks und -Bibliotheken Beschreibung Sajax Serverseitig, erlaubt PHP-, Perl- und Python-Funktionsaufrufe aus JavaScript Prototype JavaScript basierende Bibliothek Scriptaculous, Rico Erweitert Prototype um GUI-Effekte Dojo bietet GUI-Effekten (Widgets, Drag&Drop) AjaxAnywhere Java-Framework, integrierbar in JSP und JSF ZK Java-Framework, eventbasiert Ruby on Rails JavaScript basierende Bibliothek mit GUI-Effekten Atlas Serverseitig, Ajax-Framework für ASP.NET 2.0 XOAD PHP-Framework Google Web Toolkit (GWT) Serverseitig, Compiler übersetzt Java in HTML/Javascript OpenAJAX Allianz der Marktgrössen zu einem gemeinsamen Standard Es gibt rund 150 AJAX-Frameworks Davon rund 20 serverseitige Frameworks DHTML-Effekte (FadeIn/Out, Scale, Move, Highlight) Desktop - Controls (Widgets, GUI-Komponenten) - Anordnung in Layouts - Event Listeners (Applikationsfluss ereignisgesteuert) Web HTML-Tags HTTP-Request/Responses

AJAX IDE Java Studio Creator 2 The AJAX Toolkit Framework (ATF) http://www.eclipse.org/atf http://www.alphaworks.ibm.com/tech/ajaxtk Java Studio Creator 2 http://developers.sun.com/jscreator JS Eclipse - InterAKT http://www.interaktonline.com/Products/Eclipse/JSEclipse/Overview

Vor- und Nachteile AJAX ++ Vorteile -- Nachteile Asynchrone Anfragen an den Server Browserabhängigkeit Benutzerfreundliche Anwendungen schlechtere Wartbarkeit Verwendung bestehender Technologien Sicherheit geringere Auslastung der Bandbreite Zurück-Button und History Unterstützung von vielen Programmiersprachen durch Frameworks Möglichkeit Links zu kopieren (Favoriten) JavaScript im Browser deaktiviert

Beispiel AJAX Auf einer Webseite ist ein Knopf und dies Kommen wir nun zu der Erklärung des Beispiels. In dem Javascriptkopf wird versucht, wie schon oben gezeigt, das RequestObjekt zu erstellen. Die Funktion DoIt wird beim Knopfdruck aufgerufen. Der Aufruf instruiert dann das Requestobjekt das es die Datei http://localhost/bank.xml asynchron lädt. Bevor das jedoch passiert wird dem Objekt mitgeteilt welche Funktion aufgerufen werden soll wenn sich der Status des Requestobjekts ändert. Wenn sich der Status ändert wird dann die Funktion AsyncResult aufgerufen. Wenn der Request abgeschlossen ist (Status=4) wird der Webserverresponsecode geprüft. Ist dieser 200 (OK) dann wird das XML-Dokument nach den Objekten Bank durchsucht. Das erste Bankelement wird dann in „Daten“ zwischen gespeichert. Nun wird über das Dom dem Dokumentenelement mit der Id „Ergebnis“ der XML Kontent zugewiesen und über die Ajax-Technik Daten für eine Tabelle nachladen. Zuerst die Daten welche Abgerufen werden sollen.

Quellen AJAX-Grundlagen: Framework Übersicht: Rund um AJAX: http://www.teialehrbuch.de/AJAX1-KK/20823-AJAX-Grundlagen.html Framework Übersicht: http://ajaxpatterns.org/AJAXFrameworks Rund um AJAX: http://ajaxian.com iX Special 1/07 Web 2.0 – Das Kompendium c‘t Ausgabe 14/06 Homepage 2.0 c‘t Ausgabe 5/06 Das Netz erfindet sich neu

Verwendete Technologien Document Object Model (DOM) <html> <head> <title>DOM</title> </head> <body> <h1>Hallo DOM</h1> <p>XML</p> </body> </html>