Ajax O REILLY. Deutsche Ausgabe. Vom einfachen XMLHttpRequest-Objekt bis zum Google Web Toolkit. Steven Douglas Olson

Transkript

1 Vom einfachen XMLHttpRequest-Objekt bis zum Google Web Toolkit Deutsche Ausgabe Ajax on und JavaTM O REILLY Steven Douglas Olson Deutsche Bearbeitung von Lars Schulten

2

3 Ajax und Java Steven Douglas Olson Deutsche Übersetzung und Bearbeitung von Lars Schulten Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

4 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 Verlag Balthasarstr Köln Tel.: 0221/ Fax: 0221/ kommentar@oreilly.de Copyright der deutschen Ausgabe: 2007 by O Reilly Verlag GmbH & Co. KG 1. Auflage 2007 Die Originalausgabe erschien 2007 unter dem Titel Ajax 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 Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Übersetzung und deutsche Bearbeitung: Lars Schulten, Köln Lektorat: Christine Haite, Köln Fachliche Unterstützung: Simon Effenberg, Berlin & Daniel Lehmann, Sankt Augustin Korrektorat: Friederike Daenecke, Zülpich Satz: Finn Krieger, Wuppertal Umschlaggestaltung: Karen Montgomery, Boston Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; ISBN Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

5 Rechts Für Erin, meine beste Freundin und Frau. Danke, dass Du an mich glaubst.

6 Links

7 First Inhalt Einleitung IX 1 Einrichtung Anforderungen Tomcat installieren Ant installieren JavaScript für Ajax Die Anwendung erstellen Das Beispiel ausführen Ein einfaches Ajax-Servlet Die Ajax-Anwendung erstellen und verteilen Das Beispiel ausführen XML und JSON für Ajax Der Zeichendekodierer Ein einfaches XML-Dokument einrichten Zurück zum Client: Das XML auslesen Die Anwendung erstellen Die Anwendung auf Tomcat ausführen Daten mit JSON übergeben Zusammenfassung Nützliche Daten erhalten Formulareingaben mit Ajax Ein Vorschlagsfeld aufbauen VII

8 6 Ajax-Bibliotheken und Toolkits Das Dojo Toolkit verwenden Das Rico Toolkit verwenden DWR mit Ajax verwenden Drag-and-Drop mit Scriptaculous und Prototype Links 7 Ajax-Tags Eine Tag-Bibliothek erstellen Tag-Bibliotheken von Dritten Ajax auf Struts Struts-Layout Struts über DWR mit Ajax ergänzen Ajax mit Struts: Was haben wir hier gelernt? JavaServer Faces und Ajax Der JSF-Lebenszyklus Eine eigene JSF-Komponente schreiben Ein eigenes JSF-Tag entwickeln JSF-Eingaben durch Erweiterung von HtmlInputText verarbeiten Die JSF-Unterstützung für Ajax schreiben Zusammenfassung Google Web Toolkit Erste Schritte mit dem GWT Die Anwendung debuggen Die Anwendung ausarbeiten: Der Client Den Service für den Client anbieten ZipCodes mit dem Service testen GWT-Widgets Index VIII Inhalt

9 First 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 einer Webseite eine Anfrage an den Server machen, Daten erhalten und anzeigen, ohne darauf zu warten, dass der Benutzer auf einen Absenden-Button klickt und die Seite aktualisiert wird.wow! Das könnte meiner Anwendung das Antwortverhalten einer Desktop- Anwendung spendieren!«bisher mussten sich Webentwickler zwischen Thin-Client-Webanwendungen und Desktop-Anwendungen entscheiden, für die eine Installation erforderlich ist. Mit Ajax kann man Webanwendungen aufbauen, die das Ansprechverhalten von Desktop-Anwendungen haben, ohne dass man sich die Mühe machen muss, die Software des Endbenutzers auf dem aktuellen Stand zu halten. Das bietet Webentwicklern wirklich eine wunderbare Möglichkeit, schnell reagierende und interaktive Anwendungen zu schreiben. Ajax: Etwas Geschichte Im Anfang war HTML, und die Welt sah, dass es gut war. Bald danach kamen Webanwendungen, und die Welt war erfreut über die Möglichkeit, mit Daten interagieren 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: Ansprechverhalten. Es war das Jahr 1984, als ich meine ersten intuitiven Interaktionen mit einem Computer erlebte. Ich war auf dem College, und im Studentenwohnheim IX

