Alternative to “async: false” for successive AJAX

Question

I am using two AJAX GET requests to grab data from two different sources.
In each request I parse the response data, create a temporary array with the relevant data each item, and push this temporary array into a master array.
However, this only works if I include "async: false" in the AJAX request, which is now deprecated.
Is there an alternative way I could write this code? (NOTE: Although I am using two AJAX requests in this code snippet, I will probably need to use a total of four in the project I am working on).

function get_results() {
  $(document).ready(function() {
    var master_array = [];
    $.ajax({
      type: "GET",
      url: "http//:www.source1.com",
      dataType: "xml",
      async: false,
      success: function(xml) {
        $(xml).find('product').each(function() {
          var Average = $(this).find('Average').text();
          var Price = $(this).find('Price').text();
          var Name = $(this).find('Name').text();
          var Url = $(this).find('Url').text();
          var Image = $(this).find('Image').text();
          master_array.push([Average, Price, Name, Url, Image]);
        });
      }
    });
    $.ajax({
      type: "GET",
      url: "http//:www.source2.com",
      dataType: "xml",
      async: false,
      success: function(xml) {
        $(xml).find('product').each(function() {
          var Average = $(this).find('Average').text();
          var Price = $(this).find('Price').text();
          var Name = $(this).find('Name').text();
          var Url = $(this).find('Url').text();
          var Image = $(this).find('Image').text();
          master_array.push([Average, Price, Name, Url, Image]);
        });
      }
    });
  });
}

Answer 1

You can achieve this by using a JQuery $.promise object.
When you return $.ajax it's actually has some built-in methods, such as $.done() and $.when.

In your scenario you want to execute an Ajax function after the first Ajax request is done.

So we will create two variables that will represent the two Ajax requests you have in your code.
Like I mentioned earlier when you return Ajax request you actually can use it as a $.promise object and enjoy the advantages it has, such as the $.done() function.

    function get_results() {
  $(document).ready(function() {
    var master_array = [];

   var MyFirstFunction = function() {
      return $.ajax({
      type: "GET",
      url: "http//:www.source1.com",
      dataType: "xml",
      success: function(xml) {
        $(xml).find('product').each(function() {
          var Average = $(this).find('Average').text();
          var Price = $(this).find('Price').text();
          var Name = $(this).find('Name').text();
          var Url = $(this).find('Url').text();
          var Image = $(this).find('Image').text();
          master_array.push([Average, Price, Name, Url, Image]);
        });
      }
    });
   };

    var MySecondFunction = function(){
      return $.ajax({
      type: "GET",
      url: "http//:www.source2.com",
      dataType: "xml",
      success: function(xml) {
        $(xml).find('product').each(function() {
          var Average = $(this).find('Average').text();
          var Price = $(this).find('Price').text();
          var Name = $(this).find('Name').text();
          var Url = $(this).find('Url').text();
          var Image = $(this).find('Image').text();
          master_array.push([Average, Price, Name, Url, Image]);
        });
      }
    });
   };
//We use it after the assignment of the variables because if would have put it before them we would got undefined, you can read more about it here:[Hoisting][4].
      MyFirstFunction().done(MySecondFunction);
     });
    }