title: Firefox Extension: multiple requests with XMLHttpRequest. Use Asynchronous or not?
body: <p>I'm trying something very simple for my first Firefox Add-On, the important part is:</p>
  
  <p>Step 1) Call an external API to retrieve some data.<br>
  Step 2) Call that API again with the data retrieved the first time to get some more.</p>
  
  <p>Now, I first implemented it using XMLHttpRequest in synchronous mode, since I thought the need to wait for Step 2 forced me to do it that way. Two calls to the function that dealt with the API call, used XMLHttpRequest and parsed the response. Fine.</p>
  
  <p>Then I came accross various docs in the Mozilla Development Network which encourage you to use XMLHttpRequest in asynchronous mode and so I tried.</p>
  
  <p>Basing my implementation on <a href="https://stackoverflow.com/questions/1203074/firefox-extension-multiple-xmlhttprequest-calls-per-page">multiple XMLHttpRequests</a> and others I came up with the code below.</p>
  
  <p>My question is: Is this the proper way to do it? Should I go back to using synchronous mode? It works like this, but it just doesn't strike me as the correct AJAX pattern you would use...</p>
  
  <pre><code>  // first call
    var username = foo;
    var password = bar;
    var startOffset = 0; // initial value
    var url = encodeURIComponent('https://theapiurl.com/query=' + startOffset);
    doRequest();
  
    function doRequest() {
      makeRequest(url, username, password);
    }
  
    function makeRequest(url, username, password) {
      var http_request = new XMLHttpRequest();
      if (http_request.overrideMimeType) {
        http_request.overrideMimeType('text/xml');
      }
      if (!http_request) {
        alert('Cannot create XMLHTTP instance');
        return false;
      }
      http_request.onreadystatechange = function() { 
         alertContents(http_request);
      };
      http_request.open('GET', url, true, username, password);
      http_request.send(null);
    }  
  
    function alertContents(http_request) {
      if (http_request.readyState == 4) {
        if (http_request.status == 200) {
          if (startOffset == 0) {
            startOffset = 45; // this value would be extracted from 'http_request'
            url = encodeURIComponent('https://theapiurl.com/query=' + startOffset);
            // second call, parameter startOffset has changed
            doRequest();
          } else {
          }
        } else {
          alert('There was a problem with the request.');
        }
        http_request.onreadystatechange = function fnNull(){};
      }
    }
  </code></pre>