javascript - 通过 AJAX 加载更多文件

Question

是否可以通过 AJAX 加载更多文件？

示例

$.ajax({
  url: ["test1.html", "test2.html", "test3.html"],
  success: function(data1, data2, data3) {
    // Do something  
  }
});

因为我想避免回调...

  $.ajax({
  url: "test1.html",
  success: function(data) {

    $.ajax({
      url: "test2.html",
      success: function(data) {

        $.ajax({
          url: "test3.html",
          success: function(data) {

            // Do something

          }
        });

      }
    });

  }
});

Answer 1

我更喜欢编写递归函数并使用堆栈来完成类似的事情。这只会在处理结束时运行成功或错误一次，并将按顺序获取每个url。但是，按顺序获取它们可能会使加载时间更长，因为它不允许浏览器并行处理请求!与此不同的变体是并行运行所有请求，然后按顺序处理结果。

function fetch (urls, success, error) {
  if (urls.length) {
    $.ajax({
      url: urls[0],
      success: function () {
        fetch(urls.slice(1), success, error)
      },
      error: error
    })
  } else {
    success()
  }
}

fetch(["url1.html", "url2.html", ...], function () {
  // success
}, function () {
  // failure
})

因为我刚刚输入了这个，可能会有一些小错误，但这个概念是合理的。还有更多的事情可以做，比如传递值/结果，但这些留作练习 ;-) 应用相同的警告，这里是一个只按顺序处理结果的版本—— 请求可以并行发送:

function fetch (urls, success, error) {
  var fetched = 0
  var results = []
  var wasError = false
  function _fetch (i) {
    if (i < urls.length) {
      $.ajax({
        url: urls[i],
        success: function (result) {
          // report success when all the results are in
          results[i] = result
          if (++fetched == urls.length) {
            success(results)
          }
        },
        error: function () {
          if (!wasError) {
            wasError = true
            error()
          }
        }
      })
      // re-prime right away
      _fetch(i + 1)
    }
  }
  _fetch(0)
}

var urls = ["url1.html", "url2.html", ...]
fetch(urls, function (results) {
  $.each(results, ...)
}, function () {
  // error :(
})

快乐编码。