Question

I need a function that click one link, send ajax request to 2 pages one by one.

first send data to page1.php, when finish page1’s work, back the data to the main page, then send data to page2.php do another ajax process and return data to the main page.

I write page2.php Request in page1.php document.getElementById("div1").innerHTML = HttPRequest.responseText;, but this will only return the page2's data and miss back the data from page1.php

in firebug , consule:

page1.php (always show loading.gif)
page2.php 200 OK 2199ms

how to do the ajax one by one well? Thanks.

function myajax(text) {
      var HttPRequest = false;
      if (window.XMLHttpRequest) {
         HttPRequest = new XMLHttpRequest();
         if (HttPRequest.overrideMimeType) {
            HttPRequest.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) {
         try {
            HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      } 
      if (!HttPRequest) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
        var url = 'page1.php';
        var pmeters = "text=" + text;
        HttPRequest.open('POST',url,true);
        HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        HttPRequest.send(pmeters);
        HttPRequest.onreadystatechange = function()
        {

             if(HttPRequest.readyState == 4) 
              {
               document.getElementById("div1").innerHTML = HttPRequest.responseText;

               var url = 'page2.php';
                    var pmeters = "text=" + text;
                    HttPRequest.open('POST',url,true);
                    HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    HttPRequest.send(pmeters);
                    HttPRequest.onreadystatechange = function()
                    {

                         if(HttPRequest.readyState == 4) 
                          {
                           document.getElementById("div2").innerHTML = HttPRequest.responseText;
                          }
                    }
              }
        }
   }

Answer 1

There are two options to do it.

1. Use Ajax in Synchronous mode, so the code will wait until you get results from page1
2. Call the Ajax method for Page2 only at the response of Page1

Option 2 is better since it work in Asynchronous mode.

Here is a pseudo code:

 var xhr = new XMLHttpRequest();
 xhr.open( ..)
 xhr.onreadstatechange = function() {
      // handle page1 response

      // do page2 reauest
      var xhr2 = new XMLHttpRequest();
      xhr2.open( ... )
      xhr2.onreadystatechange =  function() {
        // handle page2 response

      }
      xhr2.send(null);
 }
 xhr.send(null);