10 gab es ein Arbeitszimmer, das gerade mit dem neuen Produkt von Apple Computer, Inc. ausgestattet worden war: dem Apple Macintosh. Diese Computer hatten auf die Studenten eine unglaubliche Anziehungskraft. Es gab nur ein einziges Programm, MacWrite, aber das reichte mir. Ich verlor mich sofort an die freundliche, leicht zu verwendende Oberfläche, die mir die MacWrite-Anwendung bot, und ebenso ging es vielen anderen Studenten. Bis vor Kurzem waren browserbasierte Anwendungen nicht dazu in der Lage, Benutzern das gleiche Erlebnis zu bieten, das sie von Desktop-Anwendungen gewohnt waren. Klar. Einige Webanwendungen erreichen das mit einem Rich-Client. Aber Rich-Clients verlangen eine Mehrleistung, die in browserbasierten Anwendungen nicht gegeben ist. Aber wenn es um die Leichtigkeit der Verteilung und um die Aktualität der beim Benutzer installierten Versionen geht, ist eine browserbasierte Anwendung durch nichts zu schlagen. Das Ideal wäre also eine browserbasierte Anwendung, die sich wie ein Rich-Client verhält. Schauen Sie sich Ajax an. Einige von Ihnen wissen wahrscheinlich, dass es die Ajax-Technologie schon eine Weile gibt und dass sie nicht immer Ajax genannt wurde. Der Begriff Ajax (Asynchronous JavaScript and XML) wurde von Jesse James Garrett von Adaptive Path in seinem Artikel»Ajax: A New Approach to Web Applications«( adaptivepath.com/publications/essays/archives/ php) geprägt. Nachdem dieser Artikel erschienen war, gab es eine Menge Kommentare zu dem Umstand, dass das Verfahren nicht wirklich»neu«war. Viele Entwickler hatten schon asynchrone Anwendungen erzeugt, bevor XMLHttpRequest verfügbar wurde. Trotz ihrer Mängel konnten Java-Applets Webanwendungen bieten, die sich mehr wie Desktop-Anwendungen anfühlten. Flash-Anwendungen konnten das ebenfalls. Was hat sich also geändert? Was ist das Tolle daran? Na, jetzt haben wir endlich einen Namen für das Verfahren. Das scheint vielleicht nicht viel zu sein, gibt uns aber eine gemeinsame Gesprächsgrundlage. Wie uns Entwurfsmuster Namen geben, wenn wir über Programmiertechniken sprechen, so sagt uns der Name Ajax sofort, welche Programmiertechnik verwendet wird. Seit Garretts Artikel veröffentlicht wurde, hat es eine Menge Diskussionen darüber gegeben, wie man Ajax verwenden soll, welche Möglichkeiten es bietet und welche Mängel es hat. Das Erscheinen von Artikeln, Werkzeugen und Informationen zu Ajax hat das Interesse an Ajax förmlich explodieren lassen. Während mehr und mehr Informationen zu Ajax verfügbar werden, werden Ajax-Techniken und die Verwendung von Ajax zu gängigen Programmiertechniken und werden sich, während wir schreiben, zu dem entwickeln, das Benutzer von Webanwendungen erwarten. Das ist die Macht eines Namens. Links X Einleitung

