CODEWITHSUNDEEP
ajax
Kamrul Khan
Kamrul Khan

Reputation: 3350

AJAX sequential request to the same page

I am trying to make two AJAX requests to the same page one after another. But, I am only getting response of the last request. I have the below code.

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

Upvotes: 0

Views: 1203

Answers (1)

thescientist
thescientist

Reputation: 2948

Your second request is overwriting your first request. Since you're using async requests, you should be leveraging callbacks to make sequential callbacks, especially if one request depends on another.

Consider making the second request within the callback of the first request.

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

although this example is a little verbose, it is intended more to illustrate.

Upvotes: 3

Related Questions