页面加载时多个AJAX调用

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>