11 Rechts Ajax verkleinert die Lücke zwischen einer Desktop-Anwendung und einer schlanken, browserbasierten Anwendung. Dieses Buch wird Sie in Ajax einführen, indem es illustriert, wie man Ajax-Anwendungen in einer Java-Umgebung auf der Serverseite schreibt: wie man servletbasierten Anwendungen, JSPs, JSF-Anwendungen und so weiter Ajax-Features verleiht. Begleiten Sie mich also bei diesem Unternehmen: Streben wir danach, unsere Webanwendungen interaktiver, weniger langweilig und effizienter zu machen, indem wir redundante Dateneingaben und lange Wartezeiten zwischen Ladevorgängen vermeiden kurz gesagt, wir wollen ein Benutzererlebnis schaffen, das dem einer Desktop-Anwendung näherkommt. Das sind einige der Versprechen der Ajax-Technologie. Wer dieses Buch lesen sollte Dieses Buch wurde für fortschrittliche Java-Entwickler aller Stufen geschrieben, insbesondere für die, die Webanwendungen schreiben. Ich sage»fortschrittlich«, weil die Informationen, die dieses Buch liefert, Ihre Fähigkeiten in der Webprogrammierung auf die nächste Stufe heben werden. Auf dieser Stufe geht es um eine verbesserte Zugänglichkeit für Ihre Benutzer, auf der klobige Webanwendungen durch Ajax-betriebene Anwendungen mit einem besseren Ansprechverhalten ersetzt werden. Was dieses Buch voraussetzt Java-Entwickler mit Erfahrung in der Webprogrammierung sollten keine Probleme haben, 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 Buchs Dieses Buch ist in 10 Kapitel eingeteilt: Kapitel 1, Einrichtung Dieses Kapitel beschreibt die Umgebung, die zur Ausführung der Ajax-Beispiele 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 Ajax Dieses Kapitel erklärt, wie man mit JavaScript auf die Ajax-Funktionalitäten zugreift, und zeigt, wie JavaScript eingesetzt wird, um über das XMLHttpRequest- Objekt asynchrone Aufrufe durchzuführen. Einleitung XI

12 Kapitel 3, Ein einfaches Ajax-Servlet Dieses Kapitel erklärt, wie man einen Ajax-Client unter Verwendung eines Servlets bedient. Das ist der Punkt, an dem sich dieses Buch von anderen Ajax- Büchern unterscheidet: Es nutzt als Backend Java statt einer anderen Technologie wie PHP, Perl oder Rails. Kapitel 4, XML und JSON für Ajax Auch wenn XML ein integraler Bestandteil von Ajax zu sein scheint, ist es nicht erforderlich. Dieses Kapitel bespricht, wie man XML nutzt, um die Daten zu kapseln, die an den Client gesendet werden, und präsentiert JSON als eine attraktive Alternative zu XML, die die gleiche Funktion erfüllt. Kapitel 5, Nützliche Daten erhalten Dieses Kapitel illustriert, wie man die Daten für Ajax-Anwendungen in einer Datenbank speichert und diese Daten abruft. Kapitel 6, Ajax-Bibliotheken und Toolkits Im Zusammenhang mit Ajax sind eine große Anzahl von Frameworks und Toolkits erschienen, die es Entwicklern erleichtern, einige der erforderlichen Funktionen auszunutzen, die für die Unterstützung von Ajax geschrieben werden müssen. Dieses Kapitel nimmt sich verschiedene dieser Frameworks und Toolkits vor: Dojo, Rico, Prototype, DWR und Scriptaculous. Kapitel 7, Ajax-Tags JavaServer Pages (JSPs) bieten über Tag-Bibliotheken die Möglichkeit, Code wiederzuverwenden. Dieses Kapitel erklärt, wie man Ajax-Tags für JSPs erzeugt. Kapitel 8, Ajax auf Struts Die Integration von Ajax in Struts-Anwendungen ist Gegenstand dieses Kapitels. Kapitel 9, JavaServer Faces und Ajax Dieses Kapitel bietet ein Beispiel dafür, wie man Ajax mit JavaServer Faces nutzt. Kapitel 10, Google Web Toolkit Das Google Web Toolkit, das ein vollständiges Roundtrip-Debugging für Ajax- Code ermöglicht, stellt einen sehr aufregenden Einstieg in die Verwendung von Ajax mit Java dar. Dieses Kapitel bietet eine Einführung in die Verwendung dieses brandaktuellen Toolkits, das Google Ajax-Entwicklern bietet. Links Typografische Konventionen In diesem Buch werden die folgenden typografischen Konventionen verwendet: Kursivschrift Zeigt neue Begriffe, URLs, -Adressen, Dateinamen, Dateinamenserweiterungen und Unix-Utilities an. XII Einleitung

