在頁面加載時發生多個AJAX調用

我試圖從外部來源將兩個單獨的東西放到我創建的HTML頁面上。我有一個成功的AJAX功能，通過解析該頻道的XML/RSS提要，從特定的Youtube頻道中提取最新的視頻。我通過AJAX調用收到此饋送。在頁面加載時發生多個AJAX調用

我還想從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>

來源

2012-05-22 Jon

你的前提下（據我所知這是不正確的，但特定瀏覽器）將相當多，顧名思義，禁止除做呼叫的通話，是不是其他的什麼嗎？另一種選擇是在服務器端進行調用並彙總結果，從而允許通過單個客戶端調用來獲取所有數據。 –

什麼是博客網址？這兩個是關於飼料？ –

@DaveNewton，我想是的。我可能最終只是在服務器端進行。這就是說，如果我決定不彙總結果，我會怎麼做呢？奧斯卡，你在問什麼？ – Jon

我讀的地方，它只能處理一次一個？

要麼你誤解了這個人想說什麼，或者他們是不正確的。 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>

來源

2012-05-22 04:00:21

好主意。看起來很奇怪，它不能處理一個以上，所以謝謝你清除這個。我必須在我的代碼中做一些不正確的事情，然後，因爲我的第二個請求不起作用，它要麼覆蓋第一個請求，要麼只是不正確，因爲第一個請求沒有給我任何輸出。 – Jon

@Jon - 我編輯了我的答案。如果您試圖以類似的方式創建多個AJAX請求，並且該代碼執行後沒有按預期執行，那麼我或其他人會幫助您找出錯誤。 :) –

我想通了。這是一個愚蠢的錯誤。謝謝您的幫助！我可能會使用你發佈的方法 - 它看起來應該是我想要的。我很感激！ – Jon

瀏覽器將支持多個呼出電話，但有每個域帽。看看這個相關的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 
    })

來源

2012-05-22 04:15:48

在頁面加載時發生多個AJAX調用

回答

相關問題