AJAX: Mühelos einsetzen (Asynchronous Javascript and XML)

Eine kurze Erläuterung mit einem einfachen Beispiel, wie die AJAX-Technologie im HTML-Seiten eingesetzt werden kann.

Die Funktionsweise von AJAX

Bei AJAX handelt sich um ein Verfahren, bei dem aus einer HTML-Seite im Webbrowser Daten mit dem Web-Server ausgetauscht werden. Normalerweise wird bei einer Benutzeraktion immer eine Anfrage an den Server gerichtet und eine HTML-Seite als Antwort empfangen und dargestellt. Mit AJAX dagegen werden per JavaScript asynchrone Daten (z. B. XML) an den Server gesendet. Diese werden auf dem Server verarbeitet und in der Antwort werden nur die benötigten Daten gesendet. Diese Daten werden dann mit DHTML dargestellt.

Die Nachteile der AJAX-Technologie

  • Die JavaScript Unterstützung im Webbrowser muss aktiviert sein.
  • Im Microsoft Internet Webbrowser muss das Ausführen aktiver Inhalte erlaubt sein.
  • Die verschiedenen Eigenarten der Webbrowser müssen berücksichtigt werden.
  • Die Funktionalität des Zurück-Buttons muss berücksichtigt oder ausgeschaltet werden.
  • Wenn der Benutzer eine Bookmark setzt, gelangt er auf die entsprechende Seite aber nicht in den gleichen Zustand.
  • Auch mit dieser Lösung muss die Zeit zwischen Anfrage und Antwort (Latenzzeit) berücksichtigt werden. Insbesondere, weil der Benutzer ohne zusätzliche Maßnahmen nicht erkennt, dass eine Anfrage im Hintergrund erfolgt.

Ein AJAX-Beispiel mit XMLHttpRequest

Wenn Sie unten den Schalter Lade Inhalt betätigen, wird der blau umrandete Inhalt per AJAX ausgetauscht. Dieses Beispiel arbeitet mit dem  XMLHttpRequest auf eine statische XML-Datei. Getestet wurde dieses mit Firefox v1.0.5 und Microsoft Internet Explorer v6.0 SP2.

Lade InhaltZurücksetzen

Leerer Inhalt…


Mit folgenden Anweisungen wird ein  XMLHttpRequest erzeugt. Für den IE muss ein ActiveX-Objekt des Microsoft XML-Parser instanziert werden.

Als nächstes wird die JavaScript Funktion  processStateChange() gesetzt, welche als Event-Handler für AJAX fungiert. Die Funktion des Event-Handlers wird weiter unten beschrieben.

Im nächsten Schritt wird die HTTP-Verbindung zum Server geöffnet. Dazu wird hier die Methode POST gewählt. Möglich sind aber auch noch GET, PUT oder HEAD. Der letzte Parameter bestimmt, ob die Datenübertragung synchron ( false) oder asynchron ( true) durchgeführt wird. Die URL kann übrigens aus Sicherheitsgründen nur auf die gleiche Domain der aktuellen HTML-Seite gehen. Zusätzlich kann auch ein Benutzername und ein Passwort angegeben werden: open(method, url, asynchronous-flag, username, password).

Sobald die Verbindung steht, können die Daten ( xmldata) gesendet werden. In diesem Beispiel können optional Daten in Form einer XML versendet werden. Ist dieses der Fall, xmldata != null, müssen einige Parameter im Header des Request gesetzt werden. Danach kann der Request abgesendet werden. Die Methode send() wird direkt zurückkehren, da wir eine asynchrone Kommunikation gewählt haben. Im anderen Fall hätte diese Methode blockiert, bis die Kommunikation abgeschlossen ist.

Die weitere Verarbeitung der Antwort findet im Event-Handler statt. Insgesamt sind vier Verbindungszustände definiert, dabei bedeutet der Wert 4, dass die Antwort vom Server vollständig empfangen ist. Dieser Status dürfte der Wichtigste von allen sein (Quelle). Die Bearbeitung ist in eine Funktion responseComplete() ausgelagert worden.

Zuvor wurde in der aktuellen HTML-Seite ein Bereich für die Aufnahme der Antwort vorbereitet.

Als nächstes wird mit der DOM-Methode getElementById() dieses HTML-Element gesucht. Falls dieses Element nicht gefunden wird, wird in der Statuszeile des Browsers eine Fehlermeldung angezeigt. Als nächstes muss die Antwort geprüft werden. Im Falle des HTTP-Codes 200 ist alles in Ordnung, ansonsten wird der Text des DIV-Elements durch eine Fehlermeldung ersetzt (die Methode statusText() liefert die Meldung zum HTTP-Status). Die Antwort wird mit der Methode responseText() als eine Zeichenkette abgefragt. Mit der Methode responseXML() kann die Antwort auch als DOM-Dokument abgefragt werden, wenn der Server die Daten mit dem MIME-Type text/xml gesendet hat.

Zum Abschluss noch die Funktion errorHandler(). Diese wird allerdings nur aufgerufen, wenn ein nicht abgefangener Verbindungsstatus vorliegt.

Hier ist noch ein kleines Beispiel, wie prinzipiell eine XML-Antwort verarbeitet werden kann.

 Die Literaturempfehlungen

Frank Rahn

Frank Rahn ist Softwarearchitekt. Er unterstützt bei der Konzeption von Softwarearchitekturen mit Java-Technologie. Folge Sie ihm auf Facebook, Twitter oder Google+.

Benötigen Sie Unterstützung? Kontaktieren Sie ihn.

Hat Ihnen dieser Beitrag gefallen? Wir würden uns über Ihren Kommentar freuen! Bitte verwenden Sie Ihren bürgerlichen Namen und eine E-Mail-Adresse mit Gravatar.

Letzte Artikel von Frank Rahn (Alle anzeigen)

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.