title: How do I manage multiple, overlapping XMLHttpRequests?
body: <p>I'm working on my first AJAX project, and I've started by setting up the following functions:</p>
  
  <pre><code>function sendHTTPRequest(callback,filename,data) {
  
      if (window.XMLHttpRequest) {
          httpRequest = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
      httpRequest.onreadystatechange = callback;
      httpRequest.open('POST',rootAddress+filename, true);
      httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      httpRequest.send(data);
  
  }
  
  function exampleCallback() {
  
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
          if (httpRequest.status === 200) {
              // successful, parse the XML data
          } else {
              // error
          }
      } else {
          // not ready
      }
  }
  </code></pre>
  
  <p>This has worked well but I've now gotten to the point where I have more than one simultaneous HTTP request, and my single global <code>httpRequest</code> variable isn't cutting it. It seems to me I could use an array, and <code>.push</code> a new XMLHttpRequest onto the stack each time <code>sendHTTPRequest()</code> is called, but how can I tell my various callback functions which item in the stack to parse? Or is the a better way to handle this process? (I'm using these to handle requests to different pages, with results that need to be parsed differently.)</p>
  
  <p>Thanks!</p>