13 Rechts Kapitälchen Verwenden wir für Menü-Elemente und Buttons. Nichtproportionalschrift Zeigt 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 Inhalt von Dateien und die Ausgabe von Befehlen an. Nichtproportionalschrift fett Zeigt Befehle oder anderen Text an, der vom Benutzer wörtlich eingegeben werden muss. Dieses Symbol zeigt einen Tipp, einen Vorschlag oder einen allgemeinen Hinweis an. Dieses Symbol zeigt eine Warnung an. Danksagungen Fü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 mittlerweile berühmten Artikel gelesen habe, der Ajax beschrieb und den Begriff prägte, hatte ich das Gefühl, dass das der Anfang einer Revolution in der Webentwicklung ist. Obwohl einige sehr innovative Entwickler bereits begonnen hatten, Ajax-Techniken einzusetzen, um ein reicheres Weberlebnis zu gestalten, wuchs die Bewegung erst Anfang 2004 von einem glimmenden Potenzial zu einem lodernden Feuer. Ich bin der Heerschar von Entwicklern sehr dankbar, die Frameworks wie DWR (Joe Walker), 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 JavaServer Faces und Ajax. Viele Technologieprediger haben der Bewegung ebenfalls geholfen. Eine Site, die eine wunderbare Informationsquelle ist, ist Ajaxian.com. Sie wird von Ben Galbraith und Dion Almaer betrieben. Dank dieser Site stehen Entwicklern viele Informationen 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ätze in lesbare, verständliche Prosa verwandelt. Er war eine unschätzbare Hilfe. Einleitung XIII

14 Die Gutachter für dieses Buch waren ebenfalls sehr hilfreich. Michael Davis hat viel vom Code untersucht und beim Aufspüren von Problemen geholfen. David Lakis hat beim Aufbau geholfen und dafür gesorgt, dass der Inhalt lesbar ist. Vimal Kansal hat viele der technischen Details begutachtet. Zum Abschluss danke ich meiner Familie, dass sie mir während dieses Projekts zur Seite gestanden hat. Ich möchte meinen Kindern Jordan, Erik, Stefani, Matthew und Kyra danken. Ohne die Hilfe und Unterstützung meiner Frau Erin hätte ich dieses Projekt nicht durchführen können. Mein Dank und meine Liebe gelten besonders ihr. Steven Douglas Olson November 2006 Links XIV Einleitung

15 First Kapitel 1 KAPITEL 1 Einrichtung Zu Anfang müssen Sie die Umgebung für die Entwicklung und das Deployment der Ajax-Beispiele in diesem Buch einrichten. Diese Umgebung unterscheidet sich von der, die für viele andere Technologien verwendet wird. Anforderungen Zur Klarstellung: Ajax ist keine Sprache und kein Software-Paket. Die eine Quelle für die Ajax-Technologie gibt es nicht. Wenn Sie ein Java-Entwickler sind, haben Sie wahrscheinlich bereits eine Menge der Werkzeuge, die Sie für die Arbeit mit Ajax benötigen. Schauen wir uns die minimalen Anforderungen an, die Sie erfüllen müssen, um eine Ajax-Anwendung mit Java zu entwickeln: Browser Sie brauchen einen Browser, der JavaScript unterstützt (Internet Explorer, Safari, Mozilla, Opera, Firefox usw.). Java Development Kit Sie brauchen einen Java-Compiler und Java-Bibliotheken, vorzugsweise für Java 5 oder Java 6. Apache Ant Sie brauchen Apache Ant. Sie können ohne Ant klarkommen, aber nur, wenn Sie ein Masochist sind. (Eine Alternative ist Maven. Die Beispiele in diesem Buch gehen davon aus, dass Sie Ant einsetzen. Aber es sollte nicht so schwer sein, sie für Maven anzupassen.) Application-Server Die Serverseite kann ein beliebiger Application-Server bilden, der Java-Servlets hosten und über HTTP kommunizieren kann. Die Beispiele in diesem Buch wurden unter Verwendung von Suns JDK 1.5 und Apache Tomcat 5.0 erstellt. 1

