Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 2 - Anfrage senden

1. Die Abschnitte

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