DOM-Manipulation JavaScript - Praxistutorial 2 - Anfrage senden
1. Die Abschnitte
- Einführung
- Die Initialisierung
- Anfrage vorbereiten
- Daten zusammenstellen
- Anfrage senden
- Der PHP-Code
- Das Ergebnis auswerten
- Die select-Felder manipulieren
- Die Ergebnisse ausgeben
- Die Links generieren
- Noch eine Anfrage
- Inhalte einfügen
- Ein paar Anmerkungen
2. Die Methode sendPostRequest
... legen wir im Gegensatz zu prepareRequest
als privat fest. So kann man nicht von außerhalb der "Klasse"
ajaxTut
darauf zugreifen. Wer das Prinzip nicht kennt, sollte sich vorher mal
das hier ansehen.
function ajaxTut (fields)
{
...
function sendPostRequest()
{
...
}
}
3. Das serverseitige Script aufrufen
function sendPostRequest()
{
var ie_rand = parseInt(Math.random() * 999999);
ajax_obj.open (
'POST',
'request.php?rand=' + ie_rand,
true
);
}
Erläuterung
Ganz wichtig hier ist ie_rand = parseInt(Math.random() * 999999);
! Denn leider cached der Internet Explorer
bei Ajax-Anfragen alles, was nicht schnell genug auf den Bäumen ist. Also legen wir einen Zufallswert als GET
-Parameter
fest, der sich jedes Mal ändert, um das zu unterbinden.
ajax_obj.open
... erwartet drei Parameter. Zuerst die Übertragungsmethode, dann das aufzurufende Script und beim dritten wird festgelegt,
oder die Übertragung asynchron (true
) oder synchron (false
) erfolgen soll. Grundsätzlich sollte
man sich für Ersteres entscheiden, denn bei einem synchron laufenden Ajax-Request wird der Browser so lange blockiert, bis
alles vorbei ist. Und glaubt mir, das werden eure User nicht mögen.
4. Senden
Hier muss man bei der Übertragungsmethode POST
auf zwei Besonderheiten achten. Erstens, es muss vorab ein Header
abgeschickt werden, damit das zu verarbeitende Script weiß, wie es die Daten entgegen nehmen kann. Zweitens, die POST
-Werte
müssen separat gesendet werden. Den Unterschied zur GET
-Methode zeige ich euch später. Dann werdet ihr es auch besser
verstehen.
function sendPostRequest()
{
...
ajax_obj.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
ajax_obj.send(str);
}
5. Empfangen
function sendPostRequest()
{
...
ajax_obj.onreadystatechange = function ()
{
if (ajax_obj.readyState == 4 && ajax_obj.status == 200)
{
xml = ajax_obj.responseXML;
analysePostXml();
}
}
}
Erläuterung
Bei der Theorie zu Ajax habe ich schon darauf hingewiesen, dass ein Request bestimmte
Stufen durchläuft. Jedes Mal wenn die sich ändert, tritt der Event-Handler onreadystatechange
in Aktion. Und erst
wenn die Bedingung if (ajax_obj.readyState == 4 && ajax_obj.status == 200)
erfüllt ist, so wurde der Request
komplett durchgeführt. Wer sich jetzt fragt, hä?, der sollte ganz schnell zur Theorie, und sich schleunigst das Basis-Knowhow
aneignen.
Der Rest ist auch ganz schnell erklärt. In der Variablen xml
haben wir das Ergebnis der Anfrage in Form eines
XML-Dokuments. Und mit der Methode analysePostXml
wollen wir im übernächsten Abschnitt die Daten verarbeiten.
Aber zuerst schauen wir uns mal den PHP-Code an.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt