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
- (1.) Im Browser wird, wie auch immer, eine Aktion ausgelöst, die einen Ajax-Request zur Folge hat.
- (2.) Das Ajax-Objekt sendet im Hintergrund eine Anfrage an ein serverseitiges Script.
- (3.) Das Ajax-Objekt nimmt das Ergebnis der Anfrage (normalerweise) als XML-Dokument entgegen.
- (4.) Anhand des Ergebnisses wird mit normalem JavaScript die jeweilige Seite geändert.
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.
- 0 (nicht initialisiert)
- 1 (lade)
- 2 (geladen)
- 3 (interaktiv)
- 4 (vollständig)
So kann man dann mit folgender Bedingung prüfen, ob der Request erfolgreich durchgeführt worden ist:
if (ajax_obj.readyState == 4 && 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.