AJAX

AJAX (Asynchronous JavaScript and XML) ist eine Technologie, welche es erlaubt, asynchron Daten zwischen dem Browser und einem Webserver zu übertragen. AJAX wird eingesetzt, um Inhalte zur Laufzeit der Anwendung nachzuladen oder Informationen zu aktualisieren und somit den Seiteninhalt aktiv zu verändern. Des Weiteren können mittels der AJAX-Technologie auch Daten an den Server mittels GET oder POST gesendet werden.

Grundlagen

Eine Anfrage (engl. request) mittels AJAX ist im Grunde nichts anderes als eine HTTP-Anfrage. In unserem ersten Beispiel wollen wir mittels der AJAX-Anfrage lediglich den Inhalt einer Textdatei abrufen. Um eine AJAX-Anfrage in JavaScript zu senden, müssen wir zuerst ein XMLHttpRequest-Objekt (Abkürzung XHR) instanziieren.

Die Eigenschaft timeout ermöglicht die Einstellung eines Timeouts. Nun gibt es noch eine weitere wichtige Eigenschaft, welcher eine Funktion zugewiesen wird: onreadystatechange. readystatechange ist ein Event, welches ausgelöst wird, sobald sich der Wert der Eigenschaft readyState ändert. Diese Eigenschaft ändert sich wiederum bei Änderung des Anfragestatus. Die Eigenschaft readyState enthält einen nummerischen Wert zwischen 0 und 4: 0 = Anfrage noch nicht ausgeführt, 1 = Verbindung zum Server hergestellt, 2 = Anfrage gesendet, 3 = Empfange Antwort (Response), 4 = Antwort erhalten. Über die Eigenschaft status lässt sich des Weiteren der HTTP-Statuscode abfragen. Dieser sollte 200 sein. Der Wert 404 deutet darauf hin, dass die Datei auf dem Server nicht existiert. Um die Antwort (engl. response), welche wir vom Server empfangen haben, abzurufen, können wir die Eigenschaft responseText verwenden.

Nachdem wir nun alle wichtigen Eigenschaften gesetzt und unsere Ereignisfunktion definiert haben, können wir nun die Anfrage senden. Hierfür rufen wir zuerst die Funktion open() und anschließend die Funktion send() auf. Der Funktion open() wird die HTTP-Methode (GET oder POST), die URL (bei Verwendung von GET evtl. mit Parametern) und true (für asynchrone Abarbeitung) oder false (für synchrone Abarbeitung) übergeben. Synchrone AJAX-Anfragen sollten nicht verwendet werden, da dadurch die Ausführung von anderem Code blockiert wird. Der Funktion send() werden die POST-Daten (falls es sich um ein POST-Request handelt) übergeben. Bei Verwendung von GET wird der Funktion kein Parameter übergeben.

Text-Datei:

Hallo! Dieser Inhalt wurde mittels AJAX abgerufen.

HTML-/JS-Datei:

var req = new XMLHttpRequest();
req.onreadystatechange = function ()
{
    if (req.readyState == 4 && req.status == 200)
        alert(req.responseText);
};
req.timeout = 3000;
req.open("GET", "ajax-test.txt", true);
req.send();

Wichtig: Bei der Verwendung von POST muss u. U. mittels der Funktion setRequestHeader() ein HTTP-Header gesetzt werden. Der Funktion wird zum einen der Header-Name und zum anderen der Header-Wert übergeben. In dem genannten Szenario wäre der Header-Name Content-Type und der dazugehörige Wert application/x-www-form-urlencoded. Die Kodierung der POST-Daten erfolgt dann über das bekannte Schema name1=wert1&name2=wert2 etc..

AJAX mit XML

Oft wird AJAX, wie man vom Namen auch schon vermuten kann, in Verbindung mit XML-Dateien verwendet. Dabei muss, abgesehen vom Abruf der Daten, nichts Besonderes beachtet werden. Die XML-Elemente und Attribute werden, nicht wie beim obigen Beispiel, mittels der Eigenschaft responseText abgerufen, sondern mittels responseXML. Die Eigenschaft responseXML enthält das DOM der XML-Datei. Damit ist es nun möglich, durch die Elemente zu navigieren und diese zu selektieren. Um den eigentlichen Inhalt (Text-Inhalt) eines XML-Elements abzurufen, benötigen wir die Eigenschaften childNodes und nodeValue (siehe Beispiel).

XML-Datei:

<?xml version="1.0" ?>

<person>
	<vorname>Peter</vorname>
	<nachname>Meyer</nachname>
</person>

HTML-/JS-Datei:

var req = new XMLHttpRequest();
req.onreadystatechange = function ()
{
    if (req.readyState == 4 && req.status == 200)
        alert("Name: " + req.responseXML.getElementsByTagName("vorname")[0].childNodes[0].nodeValue + " " + req.responseXML.getElementsByTagName("nachname")[0].childNodes[0].nodeValue);
};
req.timeout = 3000;
req.open("GET", "ajax-test.xml", true);
req.send();

AJAX mit JSON

AJAX kann auch mit dem JSON-Dateiformat kombiniert werden. Vorteil von JSON im Vergleich zu XML ist zum einen die teilweise kürzere Darstellung / Schreibweise und zum anderen die einfachere Kombination mit JavaScript. JSON wird in einem an JavaScript angelehnten Objektsyntax angegeben. JSON erlaubt Datentypen wie String (in einfachen oder doppelten Anführungszeichen), Number, Array (mit eckigen Klammern) und Object (mit geschweiften Klammern). Die Notation erfolgt dabei ähnlich wie in JavaScript. Mittels der Funktion JSON.parse() lässt sich dann der JSON-Code in ein JS-Objekt umwandeln. Das folgende Beispiel soll lediglich demonstrieren wie mittels AJAX JSON-Daten verarbeitet werden können.

JSON-Datei:

{
	"vorname"  :   "Peter",
	"nachname" :   "Meyer"
}

HTML-/JS-Datei:

var req = new XMLHttpRequest();
req.onreadystatechange = function ()
{
    if (req.readyState == 4 && req.status == 200)
    {
        var daten = JSON.parse(req.responseText);

        alert("Name: " + daten.vorname + " " + daten.nachname);
    }
};
req.timeout = 3000;
req.open("GET", "ajax-test.json", true);
req.send();