Ausgabe Deutsche Ajax Java - download.e-bookshelf.de fileAjax on Java bei O’Reilly Media, Inc. Die...

O’REILLY

Deutsche

Ausgabe

Steven Douglas OlsonDeutsche Bearbeitung von Lars Schulten

Vom einfachen XMLHttpRequest-Objekt bis zum Google Web Toolkit

Ajaxon JavaTMund

Beijing · Cambridge · Farnham · Köln · Paris · Sebastopol · Taipei · Tokyo

Ajax und Java

Steven Douglas Olson

Deutsche Übersetzung und Bearbeitung vonLars Schulten

Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen.Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung,Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Kommentare und Fragen können Sie gerne an uns richten:O’Reilly VerlagBalthasarstr. 8150670 KölnTel.: 0221/9731600Fax: 0221/9731608E-Mail: [email protected]

Copyright der deutschen Ausgabe:© 2007 by O’Reilly Verlag GmbH & Co. KG1. Auflage 2007

Die Originalausgabe erschien 2007 unter dem TitelAjax on Java bei O’Reilly Media, Inc.

Die Darstellung eines Lisztaffens im Zusammenhang mit dem Thema Ajax und Java ist ein Warenzeichen von O’Reilly Media, Inc.

Bibliografische Information Der Deutschen BibliothekDie Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Übersetzung und deutsche Bearbeitung: Lars Schulten, KölnLektorat: Christine Haite, KölnFachliche Unterstützung: Simon Effenberg, Berlin & Daniel Lehmann, Sankt AugustinKorrektorat: Friederike Daenecke, ZülpichSatz: Finn Krieger, WuppertalUmschlaggestaltung: Karen Montgomery, BostonProduktion: Andrea Miß, KölnBelichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de

ISBN-13 978-3-89721-718-8

Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

This is the Title of the Book, eMatter EditionCopyright © 2007 O’Reilly & Associates, Inc. All rights reserved.

Rechts

Max.Linie

Max.Linie

Für Erin, meine beste Freundin und Frau.

Danke, dass Du an mich glaubst.


Links

Max.Linie

Max.Linie


First

Max.Linie

Max.Linie

| VII

Inhalt

Einleitung IX

1 Einrichtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Tomcat installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Ant installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 JavaScript für Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Die Anwendung erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Das Beispiel ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3 Ein einfaches Ajax-Servlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Die Ajax-Anwendung erstellen und verteilen . . . . . . . . . . . . . . . . . . . . . . . . 18Das Beispiel ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4 XML und JSON für Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Der Zeichendekodierer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Ein einfaches XML-Dokument einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . 23Zurück zum Client: Das XML auslesen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Die Anwendung erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Die Anwendung auf Tomcat ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Daten mit JSON übergeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

5 Nützliche Daten erhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Formulareingaben mit Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Ein Vorschlagsfeld aufbauen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53


Links

Max.Linie

Max.Linie

VIII | Inhalt

6 Ajax-Bibliotheken und Toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Das Dojo Toolkit verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Das Rico Toolkit verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73DWR mit Ajax verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Drag-and-Drop mit Scriptaculous und Prototype . . . . . . . . . . . . . . . . . . . . . 85

7 Ajax-Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Eine Tag-Bibliothek erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Tag-Bibliotheken von Dritten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

8 Ajax auf Struts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Struts-Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Struts über DWR mit Ajax ergänzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Ajax mit Struts: Was haben wir hier gelernt? . . . . . . . . . . . . . . . . . . . . . . . . 173

9 JavaServer Faces und Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174Der JSF-Lebenszyklus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Eine eigene JSF-Komponente schreiben . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176Ein eigenes JSF-Tag entwickeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181JSF-Eingaben durch Erweiterung von HtmlInputText verarbeiten . . . . . . . 190Die JSF-Unterstützung für Ajax schreiben . . . . . . . . . . . . . . . . . . . . . . . . . . 191Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

10 Google Web Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Erste Schritte mit dem GWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Die Anwendung debuggen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201Die Anwendung ausarbeiten: Der Client . . . . . . . . . . . . . . . . . . . . . . . . . . . 205Den Service für den Client anbieten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210ZipCodes mit dem Service testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215GWT-Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223


| IX

First

Max.Linie

Max.Linie

Einleitung

»Echt cool! Schaut euch das mal an!«, sagte ich zu einer Gruppe Kollegen.

»Was ist das?«, fragte einer von ihnen.

»Google Maps! Das nutzt Ajax«, antwortete ich.

»Was ist Ajax?«

»Das steht für Asynchronous JavaScript and XML. Damit kann man von einerWebseite eine Anfrage an den Server machen, Daten erhalten und anzeigen, ohnedarauf zu warten, dass der Benutzer auf einen Absenden-Button klickt und die Seiteaktualisiert wird.«

»Wow! Das könnte meiner Anwendung das Antwortverhalten einer Desktop-Anwendung spendieren!«

Bisher mussten sich Webentwickler zwischen Thin-Client-Webanwendungen undDesktop-Anwendungen entscheiden, für die eine Installation erforderlich ist. MitAjax kann man Webanwendungen aufbauen, die das Ansprechverhalten von Desk-top-Anwendungen haben, ohne dass man sich die Mühe machen muss, die Soft-ware des Endbenutzers auf dem aktuellen Stand zu halten. Das bietet Webentwick-lern wirklich eine wunderbare Möglichkeit, schnell reagierende und interaktiveAnwendungen zu schreiben.

