Hauptmenü

Untermenü

JavaScript - Ajax

1. Ich habe lange überlegt

... wo ich diesen Abschnitt einbauen soll. Für Anfänger ist es eigentlich zu anspruchsvoll, für Fortgeschrittene zu läppisch. Und in die Übersicht der Objekte wollte ich es auch nicht packen, da es doch einiger Erläuterungen bedarf. Also habe ich es einfach hier hin geklatscht. Sei's drum.

2. Erläuterung

Ajax steht für Asynchronous JavaScript and XML. Damit sind serverseitige Anfragen im Hintergrund möglich, ohne dass die jeweilige Seite neu geladen werden muss. Das ganze geschieht dabei im Hintergrund, so dass der Anwender davon nichts mitbekommt. Ach ja, erfunden hat das Microsoft. Ja, ihr habt richtig gehört, auch die können von Zeit zu Zeit mal was wirklich Vernünftiges produzieren.

Das Prinzip

Ajax Funktionsprinzip

3. Das Objekt

Hier gibt es mal wieder unterschiedliche Implementierungen bei den einzelnen Browsern. Beim IE 6 läuft es über ein ActiveX-Control, beim Firefox und Konsorten über ein normales Objekt und der IE 7/8 kann (meines Wissens nach) beides. Hinzu kommt noch, dass es beim Internet Explorer noch verschiedene Versionen gibt. Normalerweise reicht aber da die Standard-Variante.


// Internet Explorer
ajax_obj = new ActiveXObject("Microsoft.XMLHTTP");
// Die anderen Browser
ajax_obj = new XMLHttpRequest();

4. Der Ablauf

Verbindungsaufbau


ajax_obj.open ('GET/POST','script.php?p=param',true/false);

Erläuterung

Der erste Parameter legt die Übertragungsmethode fest, also entweder GET oder POST. Der zweite definiert das aufzurufende serverseitige Script. Wenn man vorher GET gewählt hat, so müssen hier alle notwendigen Informationen an die URL angehängt werden. Beim dritten Parameter legt man fest, ob die Übertragung asynchron (true) oder synchron (false) erfolgen soll. Der Unterschied liegt darin, dass bei der synchronen Übertragung der Browser so lange blockiert ist, bis der komplette Request durchgeführt worden ist. Daher nimmt man eigentlich immer die asynchrone Variante.

POST

Wenn man diese Übertragungsart wählt, so muss immer dazu der notwendige Header gesendet werden.


ajax_obj.setRequestHeader('Content-Type'
    
'application/x-www-form-urlencoded');

Daten senden

Das geschieht mit der Methode send. Die ist besonders wichtig, wenn man als Übertragungsart POST gewählt hat, denn dann muss man die Inhalte aller Felder in einen GET-tauglichen Parameter-String umwandeln. Bei der GET-Variante haben wir die Werte ja schon als Parameter an das Script übergeben.


// POST
str 'feld_1=' bla '&' 'feld_2=' blubber;
ajax_obj.send(str);
// GET
ajax_obj.send(null);

onreadystatechange

Bei einem Ajax-Request gibt es vier verschiedene Stufen, die durchlaufen werden. Jedes Mal, wenn der entsprechende Status sich ändert, tritt diese Art von Event-Handler in Aktion.


ajax_obj.onreadystatechange = function ()
{

}

Den Status überprüfen

onreadystatechange informiert uns laufend über Selbigen. Und die entsprechenden Werte kann man mit readyState sowie status abrufen. Letzterer liefert uns den entsprechenden HTTP-Zustandscode, während es bei readyState fünf verschiedene Werte sind.

So kann man dann mit folgender Bedingung prüfen, ob der Request erfolgreich durchgeführt worden ist:


if (ajax_obj.readyState == && ajax_obj.status == 200)

Die Daten holen

Handelt es sich um das XML-Format, so geschieht das ganz einfach mit responseXML. Ansonsten nimmt man responseText, wenn man ein anderes Format gewählt hat.


// XML
xml ajax_obj.responseXML
// andere
xml ajax_obj.responseText

Beenden

Um einen Ajax-Request zu beenden, benötigt man nur eine klitzekleine Anweisung.


ajax_obj.abort(); 

Sinnvoll ist das besonders bei der Abfrage von Tastaturereignissen. Wenn man also zum Beispiel eine Suche ähnlich wie Google Suggest programmiert. Da sollte man bei jeder Eingabe in ein Suchfeld zuerst den vorherigen Request beenden.

5. Die Verarbeitung

Dafür muss man sich schon recht gut mit dem Auslesen oder der Manipulation von DOM-Knoten auskennen, denn sonst kann man mit den Daten herzlich wenig anfangen. Wer sich also mit Ajax beschäftigen will, kommt um diese Thema nicht herum. Und für die Praxis gibt es ein entsprechendes Tutorial, wo ich ausführlich darauf eingehen werde.

zurück zum vorherigen Abschnitt