Question

I’m trying something very simple for my first Firefox Add-On, the important part is:

Step 1) Call an external API to retrieve some data.
Step 2) Call that API again with the data retrieved the first time to get some more.

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.

Then I came accross various docs in the Mozilla Development Network which encourage you to use XMLHttpRequest in asynchronous mode and so I tried.

Basing my implementation on multiple XMLHttpRequests and others I came up with the code below.

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…

  // 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(){};
    }
  }

Answer 1

You should always avoid doing synchronous network requests as it will block the GUI from functioning until you get a response. Just because the network may be fast for you, you should not assume it will be fast for all of your users.