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 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.

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

var request;
if (window.XMLHttpRequest) {
    // Non-IE browsers: Mozilla, Opera, Safari and Konqueror
    request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // IE browser
    try {
        // New style
        request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        // Old style
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

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.

request.onreadystatechange = processStateChange;

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).

request.open("POST", url, true);

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.

if (xmldata) {
    request.setRequestHeader("Content-Type", "text/xml");
    request.setRequestHeader("Content-Length", xmldata.length);
}

request.send(xmldata);

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.

function processStateChange() {
    switch (request.readyState) {
    case 0: // uninitialized
    case 1: // loading
    case 2: // loaded
    case 3: // interactive
        break;

    case 4: // complete
        responseComplete();
        break;

    default:
        errorHandler();
        break;
    }
}

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

<div id="content">
    <p>Dieser Bereich ist leer.</p>
</div>

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.

function responseComplete() {
    contentDiv = document.getElementById("content");

    if (contentDiv) {
        if (request.status == 200) {
            response = request.responseText;
            contentDiv.innerHTML = response;
        } else {
            contentDiv.innerHTML = "<p style='style'>Error: Status " + request.status + ", Message: " + request.statusText + "</p>";
        }
    } else {
        window.status = "No Content-DIV found";
    }
}

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

function errorHandler() {
    contentDiv = document.getElementById("content");
    if (contentDiv) {
        contentDiv.innerHTML = "<p style='style'>" + "Error: Unknown Ready State</p>";
    } else {
        window.status = "No Content-DIV found and unknown Ready State";
    }
}

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

var response = request.responseXML;
var body = response.getElementsByTagName("body");
...

Die Literaturempfehlungen

• Ajax (Programmierung)
• AJAX. schnell + kompakt (*)
• Praxiswissen Ajax. oreillys basics. (*)

• Über
• Letzte Artikel

Frank Rahn

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

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.

Letzte Artikel von Frank Rahn (Alle anzeigen)

• Wer ist der optimale Java Bean Mapper? - Freitag, 22. September 2023
• Spring Boot Webanwendung: Die ersten Schritte (Tutorial) - Montag, 28. März 2016
• Mainframe-Zugriff via Java - Sonntag, 04. Mai 2014