Eine kurze, einfache Ajax Lade-Funktion

Eine einfache Funktion mit der man den Inhalt einer Datei per AJAX schnell holen und gleich weiterverarbeiten kann.

Zuerst laden wir das für den AJAX-Request zuständige Javascript-Objekt. Bei Standard-Browsern ist das XMLHttpRequest, bei MSIE das ActiveX-Objekt Microsoft.XMLHTTP:

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

Alles was wir benötigen um einen AJAX-Aufruf zu machen, haben wir jetzt in der Variabel verbindung.

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

Dafür verantwortlich ist die Funktion open. Wenn wir jetzt einen GET-Aufruf starten wollen, sieht das so aus:

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

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

Das false im dritten Parameter des Aufrufs stellt ein, ob unser Aufruf synchron oder asynchron erfolgt. Damit gibt man an, ob darauf gewartet werden soll, bis ein Ergebnis zurückkomt (synchron - false) oder, ob einfach weitergemacht wird (das wäre dann asynchron - true).

Wenn du open synchron (true) aufrufst, wartet dein Skript so lange bis etwas zurückkommt. Es macht erst weiter, wenn ein Ergebnis da ist. In den meisten Fällen wird asynchron benutzt, so wird das ganze Prozedere nicht lahm gelegt, 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, also null:

verbindung.send(null);

Was wir mit diesem Aufruf geholt haben, liegt in unserer Variabel verbindung sofort als Eigenschaft responseText bereit.

Um darauf zuzugreifen machen wir:

unserGeholtes = verbindung.responseText;

Das kurze Skript als praktische Funktion:

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

verbindung.open('GET', datei, false);
verbindung.send(null);
return verbindung.responseText;
}

Kommentare

Markus René Einicher
Markus René Einicher am Sonntag, 15. April 2007 um 18:10

hghdghzwrwzrzrw

unkie
unkie am Montag, 16. April 2007 um 16:25

mhmmm dürfte dann ja bald fertig sein, oder? :D

Markus René Einicher
Markus René Einicher am Dienstag, 17. April 2007 um 18:47

mei des habi schon wieder vergessen, wart ich kopiers schnell rein.

unkie
unkie am Sonntag, 22. April 2007 um 12:51

schaut ja nett aus :) aber wie wäre es mit einem genauerem beispiel (also eine XML datei mit der man arbeitet z.b. ;))

Markus René Einicher
Markus René Einicher am Dienstag, 24. April 2007 um 19:02

Ja, schreib du ruhig eine ;)

unkie
unkie am Mittwoch, 25. April 2007 um 14:55

ich kann kein ajax :D darum bitte ich ja um ein ganz genaues tutorial :P