如何在頁面上有多個相同的Ajax調用時加快我的Ajax調用？

當頁面加載時，我也在動態地創建一個塊。我使用ajax調用來從另一個頁面獲取數據，然後填充它並創建我的結構，然後將其添加到特定的dom元素。然而，問題是當我在頁面加載過程中在頁面上多次執行此操作時，所有Ajax調用都需要一段時間才能完成。你知道我可以如何加快ajax呼叫嗎？如何在頁面上有多個相同的Ajax調用時加快我的Ajax調用？

 $('.content-tile').each(function (idx, ele) { 

    // Step 1: Get the stuffs and add it in the right place on page load 
    var node_id = $(ele).find('article').attr('data-history-node-id'); 
    $.get('/node/' + node_id , function (data) { 

     var $title = $(data).find('.title').text(); 
     var $summary = $(data).find('.article__body').text(); 
     var $ctaText = $(data).find('.article__field-read-more-text').text(); 

     var $redirectToFile = $(data).find('.article__field-nova-redirect-to-file').find('a').attr('href'); 
     var $redirectToLink = $(data).find('.article__field-redirect-link').find('a').attr('href'); 

     // Either redirect to file or redirect to link in the order 
     var $ctaLinkHref = $redirectToFile; 
     if ($redirectToLink) { 
     $ctaLinkHref = $redirectToLink; 
     } 

     var $contentHover = "<a class='content-added contenthover hoveredLink' href= " + $ctaLinkHref + "></a>"; 
     $(ele).find('article').after($contentHover); // Add the div that will be targeted for the hover 

     var $contentHoverHeader = "<h2 class='contenthover__header'>" + $title + '</h2>'; 
     var $contentHoverContent = "<p class='contenthover__content'>" + $summary + '</p>'; 


     var $contentHoverLink = "<a class='contenthover__link' href=" + $ctaLinkHref + '>' + $ctaText + '</a>'; 

     $(ele).find('.contenthover').append($contentHoverHeader, $contentHoverContent, $contentHoverLink); 
    }); 
    });

來源

2016-10-29 Hello Universe

而不是進行多個調用，使一個調用獲取所有數據。 –

這實際上不適合我的情況。因爲頁面實際上添加了編輯從cms後端添加的多個「元素」塊。這些元素然後使用我的js ajax進行調用。每個元素鏈接到單獨的文章頁面。 ajax調用基本上會從這些文章頁面獲取數據並進行填充。 –

好吧，如果您必須多次撥打電話，唯一的選擇是優化您的服務器端代碼以更快地響應，或購買更多/更快的服務器。通過多次撥打電話，你實際上可以自己DDOS- –

正如羅裏提到的，而不是多次調用，只需要創建一個對象，它張貼回來，一次性返回所有相關數據。

// construct the array 
var nodes = [] 
$('.content-tile').each(function (idx, ele) { 
    var node_id = $(ele).find('article').attr('data-history-node-id'); 
    nodes.push(node_id); 
} 

// call ajax now 
$.ajax({ 
    url: "/node/RetrieveDataByNodes", //the new method which can accept the array and return data 
    data: JSON.stringify(nodes), 
    type: 'GET', 
    dataType: 'json' 
}).done(function(result) { 
    $.each(result, function (k, v) { 
    //do something for each value 
    console.log(v); 
    } 
});

來源

2016-10-29 14:09:18 TTCG

如何在頁面上有多個相同的Ajax調用時加快我的Ajax調用？

回答

相關問題