Ajax: Etwas GeschichteIm Anfang war HTML, und die Welt sah, dass es gut war. Bald danach kamenWebanwendungen, und die Welt war erfreut über die Möglichkeit, mit Daten inter-agieren zu können. Es gab Suchmaschinen, Online-Bezahldienste, Aktienhandels-Sites, Online-Shops und vieles, vieles mehr.

Was aber fehlte in der Welt der Webanwendungen? Die Antwort ist: Ansprechver-halten. Es war das Jahr 1984, als ich meine ersten intuitiven Interaktionen miteinem Computer erlebte. Ich war auf dem College, und im Studentenwohnheim


X | Einleitung

Links

Max.Linie

Max.Linie

gab es ein Arbeitszimmer, das gerade mit dem neuen Produkt von Apple Computer,Inc. ausgestattet worden war: dem Apple Macintosh. Diese Computer hatten aufdie Studenten eine unglaubliche Anziehungskraft. Es gab nur ein einziges Pro-gramm, MacWrite, aber das reichte mir. Ich verlor mich sofort an die freundliche,leicht zu verwendende Oberfläche, die mir die MacWrite-Anwendung bot, undebenso ging es vielen anderen Studenten.

Bis vor Kurzem waren browserbasierte Anwendungen nicht dazu in der Lage, Be-nutzern das gleiche Erlebnis zu bieten, das sie von Desktop-Anwendungen gewohntwaren. Klar. Einige Webanwendungen erreichen das mit einem Rich-Client. AberRich-Clients verlangen eine Mehrleistung, die in browserbasierten Anwendungennicht gegeben ist. Aber wenn es um die Leichtigkeit der Verteilung und um die Ak-tualität der beim Benutzer installierten Versionen geht, ist eine browserbasierte An-wendung durch nichts zu schlagen. Das Ideal wäre also eine browserbasierteAnwendung, die sich wie ein Rich-Client verhält.

Schauen Sie sich Ajax an.

