页面加载时的多个 AJAX 调用

Question

我正在尝试从外部资源中提取两个独立的内容，并将其放到我正在创建的 HTML 页面上。我有一个成功的 AJAX 功能，可以通过解析该频道的 XML/RSS 提要从特定的 Youtube 频道提取最新视频。我通过 AJAX 调用收到此提要。

我还想从 Blogger 帐户获取最新的博文。解析提要以获取最新条目的代码应该不难，但我在同时调用 AJAX 时遇到了麻烦。我在某处读到它一次只能处理一个？我厌倦了排队，因为我不希望页面上的内容分步加载。我宁愿同时获取所有内容。我该怎么做呢？

这是我当前的脚本：

<script type="text/javascript" charset="utf-8">
    $(function() {
      $.ajax({
        type: "GET",
        url: "http://gdata.youtube.com/feeds/base/users/devinsupertramp/uploads?orderby=updated&alt=rss&client=ytapi-youtube-rss-redirect&v=2",
        dataType: "xml",
        success: parseXml
      });
    });

    function parseXml(xml) {
        $(xml).find("item:first").each(
            function() {
                var tmp = $(this).find("link:first").text();
                tmp = tmp.replace("http://www.youtube.com/watch?v=", "");
                tmp = tmp.replace("&feature=youtube_gdata", "");
                var tmp2 = "http://www.youtube.com/embed/" + tmp + "?autoplay=1&controls=0&rel=0&showinfo=0&autohide=1";
                var iframe = $("#ytplayer");
                $(iframe).attr('src', tmp2);
            }
        );
    }
</script>

Answer 1

我在某处读到它一次只能处理一个？

要么你误解了对方想说的话，要么他们不正确。 Javascript 不会同时运行任何函数，因此英语不好的人可能会将其改写为“一次只能处理一个”，但这并不意味着您不能进行多个 AJAX 调用。 jQuery 很聪明，它会做它需要做的事情来确保最终执行这两个调用。

如果您希望同时加载所有内容，可悲的事实是您不能。但是，您可以通过声明由每次调用的成功方法设置的标志来使其向用户显示。然后将内容隐藏起来，直到两个标志都设置完毕。

编辑：

这是一种非常简单的方法，可以使它们看起来是同时获取的：

<script type="text/javascript" charset="utf-8">
    var youtubComplete = false;
    var otherComplete = false;

    $(function() {
      $.ajax({
        type: "GET",
        url: "http://gdata.youtube.com/feeds/base/users/devinsupertramp/uploads?orderby=updated&alt=rss&client=ytapi-youtube-rss-redirect&v=2",
        dataType: "xml",
        success: parseXml
      });
      $.ajax({
        type: "GET",
        url: "http://someotherdata.com/",
        dataType: "xml",
        success: function() { otherComplete = true; checkFinished(); }
      });
    });

    function parseXml(xml) {
        $(xml).find("item:first").each(
            function() {
                var tmp = $(this).find("link:first").text();
                tmp = tmp.replace("http://www.youtube.com/watch?v=", "");
                tmp = tmp.replace("&feature=youtube_gdata", "");
                var tmp2 = "http://www.youtube.com/embed/" + tmp + "?autoplay=1&controls=0&rel=0&showinfo=0&autohide=1";
                var iframe = $("#ytplayer");
                $(iframe).attr('src', tmp2);
            }
        );
        youtubeComplete = true;
        checkFinished();
    }
    function checkFinished()
    {
        if(!youtubeComplete || !otherComplete) return;
        // ... Unhide your content.
    }
</script>

Answer 2

浏览器将支持多个出站呼叫，但每个域有一个上限。看看这个相关的 Q/A How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?。

有几个很好的库可以进行请求调度，包括链接和并行化 AJAX 调用。一个很好的库是https://github.com/kriskowal/q，它提供了异步承诺框架来支持任意复杂的 AJAX 请求链接。 Q 缩小后约为 3.3KB。

// The jQuery.ajax function returns a 'then' able
Q.when($.ajax(url, {dataType: "xml"}))
  .then(function (data) {
     var parsedXML = parseXML(data)
     ...
     // some other ajax call
     var urls = [Q.when($.ajax(url2, {data: {user: data.userId}})),
                 Q.when($.ajax(url3, {data: {user: data.userId}}))];
     // run in parallel
     return Q.all(urls)
  })
  .then(function (data) {
    // data retrieved from url2, url2
  })