WebstyleZ.Net

Asynchrones Aufrufen - AJAX

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

1

var connection = new XMLHttpRequest;

Quelltext: JavaScript

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

1
2
3
4
5
6

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

Quelltext: JavaScript

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 nichts tun kann, gibt es alternativ die Möglichkeit einen Aufruf asynchron zu starten - das Skript kann also weiterlaufen. Wenn der Aufruf dann ein Ergebnis zurückliefert, kann er zur weiteren Verarbeitung eine Funktion aufrufen. Diese Möglichkeit asynchrone Aufrufe zu starten ist es, die im Internet - vor Allem in Bezug auf 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. Da der POST-Aufruf ein wenig komplizierter ist, widmen wir uns dem GET (Für den AJAX Post gibt es einen anderen Artikel). 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:

1

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

Quelltext: JavaScript

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:

1
2
3

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

Quelltext: JavaScript

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

1
2
3
4
5

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

Quelltext: JavaScript

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.

1
2
3
4
5
6

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

Quelltext: JavaScript

Damit ein Aufruf letztendlich klappt musser 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

1

connection.send(null);

Quelltext: JavaScript

Hat alles geklappt findet man das Geholte in der responseText:

1

alert(connection.responseText);

Quelltext: JavaScript

Das Ganze gerafft(?):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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);
    }
}

Quelltext: JavaScript

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