对于连续的AJAX调用,替代“async:false”

时间:2016-11-17 15:00:27

标签: javascript jquery ajax get

我正在使用两个 AJAX GET 请求从两个不同的来源获取数据。
在每个请求中我解析响应数据,创建一个临时数组,每个项目包含相关数据,以及将此临时数组推送到主数组。
但是,只有在 AJAX 请求中包含"async: false"时才会有效。现在已弃用该请求。替代方式我可以写这段代码? (注意:虽然我在此代码段中使用了两个 AJAX 请求,但我可能需要在我正在处理的项目中使用总共四个。)

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

1 个答案:

答案 0 :(得分:2)

您可以使用JQuery $.promise对象来实现此目的 当你return $.ajax它实际上有一些内置方法,例如 $.done()$.when

在您的场景中,您希望在第一个Ajax请求完成后执行Ajax函数。

因此,我们将创建两个变量来表示代码中的两个Ajax请求 就像我之前提到的,当你返回Ajax请求时,你实际上可以将它用作$.promise对象并享受它带来的优势,例如$.done()函数。

    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);
     });
    }