Question

I have two AJAX scripts, with xmlhttp requests.
But they’re clashing with each other, for example AJAX function 2 will display function 1’s xmlhttp.response. I was wondering if there’s a way to stop this? I already tried adding xmlhttp.close but that didn’t work.
Thanks in advance!

<script>var hello = setInterval(function()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("main").innerHTML=xmlhttp.responseText;
    xmlhttp.close;
    }
  }
xmlhttp.open("GET","ajax.php?user=" +username,true);
xmlhttp.send();
}, 1000);
</script>

 <script>var anotherone = setInterval(function()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("sub").innerHTML=xmlhttp.responseText;
    xmlhttp.close;
    }
  }
xmlhttp.open("GET","ajax.php?user=" +username +"&do=" +option,true);
xmlhttp.send();
}, 1000);
</script>

Answer 1

You have one XMLHttpRequest that you keep writing over. In each function start with the line

var xmlhttp;

And it’ll scope it to that function, rather than the page.

If you need it scoped to the page for some reason, rename one of them, so that you have e.g. both xmlhttpHello and xmlhttpAnotherone.