title: AJAX function request stops previous load when called again - no jQuery please
body: <p>I got this function to load an url into an element. The problem is that if I call it repetitively, like in a loop to load several elements, the current load stops:</p>
  
  <pre><code>function ajaxGetData(url, objId)
  {
      var request;
      if (window.XMLHttpRequest) 
      { 
          request = new XMLHttpRequest();
      } 
      else if (window.ActiveXObject) 
      { 
          try 
          {
              request = new ActiveXObject('Msxml2.XMLHTTP');
          } 
          catch (e) 
          {
          try {
              request = new ActiveXObject('Microsoft.XMLHTTP');
          } 
          catch (e) {}
          }
      }
  
      if (!document.getElementById(objId))
      {
          return false;
      }
      var obj = document.getElementById(objId); /* &lt;= fix: added var */
      ajaxLoadingIndicator(obj);
  
      request.addEventListener("progress", function(event){ajaxCallBack(event, obj)}, false);
      request.addEventListener("load", function(event){ajaxCallBack(event, obj)}, false);
      request.addEventListener("error", function(event){ajaxCallBack(event, obj)}, false);
      request.addEventListener("abort", function(event){ajaxCallBack(event, obj)}, false);
  
      request.onreadystatechange = function() 
      {
          if(request.readyState === 4) 
          { 
              if(request.status === 200) 
              { 
                  obj.innerHTML  = request.responseText;
              }
              else
              {
                  obj.innerHTML = '&lt;div id="'+id+'"&gt;Error loading data.&lt;/div&gt;';
              }
          }
      };
      request.open('GET', url, true);
      request.send(null);
  }
  
  function ajaxLoadingIndicator(obj)
  {
      idBase = obj.id.split("_");
      id = idBase[0]+"_ajax_loading";
      obj.innerHTML = '&lt;div id="'+id+'"&gt;Loading&lt;/div&gt;';
  }
  
  function ajaxCallBack(e) 
  {
      // Handle each event
      switch(e.type)
      {
          case 'error':
          {
              idBase = obj.id.split("_");
              id = idBase[0]+"_ajax_error";
              obj.innerHTML = '&lt;div id="'+id+'"&gt;Server unavailable. Error loading data.&lt;/div&gt;';
          } break;
      }
  }
  </code></pre>
  
  <p>So if I do:</p>
  
  <pre><code>ajaxGetData(url1, objId1);
  ajaxGetData(url2, objId2);
  ajaxGetData(url3, objId3);
  </code></pre>
  
  <p>Only objId3 gets its content, the rest get stuck in the "loading" indicator.</p>