title: Can I "queue" XMLHttpRequest functions?
body: <p>I need to get a list of available files (stored in a directory) and processed files (stored in a database table).</p>
  
  <p>I have some JavaScript that calls a Python script and parses its (JSON) output into an object. This works nicely whether the Python is dealing with directory files or a database table.</p>
  
  <pre><code>function runGetList() {
      // request external Python script (output in JSON)
      var handleResponse = function(status, response) {
          // save JSON-from-Python as an object
          var jsonMDBList = xhr.response;
          // do stuff with the object data (build select box, build table)
      }
      var handleStateChange = function() {
          switch (xhr.readyState) {
              case 0: break; // uninitialized
              case 1: break; // loading
              case 2: break; // loaded
              case 3: break; // interactive
              case 4: // completed
                  handleResponse(xhr.status, xhr.response);
                  break;
              default: alert("unspecified error");
          }
      }
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = handleStateChange;
      xhr.open("GET", "python/GetListMDBs.py", true);
      xhr.responseType = "json";
      xhr.send();
  }
  </code></pre>
  
  <p>However, I've now reached a point where I'm going to have multiple objects (e.g. one from <code>GetListMDBs.py</code>, one from <code>GetTable.py</code>) and list them in different parts of the final HTML. My initial thought was to make <code>runGetList()</code> into a general function that can be called with a parameter for the particular Python script I need.</p>
  
  <pre><code>function getAllLists() {
      var mdbListAll = runGetList('GetListMDBs.py');
      console.log("list mdbs: " + mdbListAll);
      var mdbListTbl = runGetList('GetTable.py');
      console.log("table mdbs: " + mdbListAll);
  }
  function runGetList(filename) {
      // etc.
  }
  </code></pre>
  
  <p>This is correctly executing and getting objects from the individual Python scripts. But the <code>getAllLists()</code> function doesn't wait for that <code>return</code>ed object, it just keeps going and logs <code>list mdbs: undefined</code>.</p>
  
  <p><strong>What can I change in my approach, so the script waits for each HTTP request to finish before moving to the next one (and doing stuff with the output)?</strong> The only workaround I have thought of is a larger, more complex JSON object that has <em>all</em> the lists I want embedded, but I would prefer not to do that because those Python scripts are used by a few applications and I'm trying to keep it streamlined rather than replicating code all over the place.</p>