ajax - 页面加载时多次 AJAX 调用

Question

我正在尝试从外部来源提取两个独立的内容并将其放入我正在创建的 HTML 页面上。我有一个成功的 AJAX 功能，通过解析该 channel 的 XML/RSS 提要，从特定的 Youtube channel 中提取最新的视频。我通过 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

I read somewhere that it can only handle one at a time?

要么你误解了这个人想要说的内容，要么他们错了。 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>