1

外部ソースから 2 つの別々のものを取得して、作成中の HTML ページに配置しようとしています。そのチャンネルの XML/RSS フィードを解析することにより、特定の Youtube チャンネルから最新のビデオを取得する AJAX 関数が成功しました。このフィードは AJAX 呼び出しで受け取ります。

また、Blogger アカウントから最新のブログ投稿を取得したいと考えています。フィードを解析して最新のエントリを取得するコードは難しくありませんが、AJAX の同時呼び出しに問題があります。一度に1つしか処理できないとどこかで読みましたか？ページのコンテンツを段階的にロードしたくないので、それらをキューに入れることにうんざりしています。私はそれがすべて同時にフェッチされることを望んでいます。どうすればこれを行うことができますか？

これが私の現在のスクリプトです：

<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>
4

2 に答える 2

8

一度に1つしか処理できないとどこかで読みましたか？

その人が言おうとしていることをあなたが誤解したか、間違っていたかのどちらかです。Javascript は関数を同時に実行しないため、英語が苦手な人は「一度に 1 つしか処理できない」と言い換えるかもしれませんが、それは複数の 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>
于 2012-05-22T04:00:21.683 に答える
3

ブラウザは複数のアウトバウンド コールをサポートしますが、ドメインごとに上限があります。この関連する Q/Aをご覧ください。一般的なブラウザーで許可されている同時 AJAX (XmlHttpRequest) リクエストの数は? .

AJAX 呼び出しの連鎖や並列化など、要求のスケジューリングを行うための優れたライブラリがいくつかあります。優れたライブラリの 1 つにhttps://github.com/kriskowal/qがあります。これは、AJAX リクエストの任意の複雑な連鎖を可能にする async promises フレームワークを提供します。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
  })
于 2012-05-22T04:15:48.480 に答える