Vorstellung der Ajax JSP Tag Library

Web-Entwicklung mit den Ajax-Tags

Mit Hilfe von Ajax können Web-Anwendungen so programmiert werden, dass die Bedienbarkeit ähnlich komfortabel wie bei klassischen Desktop-Anwendungen wird. Dies liegt daran, dass der Browser in der Lage ist, mit dem Server zu kommunizieren, ohne dass die Web-Seite vollständig neu geladen werden muss. Das Ergebnis kann eine in der Handhabung beschleunigte und intuitivere Web-Anwendung sein.

Wo finde ich Ajax-Anwendungen im Web?

Eines der bekanntesten und umfangreichsten Beispiele einer Ajax-Anwendung ist wohl Google Maps [1]. Weitere Google-Beispiele, wie z. B. Google Suggest, lassen sich über [2] aufrufen. Aber auch in kleinerem Rahmen lässt sich Ajax einsetzen, um die Bedienung von Webseiten komfortabler zu gestalten. Einige solcher Beispiele sind unter [3] oder auf der Ajax-Tags-Seite [4] zu finden.

Ajax in Form von Tags

Um Web-Anwendungen mit Ajax umzusetzen, benötigt man ein fundiertes JavaScript-Wissen. Möchte der Entwickler die clientseitige JavaScript-Programmierung vermeiden und seine Webseiten trotzdem mit Hilfe von Ajax dynamisieren, lohnt sich ein Blick auf das AjaxTags-Projekt [5].

Mit Hilfe der dort bereitgestellten Tag Library lassen sich Java Server Pages um einige interessante Ajax-Funktionalitäten erweitern. Dieser Artikel zeigt beispielhaft die Verwendung der Ajax-Tags und macht auf Probleme bei der Umsetzung aufmerksam.

Welche Vorbereitungen muss ich treffen?

Sämtliche Dateien, die zur Verwendung der Ajax-Tags benötigt werden, sind unter [6] erhältlich. Die eigentliche Taglib muss in Form eines jar-Archivs eingebunden werden. Des Weiteren muss bei Verwendung von JSP 1.x der Tag Library Descriptor in der web.xml der Anwendung bekannt gegeben werden.

Schließlich werden noch (mindestens) zwei JavaScript-Dateien benötigt:

1. prototype.js, da die Ajax-Tags auf dem Prototype Framework [7] basieren.
2. ajaxtags.js, die eine Reihe von Ajax-Funktionalitäten bereitstellt.

Im Folgenden wird beispielhaft gezeigt, wie die Ajax-Tags in eine JSP-Seite integriert werden, um eine automatische Vervollständigung zu realisieren.

Ein Beispiel: Automatische Vervollständigung

Abb. 1: Automatische Vervollständigung mit Hilfe der Ajax-Tags.

Oft ist es wünschenswert, dass auf Basis einer Eingabe, z. B. in ein Textfeld, verschiedene Auswahlmöglichkeiten angezeigt werden. Folgender Ablauf findet in diesem Fall bei Implementierung mit Hilfe von Ajax statt:

Der Benutzer gibt die gewünschten Buchstaben ein. Anschließend wird ein XMLHTTP-Request an den Server geschickt. Der Server verarbeitet den Request, ermittelt die notwendigen Daten und schickt diese an den Client zurück.

Anschließend bekommt der Benutzer die Auswahlmöglichkeiten vom Server zu Gesicht, ohne dass die Webseite neu geladen werden muss.

Als Beispiel soll nun ein Textfeld dienen, welches in einem HTML-Formular platziert wird. Gibt der Benutzer in das Textfeld einen Buchstaben ein, z. B. ein "J" (siehe Abbildung 1), werden alle Seminare angezeigt, die mit diesem Buchstaben beginnen.

Das HTML-Formular wird, wie in Abbildung 2 zu sehen ist, definiert.

Um die automatische Vervollständigung mit Hilfe der Ajax-Tags zu realisieren, wird das Tag <ajax:autocomplete> verwendet (siehe Abbildung 3).

1 <form action=".">
2  <fieldset>
3   <legend>Seminarauswahl</legend>
4   <p>Bitte wählen Sie ein Seminar aus</p>
5   <label for="seminar">Seminar:</label>
6   <input id="seminar" name="seminar" type="text" size="30" />
7   <span id="indicator" style="display:none;">
8   <img src="${contextPath}/img/indicator.gif" />
9   </span>
10 </fieldset>
11 </form>

Bedeutung der einzelnen Attribute

In dem Beispiel in Abbildung 3, Zeilen 2 und 3, sind das "source"- und "target"-Attribut auf dasselbe Textfeld innerhalb des HTML-Formulars gesetzt. D. h. der Benutzer bekommt die Auswahl und das Ergebnis im selben Feld angezeigt.

Das Attribut "baseUrl" (Zeile 4) definiert, welche URL zur serverseitigen Verarbeitung des Requests aufgerufen wird. In diesem Fall kümmert sich das AjaxServlet um die Verarbeitung. Über "className" (Zeile 5) wird eine CSS-Klasse zur Generierung der Auswahlliste angegeben.

In der mitgelieferten Datei "ajaxtags.css" befindet sich neben einer Reihe weiterer Stylesheets die entsprechende Klasse "autocomplete". Mit Hilfe von "indicator" (Zeile 6) kann optional ein Bild festgelegt werden.

1 <ajax:autocomplete
2   source="seminar"
3   target="seminar"
4   baseUrl="${contextPath}/AjaxServlet"
5   className="autocomplete"
6   indicator="indicator"
7   minimumCharacters="1"
8   parser="new ResponseXmlParser()" />

