WebstyleZ.Net

Eine simple Ajax Lade-Funktion

Die Brauser ermöglichen das Ausführen von AJAX über ein eigenes Objekt. Bei den Standard-Brausern heißt es „XMLHttpRequest“, bei MSIE steuert man AJAX über „ActiveXObject("Microsoft.XMLHTTP")“ an.

Die folgenden sechs Zeilen leiten uns nun dieses Objekt ab, sodass wir es in der Instanz „verbindung“ verwenden können:

1
2
3
4
5
6
7

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

Quelltext: JavaScript

Alles was wir brauchen, rufen wir jetzt rückbezüglich über unsere Instanz „verbindung“ auf.

AJAX wird dabei so verarbeitet, wie du es vermutlich von gewöhnlichen HTML-Formularen kennst. Wir haben entweder die Möglichkeit einen Aufruf mit GET zu starten oder über POST.

Dafür verantwortlich ist „open“. Wenn wir jetzt einen GET-Aufruf starten wollen tun wir das so:

1
2

verbindung.open('GET', 'datei.html', false);

Quelltext: JavaScript

Was auch immer in der Datei „datei.html“ steht, wir haben es uns gerade mit AJAX geholt.

Das „true“ im dritten Parameter des Aufrufs stellt ein, ob unser Aufruf synchron oder asynchron erfolgt. Einfach gesagt, gibst du damit an, ob darauf gewartet werden soll, dass ein Ergebnis zurückkomt (synchron - false) oder, ob einfach weitergemacht wird (das wäre dann asynchron - true). Wenn du dein AJAX-Open synchron (true) machst, wartet dein Script. Es macht erst weiter, wenn ein Ergebnis zurückkommt. In den meisten Fällen wird asynchron benutzt, so wird das ganze Prozedere nicht lahmgelegt, wenn einmal ein Aufruf fehlschlägt, wir nehmen der Einfachheit halber aber jetzt den synchronen Aufruf, sprich false.

Neben dem Öffnen einer Verbindung, verlangt AJAX immer, dass etwas gesendet wird. Da wir jetzt aber nur laden wollen, schicken wir einfach „nichts“ mit:

1
2

verbindung.send(null);

Quelltext: JavaScript

So, jetzt hamas geholt, aber wo befindet sich unser Geholtes jetzt?

Es liegt in unserer „verbindung“ sofort in er Variabel „responseText“ bereit.

darauf zugreifen tun wir so:

1
2

unserGeholtes = verbindung.responseText;

Quelltext: JavaScript

Das wars schon ;)

Das kurze Skript noch als Funktion:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var verbindung;
if (window.XMLHttpRequest) {
    verbindung = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    verbindung = new ActiveXObject("Microsoft.XMLHTTP");
}
 
function lade(datei)
{
    verbindung.open('GET', datei, false);
    verbindung.send(null);
    return verbindung.responseText;
}

Quelltext: JavaScript

fertig und aus.

PS
Ich fürchte Herr Google hat eure Seite "gehackt".