Einige von Ihnen wissen wahrscheinlich, dass es die Ajax-Technologie schon eineWeile gibt und dass sie nicht immer Ajax genannt wurde. Der Begriff Ajax (Asyn-chronous JavaScript and XML) wurde von Jesse James Garrett von Adaptive Path inseinem Artikel »Ajax: A New Approach to Web Applications« (http://www.adaptivepath.com/publications/essays/archives/000385.php) geprägt. Nachdem die-ser Artikel erschienen war, gab es eine Menge Kommentare zu dem Umstand, dassdas Verfahren nicht wirklich »neu« war. Viele Entwickler hatten schon asynchroneAnwendungen erzeugt, bevor XMLHttpRequest verfügbar wurde. Trotz ihrer Mängelkonnten Java-Applets Webanwendungen bieten, die sich mehr wie Desktop-An-wendungen anfühlten. Flash-Anwendungen konnten das ebenfalls.

Was hat sich also geändert? Was ist das Tolle daran? Na, jetzt haben wir endlicheinen Namen für das Verfahren. Das scheint vielleicht nicht viel zu sein, gibt unsaber eine gemeinsame Gesprächsgrundlage. Wie uns Entwurfsmuster Namengeben, wenn wir über Programmiertechniken sprechen, so sagt uns der Name Ajaxsofort, welche Programmiertechnik verwendet wird.

Seit Garretts Artikel veröffentlicht wurde, hat es eine Menge Diskussionen darübergegeben, wie man Ajax verwenden soll, welche Möglichkeiten es bietet und welcheMängel es hat. Das Erscheinen von Artikeln, Werkzeugen und Informationen zuAjax hat das Interesse an Ajax förmlich explodieren lassen. Während mehr undmehr Informationen zu Ajax verfügbar werden, werden Ajax-Techniken und dieVerwendung von Ajax zu gängigen Programmiertechniken und werden sich, wäh-rend wir schreiben, zu dem entwickeln, das Benutzer von Webanwendungen erwar-ten.

Das ist die Macht eines Namens.

http://www.adaptivepath.com/publications/essays/archives/000385.php

http://www.adaptivepath.com/publications/essays/archives/000385.php


Einleitung | XI

Rechts

Max.Linie

Max.Linie

Ajax verkleinert die Lücke zwischen einer Desktop-Anwendung und einer schlan-ken, browserbasierten Anwendung. Dieses Buch wird Sie in Ajax einführen, indemes illustriert, wie man Ajax-Anwendungen in einer Java-Umgebung auf der Server-seite schreibt: wie man servletbasierten Anwendungen, JSPs, JSF-Anwendungenund so weiter Ajax-Features verleiht.

Begleiten Sie mich also bei diesem Unternehmen: Streben wir danach, unsere Web-anwendungen interaktiver, weniger langweilig und effizienter zu machen, indemwir redundante Dateneingaben und lange Wartezeiten zwischen Ladevorgängenvermeiden – kurz gesagt, wir wollen ein Benutzererlebnis schaffen, das dem einerDesktop-Anwendung näherkommt. Das sind einige der Versprechen der Ajax-Tech-nologie.

Wer dieses Buch lesen sollteDieses Buch wurde für fortschrittliche Java-Entwickler aller Stufen geschrieben, ins-besondere für die, die Webanwendungen schreiben. Ich sage »fortschrittlich«, weildie Informationen, die dieses Buch liefert, Ihre Fähigkeiten in der Webprogrammie-rung auf die nächste Stufe heben werden. Auf dieser Stufe geht es um eine verbes-serte Zugänglichkeit für Ihre Benutzer, auf der klobige Webanwendungen durchAjax-betriebene Anwendungen mit einem besseren Ansprechverhalten ersetzt wer-den.

Was dieses Buch voraussetztJava-Entwickler mit Erfahrung in der Webprogrammierung sollten keine Problemehaben, diesem Buch zu folgen. Ich setze eine gewisse Erfahrung mit Java-Servlets,HTML und JavaScript voraus. Etwas Erfahrung im Parsen von XML ist hilfreich,aber nicht notwendig.

Der Inhalt dieses BuchsDieses Buch ist in 10 Kapitel eingeteilt:

Kapitel 1, EinrichtungDieses Kapitel beschreibt die Umgebung, die zur Ausführung der Ajax-Bei-spiele in diesem Buch benötigt wird. Die Beispiele nutzen den Tomcat-Servlet-Container, aber wenn Sie Erfahrung mit einem anderen J2EE-Container haben,sollten Sie auch diesen Container verwenden können.

Kapitel 2, JavaScript für AjaxDieses Kapitel erklärt, wie man mit JavaScript auf die Ajax-Funktionalitätenzugreift, und zeigt, wie JavaScript eingesetzt wird, um über das XMLHttpRequest-Objekt asynchrone Aufrufe durchzuführen.


XII | Einleitung

Links

Max.Linie

Max.Linie

Kapitel 3, Ein einfaches Ajax-ServletDieses Kapitel erklärt, wie man einen Ajax-Client unter Verwendung einesServlets bedient. Das ist der Punkt, an dem sich dieses Buch von anderen Ajax-Büchern unterscheidet: Es nutzt als Backend Java statt einer anderen Technolo-gie wie PHP, Perl oder Rails.

Kapitel 4, XML und JSON für AjaxAuch wenn XML ein integraler Bestandteil von Ajax zu sein scheint, ist es nichterforderlich. Dieses Kapitel bespricht, wie man XML nutzt, um die Daten zukapseln, die an den Client gesendet werden, und präsentiert JSON als eineattraktive Alternative zu XML, die die gleiche Funktion erfüllt.

Kapitel 5, Nützliche Daten erhaltenDieses Kapitel illustriert, wie man die Daten für Ajax-Anwendungen in einerDatenbank speichert und diese Daten abruft.

Kapitel 6, Ajax-Bibliotheken und ToolkitsIm Zusammenhang mit Ajax sind eine große Anzahl von Frameworks undToolkits erschienen, die es Entwicklern erleichtern, einige der erforderlichenFunktionen auszunutzen, die für die Unterstützung von Ajax geschrieben wer-den müssen. Dieses Kapitel nimmt sich verschiedene dieser Frameworks undToolkits vor: Dojo, Rico, Prototype, DWR und Scriptaculous.

Kapitel 7, Ajax-TagsJavaServer Pages (JSPs) bieten über Tag-Bibliotheken die Möglichkeit, Codewiederzuverwenden. Dieses Kapitel erklärt, wie man Ajax-Tags für JSPserzeugt.

Kapitel 8, Ajax auf StrutsDie Integration von Ajax in Struts-Anwendungen ist Gegenstand dieses Kapi-tels.

Kapitel 9, JavaServer Faces und AjaxDieses Kapitel bietet ein Beispiel dafür, wie man Ajax mit JavaServer Facesnutzt.

Kapitel 10, Google Web ToolkitDas Google Web Toolkit, das ein vollständiges Roundtrip-Debugging für Ajax-Code ermöglicht, stellt einen sehr aufregenden Einstieg in die Verwendung vonAjax mit Java dar. Dieses Kapitel bietet eine Einführung in die Verwendung die-ses brandaktuellen Toolkits, das Google Ajax-Entwicklern bietet.

Typografische KonventionenIn diesem Buch werden die folgenden typografischen Konventionen verwendet:

KursivschriftZeigt neue Begriffe, URLs, E-Mail-Adressen, Dateinamen, Dateinamenserwei-terungen und Unix-Utilities an.


Einleitung | XIII

Rechts

Max.Linie

Max.Linie

Kapitälchen

Verwenden wir für Menü-Elemente und Buttons.

NichtproportionalschriftZeigt Befehle, Optionen, Schalter, Variablen, Attribute, Schlüssel, Funktionen,Typen, Klassen, Namensräume, Methoden, Module, Eigenschaften, Parameter,Werte, Objekte, Events, Event-Handler, XML-Tags, HTML-Tags, den Inhaltvon Dateien und die Ausgabe von Befehlen an.

Nichtproportionalschrift fettZeigt Befehle oder anderen Text an, der vom Benutzer wörtlich eingegebenwerden muss.

Dieses Symbol zeigt einen Tipp, einen Vorschlag oder einen allge-meinen Hinweis an.

Dieses Symbol zeigt eine Warnung an.

DanksagungenFür die Unterstützung, die mir zuteil wurde, als ich dieses Buch geschrieben habe,bin ich sehr dankbar. Als ich im Januar 2004 Jesse James Garretts mittlerweileberühmten Artikel gelesen habe, der Ajax beschrieb und den Begriff prägte, hatteich das Gefühl, dass das der Anfang einer Revolution in der Webentwicklung ist.Obwohl einige sehr innovative Entwickler bereits begonnen hatten, Ajax-Techni-ken einzusetzen, um ein reicheres Weberlebnis zu gestalten, wuchs die Bewegungerst Anfang 2004 von einem glimmenden Potenzial zu einem lodernden Feuer. Ichbin der Heerschar von Entwicklern sehr dankbar, die Frameworks wie DWR (JoeWalker), Dojo, Rico (Richard Cowen, Bill Scott, Darren James) und Scriptaculous(Thomas Fuchs) gefertigt haben. Mein Dank gilt auch dem Google Web Toolkit-Team sowie Ed Burns, Greg Murray und Tor Norbye für ihre Arbeit an JavaServerFaces und Ajax.

Viele Technologieprediger haben der Bewegung ebenfalls geholfen. Eine Site, dieeine wunderbare Informationsquelle ist, ist Ajaxian.com. Sie wird von Ben Gal-braith und Dion Almaer betrieben. Dank dieser Site stehen Entwicklern viele Infor-mationen und Hilfe zur Verfügung.

Mein Lektor, Mike Loukides, war eine gewaltige Hilfe bei diesem Unternehmen.Mike hat viele schwere Themen leicht gemacht und einige meiner kryptischen Sätzein lesbare, verständliche Prosa verwandelt. Er war eine unschätzbare Hilfe.


XIV | Einleitung

Links

Max.Linie

Max.Linie

Die Gutachter für dieses Buch waren ebenfalls sehr hilfreich. Michael Davis hat vielvom Code untersucht und beim Aufspüren von Problemen geholfen. David Lakishat beim Aufbau geholfen und dafür gesorgt, dass der Inhalt lesbar ist. Vimal Kan-sal hat viele der technischen Details begutachtet.

Zum Abschluss danke ich meiner Familie, dass sie mir während dieses Projekts zurSeite gestanden hat. Ich möchte meinen Kindern Jordan, Erik, Stefani, Matthewund Kyra danken. Ohne die Hilfe und Unterstützung meiner Frau Erin hätte ichdieses Projekt nicht durchführen können. Mein Dank und meine Liebe geltenbesonders ihr.

– Steven Douglas OlsonNovember 2006


| 1

First

Max.Linie

Max.Linie

Kapitel 1 KAPITEL 1

Einrichtung

Zu Anfang müssen Sie die Umgebung für die Entwicklung und das Deployment derAjax-Beispiele in diesem Buch einrichten. Diese Umgebung unterscheidet sich vonder, die für viele andere Technologien verwendet wird.

AnforderungenZur Klarstellung: Ajax ist keine Sprache und kein Software-Paket. Die eine Quellefür die Ajax-Technologie gibt es nicht. Wenn Sie ein Java-Entwickler sind, habenSie wahrscheinlich bereits eine Menge der Werkzeuge, die Sie für die Arbeit mitAjax benötigen.

Schauen wir uns die minimalen Anforderungen an, die Sie erfüllen müssen, um eineAjax-Anwendung mit Java zu entwickeln:

BrowserSie brauchen einen Browser, der JavaScript unterstützt (Internet Explorer,Safari, Mozilla, Opera, Firefox usw.).

Java Development KitSie brauchen einen Java-Compiler und Java-Bibliotheken, vorzugsweise fürJava 5 oder Java 6.

Apache AntSie brauchen Apache Ant. Sie können ohne Ant klarkommen, aber nur, wennSie ein Masochist sind. (Eine Alternative ist Maven. Die Beispiele in diesemBuch gehen davon aus, dass Sie Ant einsetzen. Aber es sollte nicht so schwersein, sie für Maven anzupassen.)

Application-ServerDie Serverseite kann ein beliebiger Application-Server bilden, der Java-Servletshosten und über HTTP kommunizieren kann. Die Beispiele in diesem Buchwurden unter Verwendung von Suns JDK 1.5 und Apache Tomcat 5.0 erstellt.


2 | Kapitel 1: Einrichtung

Links

Max.Linie

Max.Linie

Aber es gibt viele andere Application-Server (wie JRun, JBoss, Resin, WebLo-gic, WebSphere und Glassfish), die Sie mit Ajax verwenden können.

Wenn Sie einen anderen Servlet-Container als Tomcat verwenden, können Sieden Abschnitt »Tomcat installieren« überspringen. Ich empfehle Ihnen aller-dings, zunächst Tomcat zu verwenden. Wenn Sie ein Beispiel verstanden habenund es läuft, können Sie es auf einem anderen Server laufen lassen.

Tomcat installierenBeginnen Sie damit, dass Sie die zuletzt veröffentlichte Version von Tomcat herun-terladen und installieren (gehen Sie zu http://jakarta.apache.org/tomcat/, und wäh-len Sie im Abschnitt DOWNLOADS eine Version aus). Wenn Sie Tomcat noch nieverwendet haben, wartet eine angenehme Überraschung auf Sie. Tomcat ist einewunderbare Servlet-Engine, die als Referenz für die Java Servlet- und JavaServerPages-Technologien verwendet wird.

Tomcat ist frei, und Tomcat ist ausgereift. Wenn Sie eine veröffentlichte Produk-tionsversion erhalten, werden Sie feststellen, dass er genauso stabil ist wie jeder pro-duktionstaugliche kommerzielle Application-Server. Das Tomcat-Projekt besitztaußerdem eine gute Dokumentation. Wenn Sie ein Tomcat-Neuling sind, ist Tom-cat: The Definitive Guide (O’Reilly) von Jason Brittain und Ian Darwin eine weiteregute Informationsquelle.

Eine minimalistische Einführung in die Einrichtung von TomcatLaden Sie für Linux/Unix die tar.gz-Datei herunter, und installieren Sie sie, indemSie in dem Verzeichnis, in dem sich Tomcat befinden soll (z.B. /usr/local/tomcat),tar -zxvf dateiname.tar.gz ausführen. Für Windows wird Tomcat als selbstextra-hierendes Executable ausgeliefert: Laden Sie es einfach herunter, und führen Siesetup.exe aus, um Tomcat zu installieren.

Nachdem Sie Tomcat installiert haben, bringen Sie ihn unter Linux und Unix mitdem folgenden Befehl ans Laufen:

/<Tomcat-Installationsverzeichnis>/bin/startup.sh

Unter Windows nutzen Sie den folgenden Befehl:

\<Tomcat-Installationsverzeichnis>\bin\startup.bat

Starten Sie dann einen Browser, und gehen Sie zu http://localhost:8080, um dieTomcat-Homepage zu sehen. Von hier aus können Sie die Beispiel-Servlets ausfüh-ren, um zu prüfen, ob Ihre Installation richtig funktioniert.

Um Tomcat herunterzufahren, führen Sie die Befehle shutdown.sh (Linux) odershutdown.bat (Windows) aus Ihrem Installationsverzeichnis heraus aus.

http://jakarta.apache.org/tomcat/


Ant installieren | 3

Rechts

Max.Linie

Max.Linie

TOMCAT_HOME setzenAlle Beispiele in diesem Buch werden mit Ant erstellt und deployt. (Wenn Sie mitAnt und dem Konzept von Build-Dateien nicht vertraut sind, sollten Sie sich jetztetwas Zeit nehmen, um sich mit ihnen vertraut zu machen.) Die Build-Dateienerfordern, dass die Umgebungsdatei TOMCAT_HOME richtig gesetzt ist. Das sorgt dafür,dass build.xml bei der Verteilung Ihrer Anwendung alles, was Sie brauchen, in daswebapps-Verzeichnis des Tomcat-Servers kopiert.

Um den Wert von TOMCAT_HOME auf einem Windows-Rechner zu prüfen, geben Sie ineiner Eingabeaufforderung set ein. Unter den anderen Umgebungsvariablen solltenSie Folgendes sehen:

TOMCAT_HOME=c:\apps\Tomcat5.0

TOMCAT_HOME sollte auf den Ort gesetzt sein, an dem Sie Tomcat installiert haben.Falls das nicht so ist, müssen Sie TOMCAT_HOME über das Einrichtungsfenster für Um-gebungsvariablen (START ➝ SYSTEMSTEUERUNG ➝ SYSTEM ➝ ERWEITERT ➝ UMGE-

BUNGSVARIABLEN) setzen. Wenn Sie nicht wissen, wie Sie das machen, öffnen Sieüber das Start-Menü die Hilfe, und suchen Sie nach »Umgebungsvariablen«.

Unter Linux geben Sie in einem Konsolenfenster den Befehl env | grep TOMCAT ein.Sie sollten etwas wie das Folgende sehen:

TOMCAT_HOME=/usr/local/tomcat/Tomcat5.0

Wieder sollte der Wert von TOMCAT_HOME dem Verzeichnis entsprechen, in dem SieTomcat installiert haben. Falls das nicht so ist, müssen Sie ihn richtig setzen. In derRegel müssen Sie dazu einer Start-up-Datei wie .bashrc einen export-Befehl wie denfolgenden hinzufügen:

export TOMCAT_HOME=/usr/local/tomcat/Tomcat5.0

Ant installierenUm die Beispiele in diesem Buch auszuführen, müssen Sie außerdem das Ant-Pro-jekt herunterladen und installieren. Gehen Sie zu http://ant.apache.org, und holenSie sich die neueste Version.

Achten Sie darauf, dass sich das bin-Verzeichnis Ihrer Ant-Installation in Ihrem Pfadbefindet, und geben Sie dann in der Eingabeaufforderung ant ein. Ant sollte mit derMeldung »Build file does not exist« antworten. Diese Nachricht bedeutet, dass Antrichtig installiert ist und die Datei build.xml nicht finden konnte, als es versucht hat,sie zu laden.

Wenn Sie Ant nicht richtig installiert haben, werden Sie einen Fehler wie »DerBefehl Ant ist entweder falsch geschrieben oder konnte nicht gefunden werden«

http://ant.apache.org


4 | Kapitel 1: Einrichtung

Links

Max.Linie

Max.Linie

erhalten. In diesem Fall müssen Sie prüfen, ob Ihre PATH-Umgebungsvariable sogesetzt ist, dass sie das bin-Verzeichnis der Ant-Installation einschließt. Wie beiTOMCAT_HOME können Windows-Anwender die Umgebungsvariable PATH über dieSystemsteuerung (START ➝ SYSTEMSTEUERUNG ➝ SYSTEM ➝ ERWEITERT ➝ UMGE-

BUNGSVARIABLEN) setzen, während Linux- und Unix-Anwender Ihren Shell-Initiali-sierungsdateien (am wahrscheinlichsten .bashrc) Zeilen wie die folgenden hinzufü-gen müssen:

export ANT_HOME=/usr/local/ant/Apache-Ant-1.7.0export PATH=$PATH:$ANT_HOME/bin

Nachdem Sie Ant korrekt installiert haben, können Sie es verwenden, um dieAnwendungen zu erstellen, die in diesem Buch vorgestellt werden. Wenn Sie mehrInformationen zu Ant brauchen, konsultieren Sie die Dokumentation unter http://ant.apache.org oder eines der vielen Bücher zu Ant. Ant: The Definitive Guide(O’Reilly) von Steve Holzner ist das Handbuch, das ich nutze und das mir guteDienste geleistet hat.




| 5

First

Max.Linie

Max.Linie

Kapitel 2 KAPITEL 2

JavaScript für Ajax

Ajax basiert auf dem cleveren Einsatz von JavaScript. Es ist kein Web-Frameworkwie Struts oder Tapestry und keine schicke neue Technologie mit einem coolenAkronym. Ajax läuft darauf hinaus, dass man JavaScript nutzt, um direkt mit demWebserver zu interagieren und den Anfrage/Antwort-Zyklus zu vermeiden, derWebnutzern nur zu vertraut ist.

Java-Programmierer haben JavaScript üblicherweise vermieden, manchmal ausguten Gründen, manchmal aus weniger guten. Sicher kann es die Verwirrung nurerhöhen, wenn man einer JSP-Seite eine weitere Scripting-Schicht hinzufügt. AberJavaScript läuft vollständig im Browser und ist deswegen sehr schnell. Es mussnicht darauf gewartet werden, dass der Server eine Antwort generiert: JavaScriptkann ein Ergebnis berechnen und die Seite sofort aktualisieren.

Ajax bringt eine Server-Interaktion ohne ABSENDEN-Button. Wenn Daten benötigtwerden, stellt das JavaScript in der Webseite eine Anfrage, und der Server antwortetdann mit Daten – aber nicht in einer anderen HTML-Seite. Der Server liefert Datenzurück, die das JavaScript in der vorhandenen Webseite anzeigt. Die Folge ist, dasssich Ihre Webseite quasi wie eine echte Desktop-Anwendung anfühlt. Kurz gesagt:Indem Sie Ajax einsetzen, können Sie in Ihren Webseiten das Erlebnis einer Rich-Application erreichen.

In diesem Buch werde ich nicht versuchen, Ihnen JavaScript beizubringen oderseine Vor- und Nachteile zu analysieren. Ich gehe davon aus, dass Sie bereits mitJavaScript zu tun hatten. Wenn Sie ein Neuling sind, sehen Sie sich JavaScript: Dasumfassende Handbuch von David Flanagan (O’Reilly-Verlag) an. Das ist die besteverfügbare JavaScript-Referenz. JavaScript ist nicht Java, aber einem Java-Entwick-ler sollte es nicht schwerfallen, JavaScript-Code zu lesen. Sie werden feststellen,dass das in diesem Kapitel verwendete JavaScript ziemlich einfach ist. Solange Siemit der Syntax klarkommen, sollten Sie sich jetzt noch nicht ausführlicher mit Java-Script befassen müssen.


6 | Kapitel 2: JavaScript für Ajax

Links

Max.Linie

Max.Linie

Die Anwendung erstellenWir beginnen mit dem vollständigen HTML- und JavaScript-Code für unsere ersteAnwendung, einer einfachen Webseite, die den ASCII-Dezimalwert eines Zeichensanzeigt. Dann werden wir das JavaScript auseinandernehmen und untersuchen.

Das HTML wird in Beispiel 2-1 präsentiert.

Im Wesentlichen ist das standardmäßiges HTML. Es gibt nur zwei JavaScript-Ver-weise: focusIn( ) und convertToDecimal( ). Die Funktion focusIn( ) platziert bloßden Cursor im richtigen Eingabefeld, wenn die Seite geladen wird, damit der Benut-zer ihn nicht mehr mit der Maus dorthin bewegen muss.

Beispiel 2-1: index.html

<html><head> <link rel="stylesheet" type="text/css" href="style.css"> <SCRIPT language="JavaScript" src="ajax.js"></SCRIPT> <title>Ajax mit Java, Kapitel 2, JavaScript für Ajax-Beispiel</title></head><body onload="focusIn( );"> <h1> AJAX-ZEICHENDEKODIERER </h1> <h2> Drücken Sie eine Taste, um ihren Wert zu ermitteln. </h2> <table> <tr> <td> Geben Sie hier die Taste ein -> <input type="text" id="key" name="key" onkeyup="convertToDecimal( );"> </td> </tr> </table> <br /> <table> <tr> <td colspan="5" style="border-bottom:solid black 1px;"> Gedrückte Taste: <input type="text" readonly id="keypressed"> </td> </tr> <tr> <td> Dezimal </td> </tr> <tr> <td><input type="text" readonly id="decimal"></td> </tr> </table></body></html>


Die Anwendung erstellen | 7

Rechts

Max.Linie

Max.Linie

Die Funktion convertToDecimal( ) wird unser Einstieg in die Ajax-Welt sein. Bei-spiel 2-2 stellt den JavaScript-Code vor, der unsere Webseite unterstützt, ajax.js.

Sehen wir uns convertToDecimal( ) an, das unser Einsprungspunkt von index.htmlist. Das Haupt-JavaScript-Objekt, das wir verwenden werden, ist XMLHttpRequest.Ein Problem mit JavaScript ist unglücklicherweise, dass der Code nicht in allenBrowsern gleich ist. In Mozilla, Firefox, Safari und Internet Explorer 7 erhalten wirein XMLHttpRequest-Objekt so:

new XMLHttpRequest( );

Beispiel 2-2: ajax.js

var req; function convertToDecimal( ) { var key = document.getElementById("key"); var keypressed = document.getElementById("keypressed"); keypressed.value = key.value; var url = "/ajaxcharacterconverter/response?key=" + escape(key.value); if (window.XMLHttpRequest) { req = new XMLHttpRequest( ); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("Get",url,true); req.onreadystatechange = callback; req.send(null);}

function callback( ) { if (req.readyState==4) { if (req.status == 200) { var decimal = document.getElementById('decimal'); decimal.value = req.responseText; } } clear( );} function clear( ) { var key = document.getElementById("key"); key.value=""; }function focusIn( ) { document.getElementById("key").focus( );}



Links

Max.Linie

Max.Linie

In Internet Explorer 6 und älteren Versionen nutzen wir ein ActiveX-Objekt:

new ActiveXObject("Microsoft.XMLHTTP");

Weil wir nicht im Voraus sagen können, mit welchem Browser Benutzer unsereWebseite ansehen, müssen wir Code schreiben, der in allen wahrscheinlicherenKandidaten funktioniert. Erst müssen wir ermitteln, ob der Benutzer einen Browserwie Internet Explorer 7 oder Firefox verwendet, der ein natives XMLHttpRequest-Ob-jekt unterstützt. Diese Aufgabe wird durch den folgenden Code bewältigt:

if (window.XMLHttpRequest) { req = new XMLHttpRequest( ); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }

Und das ist es im Grunde: req ist jetzt ein Objekt, das wir einsetzen können, umunsere Ajax-Seite aufzubauen.

Sehen wir uns jetzt Code an, der richtige Arbeit macht. Wir werden den Code ausajax.js im nächsten Kapitel verwenden, schauen Sie sich ihn also genau an, und ach-ten Sie besonders auf den Mechanismus, der mit dem Server redet. Da wir Java-Ent-wickler sind, verwenden wir ein Servlet als Backend, aber darum kümmert sich dieWebseite nicht.

Zunächst erhält die Funktion convertToDecimal( ) einen String aus dem Formular,und dann setzt sie die Variable url auf "/ajaxdecimalcodeconverter/response?key=...". Am Ende werden wir diese URL an den Server (in unserem Fall ein Servlet)senden und erwarten eine Antwort (den Dezimalwert der Taste). Aber wir werdensie nicht in Antwort auf einen Klick auf einen ABSENDEN-Button senden. Wir wer-den sie asynchron senden (das heißt, sobald wir den Tastendruck haben, den wirumwandeln wollen).

Nach dem if/else-Block, in dem wir herausfinden, welcher Browser verwendetwird und ein geeignetes req-Objekt erhalten, können wir mit folgendem Aufruf eineVerbindung zum Server öffnen:

req.open("Get",url,true);

Sehen wir uns die drei Parameter der Methode req.open( ) an:

"Get"Der erste Parameter sagt JavaScript, ob die Anfrage über HTTPPost( ) oderHTTPGet( ) an den Server gesandt werden soll. Die Methode HTTPPost( ) verbirgtdie Parameter in der Anfrage. Die Methode HTTPGet( ) steckt die Parameter soin die URL, dass sie jeder sehen kann. Für dieses Beispiel habe ich HTTPGet( )gewählt, weil leichter zu sehen ist, welche Parameter übergeben werden, und



Rechts

Max.Linie

Max.Linie

die Anzahl der Parameter ziemlich klein ist. Würden wir eine komplexe Mengevon Parametern senden, würde ich stattdessen "Post" verwenden.1

urlDer zweite Parameter ist die URL, die wir an den Server übergeben. Diese URLhaben wir an einem früheren Punkt der Funktion erstellt.

trueDer letzte Parameter bestimmt, ob der Aufruf asynchron ist oder nicht. Ist die-ser Parameter true, wird die Anfrage asynchron gesendet. Beim Entwurf vonAjax-Anwendungen sollten Sie den Asynchron-Schalter immer auf true setzen.Im Grunde heißt das: »Halte nichts an. Sag mir einfach, wenn die Daten zu-rückkommen«.

Die Alternative ist, für den dritten Parameter für req.open( ), falsezu übergeben. Das bewirkt, dass der Browser einfriert, bis der Serverdie Antwort zurückschickt – wenn er eine Antwort schickt (wofür eskeine Garantie gibt). Das führt nie zu einem positiven Benutzererleb-nis. Deswegen sollten Sie den dritten Parameter immer auf true set-zen.

Achten Sie jetzt auf die folgende Anweisung:

req.onreadystatechange=callback;

Diese Zeile ermöglicht es uns, den Aufruf asynchron zu verwenden. Wir sagen demreq-Objekt, dass es die Funktion callback( ) aufrufen soll, wenn eine Statusände-rung erfolgt. Deswegen können wir die Daten, die vom Server zurückkommen,sofort verarbeiten, wenn sie ankommen. Jedes Mal, wenn etwas passiert, werdenwir benachrichtigt.

Die letzte Anweisung von convertToDecimal( ) sendet die Anfrage:

req.send(null);

Sehen wir uns jetzt die Funktion callback( ) an:

function callback( ) { if (req.readyState==4) { if (req.status == 200) { var decimal = document.getElementById(“decimal“); decimal.value = req.responseText; } } clear( ); }

1 Hier greife ich ziemlich weit voraus: Aber die Verwendung von Get ist nur dann eine gute Idee, wenn dieAnfrage keine Änderung von Daten auf dem Server macht. Das ist hier eindeutig der Fall. Umgekehrt istes eine schlechte Idee, Get zu verwenden, wenn Sie Daten auf dem Server verändern (beispielsweisewenn Sie neue Daten senden oder vorhandene Daten löschen). In einem solchen Fall sollten Sie statt-dessen Post verwenden.



Links

Max.Linie

Max.Linie

Diese Funktion prüft readyState und den Status, der vom Server zurückgeliefertwird. readyState kann die fünf Werte annehmen, die in Tabelle 2-1 aufgeführt wer-den.

Die Funktion callback( ) wird bei jeder Statusänderung aufgerufen. Aber das istnicht genau das, was wir wollen. Wir wollen nichts machen, bevor unsere Anfrageabgeschlossen ist, und warten deswegen, bis req.readyState == 4.

Die nächste Prüfung, req.status == 200, stellt sicher, dass der HTTPRequest den Sta-tus OK (200) zurückliefert. Wenn die Seite nicht gefunden wird, ist status gleich404. In diesem Beispiel sollte der Code nur aktiviert werden, wenn die Anfrage abge-schlossen wurde. Beachten Sie, dass ein readyState von 4 uns nicht sagt, dass dieAnfrage erfolgreich abgeschlossen wurde. Wir wissen nur, dass sie abgeschlossenwurde. Wir müssen immer noch den Wert des req.status-Kodes prüfen.

Was ist ein Callback?Ein Callback ist ausführbarer Code, der als Parameter an eine andere Funktionübergeben wird. In unserem Beispiel übergeben wir Code an das XMLHTTPRequest-Objekt, der sagt, welche Funktion aufgerufen werden soll, wenn das Objekt bereitist.

Der JavaScript-Code generiert eine Anfrage, die an ein Servlet gesendet wird. Wenndas Servlet die Informationen zurückliefert, wird die Callback-Funktion aufgerufen.Dann kann die Callback-Funktion dem Benutzer die neuen Informationen anzei-gen. Welche Funktion aufgerufen werden soll, haben wir mit dem folgenden Java-Script-Code festgelegt:

req.onreadystatechange = callback;

Das ist wirklich mächtig. Niemand muss mehr auf die Seite warten. Wenn dieDaten zurückgeliefert werden, sieht der Benutzer sie, ohne dass er dararuf wartenmuss, dass die Seite neu geladen wird.

Tabelle 2-1: readyState-Werte

Wert Status

0 nicht-initialisiert

1 lädt

2 geladen

3 interaktiv

4 abgeschlossen



Rechts

Max.Linie

Max.Linie

Eine vollständige Liste der HTTP-Statuskodes finden Sie unter http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html.

Wie wird unsere JavaScript-Funktion aufgerufen?Wir haben eine hübsche JavaScript-Funktion, convertToDecimal( ), geschrieben, dieein paar interessante Sachen macht: Sie sendet ohne Einschreiten des Benutzers eineAnfrage an den Server und sorgt dafür, dass die Antwort des Servers der Webseitehinzugefügt wird. Aber wie wird convertToDecimal( ) aufgerufen? Der Browser ruftsie auf, wenn er ein keyup-Event im »Geben Sie hier die Taste ein ->«-Eingabefeldentdeckt. Hier ist das vollständige HTML für das Eingabefeld:

<input type="text" id="key" name="key" onkeyup="convertToDecimal( );">

onkeyup="convertToDecimal( );" sagt dem Browser, dass er die JavaScript-FunktionconvertToDecimal( ) aufrufen soll, wenn der Benutzer in diesem Eingabefeld eineTaste drückt und wieder loslässt.

Warum verwenden wir den onkeyup-Trigger und nicht onkeypress?Das ist ein Haken, den Sie verstehen müssen. Es scheint, als sollteonkeypress für diese Anwendung ausreichen. Das ist aber nicht derFall. onkeypress und onkeydown lösen ihre Aktionen aus, bevor dasZeichen in das Feld eingefügt wird und senden das, was vor demTastendruck im Feld ist. Da wir das tatsächliche Zeichen lesen wol-len, müssen wir stattdessen den onkeyup-Trigger verwenden.

Wie erhalten wir den Wert der gedrückten Taste?Nachdem die Steuerung an convertToXML( ) übergeben wurde, machen wir diesenAufruf:

var key = document.getElementById("key");

An diesem Punkt enthält das Objekt mir der id key den Zeichenwert der Taste, diegedrückt wurde. Wir müssen jetzt also nur noch den Wert abrufen, den das Objektnamens key enthält. Dieser Wert wird im value-Parameter des Elements key festge-halten. key.value enthält also den Wert der Taste, die gedrückt wurde.

Nachdem wir ihn abgerufen haben, wollen wir diesen Wert in ein Feld stecken,damit er angezeigt wird. Das ermöglicht es uns, das Feld zu leeren, das verwendetwurde, um die Taste zu drücken. Dem Feld für die Anzeige der Taste haben wir denNamen keypressed gegeben. Auf folgende Weise wird das Feld keypressed abgeru-fen:

var keypressed = document.getElementById("keypressed");

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Ausgabe Deutsche Ajax Java - download.e-bookshelf.de fileAjax on Java bei O’Reilly Media, Inc. Die...

Documents

Transcript of Ausgabe Deutsche Ajax Java - download.e-bookshelf.de fileAjax on Java bei O’Reilly Media, Inc. Die...