Dieses signalisiert dem Benutzer, dass die Auswahlliste aufgebaut wird, bzw. der Response vom Server erwartet wird.

Solche Hinweise sollten dem Benutzer generell gegeben werden, da – Ajax wie der Name schon sagt – asynchron arbeitet. Der Anwender würde sonst nicht mitbekommen, dass eine Verarbeitung stattfindet.

Über "minimumCharacters=1" (Zeile 7) wird festgelegt, dass die Auswahlliste schon bei Eingabe eines Buchstabens aufgebaut wird. Schließlich wird noch mitgeteilt, dass der Response des Servers im XML-Format vorliegt (Zeile 8).

Die Verarbeitung auf dem Server

Nachdem die JSP auf diese Weise mit Ajax-Funktionalität ausgestattet wurde, muss sich der Entwickler um die serverseitige Komponente kümmern. Welche Technologie er dort einsetzt, ist ihm überlassen. Abbildung 4 zeigt kurz auf, wie ein Servlet aussehen kann, das die Verarbeitung auf dem Server vornimmt.

1 public class AjaxServlet extends BaseAjaxServlet {
2	
3  public String getXmlContent
     (HttpServletRequest request, HttpServletResponse response)
4    throws Exception {
5		   
6    String seminar = request.getParameter("seminar");
7    Service service = new Service();
8    List list = service.getSeminareByName(seminar);
8	
10   return new AjaxXmlBuilder().addItems(list,"seminar","result").toString();
11  }
12 }

Die Klasse erbt von der Klasse BaseAjaxServlet, welche Teil der Ajax Tag Bibliothek ist (Zeile 1). Die Methode getXMLContent() (Zeile 3) ermittelt zunächst den übergebenen Parameter. In unserem Beispiel das vom Benutzer eingegebene "J".

Dann werden alle Seminare, die mit dem Buchstaben "J" beginnen, in einer Liste gespeichert. Schließlich wird aus dieser Liste ein XML-konformer String generiert und zurückgegeben (Zeile 7).

Grenzen und Möglichkeiten der Ajax-Tags

Das Beispiel zeigt, dass eine Funktion wie die Autovervollständigung mit wenig Aufwand zu erstellen ist.

Problematisch kann jedoch die Fehlersuche werden. Ist zum Beispiel das Attribut "baseUrl" falsch gesetzt und die Serverkomponente kann nicht gefunden werden, wird kein JavaScript-Fehler generiert. Da bleibt dann nur die Möglichkeit, sich dem Fehler mit entsprechenden "alert()"-Ausgaben in der Prototype-Bibliothek zu nähern oder einen JavaScript-Debugger zu verwenden.

Für den Mozilla und Firefox gibt es z. B. den Venkman JavaScript-Debugger. [8]

Des Weiteren ist es schwierig, die Funktionalitäten der Tags auf spezielle Bedürfnisse anzupassen. So lässt sich z. B. das <ajax:callout> Tag dazu verwenden, ein Pop-Up zu generieren, welches mit Daten vom Server versorgt wird.

Ein Blick in die ajaxtags.js Bibliothek verrät, dass dieses Pop-Up über den JavaScript Eventhandler OnMouseOver erstellt wird. Soll dieses Verhalten geändert werden und das Pop-Up z. B. bei einem OnClick erscheinen, muss die Bibliothek verändert werden. Das hat zur Folge, dass sie bei jedem Update auf eine neue Version neu angepasst werden muss.

Ein weiterer Aspekt, den der Entwickler bedenken sollte, ist, dass JavaScript im Browser abgeschaltet werden kann. In diesem Fall wäre es vorteilhaft, dem Benutzer mitzuteilen, dass die Webseite JavaScript benötigt.

Die zweite Möglichkeit besteht darin, eine Version bereitzustellen, die auch ohne JavaScript und damit auch ohne Ajax auskommt.

Zusätzlich ist zu bedenken, dass JavaScript unter Umständen von unterschiedlichen Browsern verschieden interpretiert wird. Deshalb sollte die Web-Anwendung auf mehreren Browsern getestet werden.

Performance

Ein Entscheidungskriterium zum Einsatz von Ajax können auch Performance-Überlegungen sein. Generell lässt sich festhalten, dass bei der Verwendung von Ajax eine größere Anzahl von (XMLHTTP)-Requests an den Server gesendet werden als bei klassischen Web-Anwendungen.

Dies führt zu einer höheren Beanspruchung des Servers. Andererseits können über XML-HTTP-Requests Daten gezielter angefordert werden, sodass sich das zu übertragene Datenvolumen unter Umständen deutlich reduzieren lässt.

Fazit

Hat man sich einmal mit den Ajax-Tags vertraut gemacht, lassen sich diese zügig auf andere Anwendungsfälle übertragen. An den passenden Stellen eingesetzt, führt die asynchrone, im Hintergrund ablaufende Kommunikation mit dem Server zu mehr Komfort bei der Bedienung.

Das zu übertragende Datenvolumen lässt sich in bestimmten Fällen stark reduzieren, was zu schnelleren Antwortzeiten führt. Ob dies die höhere Last durch eine größere Anzahl von Server-Requests wert ist, muss sicher im Einzelfall entschieden werden.

Die Dokumentation der Tags ist – wie häufig bei Open Source Projekten – sehr knapp gehalten. Es lohnt sich ein Blick auf die vorhandenen Beispiele der Ajax-Tags-Seite, da diese gut nachvollziehbar und umzusetzen sind.

Jens Stahl (info@ordix.de).

Seitenanfang

Seite drucken

Seite weiterempfehlen