Grundlagen: Asynchrones Aufrufen - AJAX

JavaScript ermöglicht objektorientierte Programmierung. Nicht nur, dass man Objekte damit selber machen kann, Browser können einem auch bereits vorgefertigte Objekte mitbringen. Ein solches Objekt, dass mittlerweile alle verbreiteten Brauser mitbringen heißt XMLHttpRequest. Es ermöglicht über JavaScript Daten zu senden und zu empfangen. Die technische Anwendung ist denkbar simpel: Man leitet eine Instanz des Objektes ab, und hat dann darin alles enthalten, was man für die Kommunikation mit dem Server braucht:

var connection = new XMLHttpRequest;

Mit dieser einen Zeile haben wir das getan. Unsere Instanz heißt connection und über diese können wir nun auf alle Funktionalitäten zugreifen, die uns XMLHttpRequest bietet. Microsoft hat dieses Objekt allerdings erst mit IE7 eingeführt. Damit IE6 das auch kann, müssen wir den Vorgänger von XMLHttpRequest, ein ActiveX-Objekt namens Microsoft.XMLHTTP ableiten (dieses alte Objekt hat IE7 übrigens auch noch).

var connection;
if (window.XMLHttpRequest) {
connection = new XMLHttpRequest();
} else if (window.ActiveXObject) {
connection = new ActiveXObject("Microsoft.XMLHTTP");
}

Was auch immer der Brauser zur Verfügung gestellt hat, wir habens jetzt in der connection drin. Unser Objekt ermöglicht uns nun auf zwei Arten eine Verbindung zu einem Server aufzubauen: Synchron oder Asynchron. Bei der synchronen Methode, wird der Aufruf der Datei die wir laden wollen gestartet und dann gewartet, bis dieser Aufruf ein Ergebnis zurückliefert.

Da während der Wartezeit das Skript steht und Javascript solange nichts anderes tun kann, gibt es alternativ die Möglichkeit einen Aufruf asynchron zu starten - das Skript läuft also im Hintergrund weiter. Wenn der Aufruf dann ein Ergebnis zurückliefert, kann er zur weiteren Verarbeitung eine Funktion aufrufen. Diese Rückruf-Aktionen nennt man „Callbacks“.

Die Möglichkeit asynchrone Aufrufe zu starten ist es, die im Internet - vor Allem in Bezug auf das Web 2.0 - oft unter dem Begriff AJAX (Asynchronous Javascript And Xml) auftaucht.

Um jetzt einen Aufruf zu starten, bedienen wir uns der im abgeleiteten Objekt enthaltenen Methode open. Dabei müssen wir im ersten Parameter angeben, ob wir einen Aufruf mittels POST oder GET starten wollen. Parameter zwei ist die Datei die wir laden wollen - diese muss aus Sicherheitsgründen über die selbe Domain abrufbar sein. Und zuletzt müssen wir entscheiden, ob der Aufruf nun synchron (false) oder asynchron (true) erfolgen soll. Weil ich hier im Tutorial "Kleine Ajax Lade Funktion" bereits eine synchrone Verbindung beschreibe, gehe ich hier auf die asynchrone näher ein:

connection.open('GET', 'test.html', true);

Denn wenn man einen asynchronen Aufruf gestartet hat, bleibt die Frage offen wie man nun weiß, wann der Aufruf erfolgreich war, und wie man ihn dann weitergibt. Das Skript ist ja, weil es nicht gewartet hat bis der Aufruf erfolgreich war, vermutlich längst fertig. Dafür gibt es onreadystatechange. Sobald sich der Status unseres Aufrufs verändert, reagiert connection.onreadystatechange. Es ist also ein Event-Handler, so wie onClick zum Beispiel und wenn es ausgelöst wird, müssen wir ihm sagen was es zu tun hat:

connection.onreadystatechange = function() {
//do something
}

Wer die Funktion die hier dann abgearbeitet werden soll lieber separat haben will:

function doSomething()
{
//do something
}
connection.onreadystatechange = doSomething;

OnReadyStateChange reagiert allerdings bei JEDER Veränderung die unser Aufruf durchmacht. Davon gibt es insgesamt vier, wobei 0 bedeutet, dass der Aufruf (noch) nicht gestartet wurde, 1 heißt, dass gerade geladen wird, 2 steht für den abgeschlossenen Ladeprozess, aber nicht für die fertige Verarbeitung des Aufrufs, dafür steht 4. Dann gibt es noch 3, das bedeutet, dass er wartet. In den meisten Fällen wird nur 4 gebraucht: Man will wissen wann der Aufruf fertig ist. Damit unsere Funktion doSomething jetzt nicht bei jeder Statusveränderung greift, muss eine Abfrage rein, die feststellt WAS sich verändert hat, sprich welchen Status unser Aufruf jetzt hat. Ansprechen tut man den Status über readyState.

function doSomething()
{
if (connection.readyState == 4) {
// Request ready. Do something ;-P
}
}

Damit ein Aufruf letztendlich klappt muss er noch vollständig sein. connection.open() reicht nämlich nicht um einen Aufruf abzusetzen, dann baut man zwar eine Verbindung auf, es tut sich aber nix. Man muss etwas mitsenden. Hat man nichts mitzusenden, muss man zumindest nichts senden :-P

connection.send(null);

Hat alles geklappt findet man das Geholte in der responseText:

alert(connection.responseText);

Das Ganze gerafft(?):

var connection;
if (window.XMLHttpRequest) {
connection = new XMLHttpRequest();
} else if (window.ActiveXObject) {
connection = new ActiveXObject("Microsoft.XMLHTTP");
}

if (connection) {
connection.open('GET', 'test.html', true);
connection.onreadystatechange = doSomething;
connection.send(null);
}

function doSomething()
{
if (connection.readyState == 4) {
alert(connection.responseText);
}
}

Wer das Asynchrone nicht braucht, findet hier auf der Seite auch ein Tutorial zum synchronen Absetzen eines Aufrufs.

Kommentare

unkie
unkie am Mittwoch, 16. Mai 2007 um 22:47

Zuletzt bearbeitet von EaStErDoM Am 19.01.2038 um 04:14:07

cool :D

warden-666 am Dienstag, 5. Juni 2007 um 19:40

Sehr nettes tutorial :-) könntest noch mehr schriben über ajax wär dir sehr dankbar :-)

Markus René Einicher
Markus René Einicher am Mittwoch, 6. Juni 2007 um 10:23

Habich fest vor. Gleich mach ich eine Ajax Umblätter-Funktion. Zeit is halt rar.