ajax最佳實踐

Question

比方說，我有以下的HTML頁面。

<A panel to display list of items> 
    Item A 
    Item B 
    Item C 
    ... 

<A panel to display details about item> 
    Details on item X: 

我想寫的頁面，這樣每當用戶點擊的項目之一，有關所選項目的詳細信息將顯示在底部面板上。

然而，我要解決的幾個問題是：

• 我應該如何避免重複請求。 （例如，在項目A的細節從服務器返回之前，用戶按下與項目A和B的鏈接）。
• 如果我想顯示「detail is now loading ...」，我應該在哪裏放置代碼？

Answer 1

您可以註冊點擊處理程序，它會觸發ajax請求來加載數據。

有多種方式來處理有關不觸發多個請求您的關注：

1. 就註銷的其它項目中的處理程序，當你點擊其中一個，並把它們放回去當你的請求返回。
2. 您可以在您設置屬性的請求處理程序的作用域中包含一個對象，如'requestInProgress'，並將其設置爲true和false。換句話說，使用閉包。

顯示'detail is now loading'很簡單 - 您可以在觸發請求之前設置Panel dom或innerhtml的值（​​如果需要），並設置實際返回的值當請求返回時。

請注意，像jQuery這樣的許多js庫提供了一個API來提供ajax請求來簡化事情。例如，jQuery.ajax方法需要一個對象字面值，它可以包含函數'beforeSend'，'complete'，'success'，以便在成功之前，之後和之後執行某些操作（其他函數，請查看http://api.jquery.com/jQuery.ajax/ ）

你當然可以用裸金屬js做你想做的事情，但是庫可以讓你的生活更輕鬆。

Answer 2

關於重複請求，我會保留最後一個XMLHttpRequest對象在lastRequest變量中。每當我發送一個新的請求，我會檢查這個變量。如果存在，請致電lastRequest.abort()。我還會檢查你的成功回調，請求對象與你的lastRequest相同，否則忽略它。在jQuery中，這看起來像：

var lastRequest; 

// Your click handler 
$(".items").click(function() { 
    if (lastRequest) lastRequest.abort(); 
    lastRequest = $.ajax({..., success: function (data, status, request) { 
     if (request != lastRequest) return; // Ignore, it was aborted 

     // Code to show the detail about the selected item 
    }}); 

    // Code to show the in-progress message 
});