ajax请求逐个

Question

我需要一个函数，单击一个链接，发送一个Ajax请求到2个页面。

首先发送数据到page1.php，当完成page1的工作后，将数据返回到主页面，然后发送数据到page2.php做另一个ajax进程并返回数据到主页面。

我写page1.phpdocument.getElementById("div1").innerHTML = HttPRequest.responseText;page2.php要求，但这只会返回page2's数据和firebug错过回从page1.php

数据，consule：

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

如何做AJAX一个一个好？谢谢。

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

有两种方法可以做到这一点。

1. 使用Ajax在同步模式下，这样的代码会等到你从第1页
2. 电话只在第1页
的响应

选项2阿贾克斯方法第2页是因为它更好地得到结果以异步模式工作。

下面是一个伪代码：

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);