16 Aber es gibt viele andere Application-Server (wie JRun, JBoss, Resin, WebLogic, WebSphere und Glassfish), die Sie mit Ajax verwenden können. Wenn Sie einen anderen Servlet-Container als Tomcat verwenden, können Sie den Abschnitt»Tomcat installieren«überspringen. Ich empfehle Ihnen allerdings, zunächst Tomcat zu verwenden. Wenn Sie ein Beispiel verstanden haben und es läuft, können Sie es auf einem anderen Server laufen lassen. Links Tomcat installieren Beginnen Sie damit, dass Sie die zuletzt veröffentlichte Version von Tomcat herunterladen und installieren (gehen Sie zu und wählen Sie im Abschnitt DOWNLOADS eine Version aus). Wenn Sie Tomcat noch nie verwendet haben, wartet eine angenehme Überraschung auf Sie. Tomcat ist eine wunderbare Servlet-Engine, die als Referenz für die Java Servlet- und JavaServer Pages-Technologien verwendet wird. Tomcat ist frei, und Tomcat ist ausgereift. Wenn Sie eine veröffentlichte Produktionsversion erhalten, werden Sie feststellen, dass er genauso stabil ist wie jeder produktionstaugliche kommerzielle Application-Server. Das Tomcat-Projekt besitzt außerdem eine gute Dokumentation. Wenn Sie ein Tomcat-Neuling sind, ist Tomcat: The Definitive Guide (O Reilly) von Jason Brittain und Ian Darwin eine weitere gute Informationsquelle. Eine minimalistische Einführung in die Einrichtung von Tomcat Laden Sie für Linux/Unix die tar.gz-datei herunter, und installieren Sie sie, indem Sie 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 selbstextrahierendes Executable ausgeliefert: Laden Sie es einfach herunter, und führen Sie setup.exe aus, um Tomcat zu installieren. Nachdem Sie Tomcat installiert haben, bringen Sie ihn unter Linux und Unix mit dem 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 um die Tomcat-Homepage zu sehen. Von hier aus können Sie die Beispiel-Servlets ausführen, um zu prüfen, ob Ihre Installation richtig funktioniert. Um Tomcat herunterzufahren, führen Sie die Befehle shutdown.sh (Linux) oder shutdown.bat (Windows) aus Ihrem Installationsverzeichnis heraus aus. 2 Kapitel 1: Einrichtung

17 Rechts TOMCAT_HOME setzen Alle Beispiele in diesem Buch werden mit Ant erstellt und deployt. (Wenn Sie mit Ant und dem Konzept von Build-Dateien nicht vertraut sind, sollten Sie sich jetzt etwas Zeit nehmen, um sich mit ihnen vertraut zu machen.) Die Build-Dateien erfordern, 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 das webapps-verzeichnis des Tomcat-Servers kopiert. Um den Wert von TOMCAT_HOME auf einem Windows-Rechner zu prüfen, geben Sie in einer Eingabeaufforderung set ein. Unter den anderen Umgebungsvariablen sollten Sie 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 Umgebungsvariablen (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 Sie Tomcat installiert haben. Falls das nicht so ist, müssen Sie ihn richtig setzen. In der Regel müssen Sie dazu einer Start-up-Datei wie.bashrc einen export-befehl wie den folgenden hinzufügen: export TOMCAT_HOME=/usr/local/tomcat/Tomcat5.0 Ant installieren Um die Beispiele in diesem Buch auszuführen, müssen Sie außerdem das Ant-Projekt herunterladen und installieren. Gehen Sie zu und holen Sie sich die neueste Version. Achten Sie darauf, dass sich das bin-verzeichnis Ihrer Ant-Installation in Ihrem Pfad befindet, und geben Sie dann in der Eingabeaufforderung ant ein. Ant sollte mit der Meldung»Build file does not exist«antworten. Diese Nachricht bedeutet, dass Ant richtig 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»der Befehl Ant ist entweder falsch geschrieben oder konnte nicht gefunden werden«ant installieren 3

18 erhalten. In diesem Fall müssen Sie prüfen, ob Ihre PATH-Umgebungsvariable so gesetzt ist, dass sie das bin-verzeichnis der Ant-Installation einschließt. Wie bei TOMCAT_HOME können Windows-Anwender die Umgebungsvariable PATH über die Systemsteuerung (START SYSTEMSTEUERUNG SYSTEM ERWEITERT UMGE- BUNGSVARIABLEN) setzen, während Linux- und Unix-Anwender Ihren Shell-Initialisierungsdateien (am wahrscheinlichsten.bashrc) Zeilen wie die folgenden hinzufügen müssen: export ANT_HOME=/usr/local/ant/Apache-Ant export PATH=$PATH:$ANT_HOME/bin Nachdem Sie Ant korrekt installiert haben, können Sie es verwenden, um die Anwendungen zu erstellen, die in diesem Buch vorgestellt werden. Wenn Sie mehr Informationen zu Ant brauchen, konsultieren Sie die Dokumentation unter 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 gute Dienste geleistet hat. Links 4 Kapitel 1: Einrichtung

19 First Kapitel 2 KAPITEL 2 JavaScript für Ajax Ajax basiert auf dem cleveren Einsatz von JavaScript. Es ist kein Web-Framework wie Struts oder Tapestry und keine schicke neue Technologie mit einem coolen Akronym. Ajax läuft darauf hinaus, dass man JavaScript nutzt, um direkt mit dem Webserver zu interagieren und den Anfrage/Antwort-Zyklus zu vermeiden, der Webnutzern nur zu vertraut ist. Java-Programmierer haben JavaScript üblicherweise vermieden, manchmal aus guten Gründen, manchmal aus weniger guten. Sicher kann es die Verwirrung nur erhöhen, wenn man einer JSP-Seite eine weitere Scripting-Schicht hinzufügt. Aber JavaScript läuft vollständig im Browser und ist deswegen sehr schnell. Es muss nicht darauf gewartet werden, dass der Server eine Antwort generiert: JavaScript kann ein Ergebnis berechnen und die Seite sofort aktualisieren. Ajax bringt eine Server-Interaktion ohne ABSENDEN-Button. Wenn Daten benötigt werden, stellt das JavaScript in der Webseite eine Anfrage, und der Server antwortet dann mit Daten aber nicht in einer anderen HTML-Seite. Der Server liefert Daten zurück, die das JavaScript in der vorhandenen Webseite anzeigt. Die Folge ist, dass sich 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 oder seine Vor- und Nachteile zu analysieren. Ich gehe davon aus, dass Sie bereits mit JavaScript zu tun hatten. Wenn Sie ein Neuling sind, sehen Sie sich JavaScript: Das umfassende Handbuch von David Flanagan (O Reilly-Verlag) an. Das ist die beste verfügbare JavaScript-Referenz. JavaScript ist nicht Java, aber einem Java-Entwickler sollte es nicht schwerfallen, JavaScript-Code zu lesen. Sie werden feststellen, dass das in diesem Kapitel verwendete JavaScript ziemlich einfach ist. Solange Sie mit der Syntax klarkommen, sollten Sie sich jetzt noch nicht ausführlicher mit Java- Script befassen müssen. 5

20 Die Anwendung erstellen Wir beginnen mit dem vollständigen HTML- und JavaScript-Code für unsere erste Anwendung, einer einfachen Webseite, die den ASCII-Dezimalwert eines Zeichens anzeigt. Dann werden wir das JavaScript auseinandernehmen und untersuchen. Das HTML wird in Beispiel 2-1 präsentiert. Links 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> Im Wesentlichen ist das standardmäßiges HTML. Es gibt nur zwei JavaScript-Verweise: focusin( ) und converttodecimal( ). Die Funktion focusin( ) platziert bloß den Cursor im richtigen Eingabefeld, wenn die Seite geladen wird, damit der Benutzer ihn nicht mehr mit der Maus dorthin bewegen muss. 6 Kapitel 2: JavaScript für Ajax

21 Rechts Die Funktion converttodecimal( ) wird unser Einstieg in die Ajax-Welt sein. Beispiel 2-2 stellt den JavaScript-Code vor, der unsere Webseite unterstützt, ajax.js. 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( ); Sehen wir uns converttodecimal( ) an, das unser Einsprungspunkt von index.html ist. Das Haupt-JavaScript-Objekt, das wir verwenden werden, ist XMLHttpRequest. Ein Problem mit JavaScript ist unglücklicherweise, dass der Code nicht in allen Browsern gleich ist. In Mozilla, Firefox, Safari und Internet Explorer 7 erhalten wir ein XMLHttpRequest-Objekt so: new XMLHttpRequest( ); Die Anwendung erstellen 7

22 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 unsere Webseite ansehen, müssen wir Code schreiben, der in allen wahrscheinlicheren Kandidaten funktioniert. Erst müssen wir ermitteln, ob der Benutzer einen Browser wie Internet Explorer 7 oder Firefox verwendet, der ein natives XMLHttpRequest-Objekt 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, um unsere Ajax-Seite aufzubauen. Sehen wir uns jetzt Code an, der richtige Arbeit macht. Wir werden den Code aus ajax.js im nächsten Kapitel verwenden, schauen Sie sich ihn also genau an, und achten Sie besonders auf den Mechanismus, der mit dem Server redet. Da wir Java-Entwickler sind, verwenden wir ein Servlet als Backend, aber darum kümmert sich die Webseite 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 werden sie nicht in Antwort auf einen Klick auf einen ABSENDEN-Button senden. Wir werden sie asynchron senden (das heißt, sobald wir den Tastendruck haben, den wir umwandeln wollen). Nach dem if/else-block, in dem wir herausfinden, welcher Browser verwendet wird und ein geeignetes req-objekt erhalten, können wir mit folgendem Aufruf eine Verbindung 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( ) oder HTTPGet( ) an den Server gesandt werden soll. Die Methode HTTPPost( ) verbirgt die Parameter in der Anfrage. Die Methode HTTPGet( ) steckt die Parameter so in 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 Links 8 Kapitel 2: JavaScript für Ajax

23 Rechts die Anzahl der Parameter ziemlich klein ist. Würden wir eine komplexe Menge von Parametern senden, würde ich stattdessen "Post" verwenden. 1 url Der zweite Parameter ist die URL, die wir an den Server übergeben. Diese URL haben wir an einem früheren Punkt der Funktion erstellt. true Der letzte Parameter bestimmt, ob der Aufruf asynchron ist oder nicht. Ist dieser Parameter true, wird die Anfrage asynchron gesendet. Beim Entwurf von Ajax-Anwendungen sollten Sie den Asynchron-Schalter immer auf true setzen. Im Grunde heißt das:»halte nichts an. Sag mir einfach, wenn die Daten zurückkommen«. Die Alternative ist, für den dritten Parameter für req.open( ), false zu übergeben. Das bewirkt, dass der Browser einfriert, bis der Server die Antwort zurückschickt wenn er eine Antwort schickt (wofür es keine Garantie gibt). Das führt nie zu einem positiven Benutzererlebnis. Deswegen sollten Sie den dritten Parameter immer auf true setzen. Achten Sie jetzt auf die folgende Anweisung: req.onreadystatechange=callback; Diese Zeile ermöglicht es uns, den Aufruf asynchron zu verwenden. Wir sagen dem req-objekt, dass es die Funktion callback( ) aufrufen soll, wenn eine Statusänderung erfolgt. Deswegen können wir die Daten, die vom Server zurückkommen, sofort verarbeiten, wenn sie ankommen. Jedes Mal, wenn etwas passiert, werden wir 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 die Anfrage keine Änderung von Daten auf dem Server macht. Das ist hier eindeutig der Fall. Umgekehrt ist es eine schlechte Idee, Get zu verwenden, wenn Sie Daten auf dem Server verändern (beispielsweise wenn Sie neue Daten senden oder vorhandene Daten löschen). In einem solchen Fall sollten Sie stattdessen Post verwenden. Die Anwendung erstellen 9

24 Links 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 bereit ist. Der JavaScript-Code generiert eine Anfrage, die an ein Servlet gesendet wird. Wenn das Servlet die Informationen zurückliefert, wird die Callback-Funktion aufgerufen. Dann kann die Callback-Funktion dem Benutzer die neuen Informationen anzeigen. 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 die Daten zurückgeliefert werden, sieht der Benutzer sie, ohne dass er dararuf warten muss, dass die Seite neu geladen wird. Diese Funktion prüft readystate und den Status, der vom Server zurückgeliefert wird. readystate kann die fünf Werte annehmen, die in Tabelle 2-1 aufgeführt werden. Tabelle 2-1: readystate-werte Wert Status 0 nicht-initialisiert 1 lädt 2 geladen 3 interaktiv 4 abgeschlossen Die Funktion callback( ) wird bei jeder Statusänderung aufgerufen. Aber das ist nicht genau das, was wir wollen. Wir wollen nichts machen, bevor unsere Anfrage abgeschlossen ist, und warten deswegen, bis req.readystate == 4. Die nächste Prüfung, req.status == 200, stellt sicher, dass der HTTPRequest den Status OK (200) zurückliefert. Wenn die Seite nicht gefunden wird, ist status gleich 404. In diesem Beispiel sollte der Code nur aktiviert werden, wenn die Anfrage abgeschlossen wurde. Beachten Sie, dass ein readystate von 4 uns nicht sagt, dass die Anfrage erfolgreich abgeschlossen wurde. Wir wissen nur, dass sie abgeschlossen wurde. Wir müssen immer noch den Wert des req.status-kodes prüfen. 10 Kapitel 2: JavaScript für Ajax

25 Rechts Eine vollständige Liste der HTTP-Statuskodes finden Sie unter Wie wird unsere JavaScript-Funktion aufgerufen? Wir haben eine hübsche JavaScript-Funktion, converttodecimal( ), geschrieben, die ein paar interessante Sachen macht: Sie sendet ohne Einschreiten des Benutzers eine Anfrage an den Server und sorgt dafür, dass die Antwort des Servers der Webseite hinzugefügt wird. Aber wie wird converttodecimal( ) aufgerufen? Der Browser ruft sie auf, wenn er ein keyup-event im»geben Sie hier die Taste ein ->«-Eingabefeld entdeckt. 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-Funktion converttodecimal( ) aufrufen soll, wenn der Benutzer in diesem Eingabefeld eine Taste 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 sollte onkeypress für diese Anwendung ausreichen. Das ist aber nicht der Fall. onkeypress und onkeydown lösen ihre Aktionen aus, bevor das Zeichen in das Feld eingefügt wird und senden das, was vor dem Tastendruck im Feld ist. Da wir das tatsächliche Zeichen lesen wollen, 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 diesen Aufruf: var key = document.getelementbyid("key"); An diesem Punkt enthält das Objekt mir der id key den Zeichenwert der Taste, die gedrückt wurde. Wir müssen jetzt also nur noch den Wert abrufen, den das Objekt namens key enthält. Dieser Wert wird im value-parameter des Elements key festgehalten. 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 verwendet wurde, um die Taste zu drücken. Dem Feld für die Anzeige der Taste haben wir den Namen keypressed gegeben. Auf folgende Weise wird das Feld keypressed abgerufen: var keypressed = document.getelementbyid("keypressed"); Die Anwendung erstellen 11