Question

我正在尝试从外部源中提取两个单独的内容以放入我正在创建的HTML页面。我有一个成功的AJAX函数，通过解析该频道的XML / RSS提要，从特定的Youtube频道中提取最新视频。我通过AJAX调用收到了这个feed。

我还希望从Blogger帐户中获取最新的博文。解析feed以获取最新条目的代码应该不难，但我在同时进行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是聪明的，它会做它需要做的事情，以确保最终执行两个调用。

如果你想同时加载所有内容，可悲的事实是你不能。但是，您可以通过声明由每个调用的success方法设置的标志，以此方式将显示为。然后只保持内容隐藏，直到两个标志都已设置。

修改

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

<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，它提供了异步promises框架，以实现任意复杂的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
  })

页面加载时多个AJAX调用

2 个答案: