Question

我正在尝试一个接一个地向同一页面发出两个AJAX请求。但是，我只收到最后一个请求的回复。我有以下代码。

<html>
<head>
<script type="text/javascript">
var xmlhttp;

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET","getcdr.php?r=2",true);
xmlhttp.send();

xmlhttp.open("GET","getcdr.php?r=4",true);
xmlhttp.send();

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
      document.getElementById("myTab").innerHTML=document.getElementById("myTab").innerHTML+xmlhttp.responseText;
 }
} 


</script>
</head>
<body>
<table id="myTab">
<tr><td>SL</td><td>MAL</td></tr>
</table>
</body>
</html>

Answer 1

您的第二个请求是覆盖您的第一个请求。由于您正在使用异步请求，因此您应该利用回调来进行顺序回调，尤其是当一个请求依赖于另一个请求时。

考虑在第一个请求的回调中发出第二个请求。

function makeRequestOne(){
  var xmlhttp;

  xmlhttp = new XMLHttpRequest();

  xmlhttp.open("GET","getcdr.php?r=4",true);
  xmlhttp.send();

  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      console.log("request one complete, make second request");
      console.log(xmlhttp.responseText);
      makeRequestTwo();
    }
  }
}

function makeRequestTwo(){
  var xmlhttp;

  xmlhttp = new XMLHttpRequest();

  xmlhttp.open("GET","getcdr.php?r=2",true);
  xmlhttp.send();

  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      console.log("request two complete");
      console.log(xmlhttp.responseText);
    }
  }
}

makeRequestOne();

虽然这个例子有点冗长，但更多的是要说明。

AJAX顺序请求到同一页面

1 个答案: