Alternative to "async: false" for successive AJAX calls
<p>I am using two <strong>AJAX GET</strong> requests to grab data from two different sources.<br> 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.<br>However, this only works if I include <code>"async: false"</code> in the <strong>AJAX</strong> request, which is now deprecated.<br> Is there an alternative way I could write this code? (NOTE: Although I am using two <strong>AJAX</strong> requests in this code snippet, I will probably need to use a total of four in the project I am working on).</p>

<pre><code>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]);
        });
      }
    });
  });
}
</code></pre>