title: Multiple ajax requests without requests and responses clashing
body: <p>I keep running into a problem with multiple ajax requests that I tend to send to fetch data to refresh different components of a webpage. I always use my custom ajax functions(shared below) to do the ajax calls. And I find that the requests at times collides. I also make sure that the requests are sent in intervals of two seconds hoping that it serializes the way I send requests. Still I find that it does collide at times. What Am I doing wrong? Or rather, what changes can I do to my functions to make it work seamlessly, everytime?</p>
  
  <p>Functions : </p>
  
  <pre><code>function get_xmlhttp_obj()
  {
      try
      {
          // Firefox, Opera 8.0+, Safari
          xmlHttp = new XMLHttpRequest();
      }
      catch (e)
      {
          // Internet Explorer
          try
          {
              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch (e) 
          {
              try
              {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e)
              {
                  alert(invalidbrowser);
              }
          }
      }
      return xmlHttp;
  }
  
  function passUrl(url1)
  {    
      url1 = url1+"&amp;sid="+Math.random();
      xmlHttp=get_xmlhttp_obj();
      xmlHttp.onreadystatechange = function() { stateChanged(xmlHttp); }; 
      xmlHttp.open("GET", url1, true);
      xmlHttp.send(null); 
  }
  
  
  function passposturl(url1,params)
  {
      xmlHttp=get_xmlhttp_obj();
      xmlHttp.open("POST", url1, true);
      xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlHttp.setRequestHeader("Content-length", params.length);
      xmlHttp.setRequestHeader("Connection", "close");
      xmlHttp.onreadystatechange =  function() { stateChanged(xmlHttp); };        
      xml Http.send(params);  
  }
  
  function stateChanged(xmlHttp) 
  {
      if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3 || xmlHttp.readyState == 0) 
      {
           // Wait state. I load loading text or image here
      }
      else if(xmlHttp.readyState == 4)
      {
           // catch the response and display in the specific container.
           if(loadflag=="global_live_xjournal_feed")
           {
             document.getElementById("global_live_xjournal_feed").innerHTML=xmlHttp.responseText;
             setTimeout("call_refresh_global_xjournal_feed", 5000);
           }
      }
  } 
  
  
  function call_refresh_global_xjournal_feed(obj)
  {
      if(obj=="global_xjournal_feed")
      {
           var url = "ajax_activity_feed.php?id="+obj;
           passUrl(url);
           loadflag="global_live_xjournal_feed";
  }
  }
  </code></pre>