Grundlegende Java Web-Technologien

AJAX

Doch wie gelingt es heute vielen Betreibern von Internetseiten, mit den sehr einfachen Konzepten wie HTTP-Anfragen und -Antworten eine Web-Anwendung anzubieten, die der Funktionalität einer PC-Anwendung gleicht?
Viele Elemente werden als kleine Fenster ein- und ausgeblendet; sogar per Rechtsklick verfügbare Kontextmenüs sind Bestandteil aktueller Webseiten. Das alles ist mittlerweile auch ohne zusätzliche Software wie Adobe Flash oder Microsoft Silverlight möglich.

Ein Blick zurück: Seit der Geburtsstunde des Internets werden Webseiten über das Transportprotokoll HTTP abgerufen. Selbstverständlich konnte sich in den 90er Jahren noch kaum jemand vorstellen, wie sich der Funktionsumfang von Webseiten entwickeln wird. Und so bestand die Aufgabe von HTTP lediglich darin, eine Webseite per URL anfragen und den Inhalt vollständig empfangen und anzeigen zu können. Jeder Klick auf einen Hyperlink lud eine komplett neue Seite. Der Unterschied zu heutigen Internetseiten besteht im Wesentlichen darin, dass komplizierte Eingabeelemente wie zum Beispiel eine Kalenderkomponente zur Auswahl eines bestimmten Datums (siehe untenstehende Abbildung) von Frameworks bereitgestellt werden. Damit diese Komponenten funktionieren und nicht jeder Klick - wie anfangs im HTTP-Protokoll vorgesehen - zum erneuten Laden einer Seite führt, sind sie aus einer Vielzahl von bewährten Web-Technologien zusammengesetzt. Sie werden unter dem Namen AJAX (Asynchronous Javascript and XML) geführt.

AJAX ist also keine eigenständige Technologie. Vielmehr baut es auf den bereits bekannten Basistechnologien wie (X)HTML, CSS und XML auf, sowie auf die hier nicht weiter im Detail behandelten Technologien JavaScript und DOM. Wie bereits der Name verrät, ist JavaScript eine Skriptsprache mit Java-ähnlicher Syntax, die schon vor der Erfindung von JSP in HTML-Code eingebunden werden konnte, um für dynamischere Webseiten zu sorgen (z.B. um Mausklick-Ereignisse des Benutzers abzufangen und zu verarbeiten). DOM (Document Object Model) ist eine Programmierschnittstelle, mit der auf die einzelnen Elemente einer HTML- oder XML-Datei zugegriffen werden kann. Diese Schnittstelle wird benötigt, um die Teile einer Seite gezielt benennen zu können, die von einer Benutzerinteraktion betroffen sind (z.B. die Zeilen einer Tabelle).

Das Zusammenspiel der Technologien einer durch AJAX unterstützten Webseiten-Komponente lässt sich gut am Beispiel des oben abgebildeten Kalenders erklären:

1. Um den Kalender zu öffnen und ein Datum auszuwählen, klickt der Benutzer auf das Kalendersymbol neben dem Datumsfeld. Anstatt unmittelbar einen HTTP-Request auszulösen, der an den Server geschickt wird und eine neue Seite samt aufgeklappter Kalender-Komponente zurückliefert, löst er dadurch eine kleine JavaScript-Funktion aus. Sie ist zuvor vom Webentwickler in der HTML-Seite eingebunden und mit der Kalender-Komponente verknüpft worden.


2. Die JavaScript-Funktion löst wiederum einen speziell angepassten HTTP-Request aus, der nicht die gesamte Seite anfragt, sondern nur einen bestimmten Inhalt (hier: die Kalenderinformationen zum aktuellen Monat).


3. Der Server antwortet mit einer XML-Datei, die die Kalenderinformationen bereithält.
   Sie könnte zum Beispiel wie folgt aussehen:
   <month year="2013" lang="de">
  <monthOfYear>9</monthOfYear>
  <name>September</name>
  <day>
    <dayOfMonth>1</dayOfMonth>
    <weekDay>Sonntag</weekDay>
  </day>
  <day>
    <dayOfMonth>2</dayOfMonth>
    <weekDay>Montag</weekDay>
  </day>
  ...
</month>


4. Die JavaScript-Funktion liest die XML-Daten aus und fügt sie mithilfe der DOM-Schnittstelle in diejenige HTML-Komponente ein, die das Kalenderblatt darstellt. Der Browser erkennt die Manipulation über die DOM-Schnittstelle und zeichnet den betroffenen Abschnitt der Seite neu.