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的鏈接）。
• 如果我想顯示“詳細信息正在加載...”，應將代碼放在哪里？

Answer 1

您可以注冊單擊處理程序，這些處理程序將觸發ajax請求以加載數據。

有多種方法可以解決您沒有觸發多個請求的問題：

1. 只需單擊其他項目上的處理程序，然后單擊其中一個，然后在請求返回時將其放回即可。
2. 您可以在請求處理程序的范圍內擁有一個對象，您可以設置屬性，例如'requestInProgress'，您可以適當地設置為true和false。 換句話說，使用閉包。

顯示'detail is now loading'很簡單 - 您可以在觸發請求之前將Panel dom或innerhtml的值設置為該消息，並在請求返回時設置實際返回值。

請注意，許多js庫（如jQuery）提供了圍繞發出可能簡化操作的ajax請求的API。 例如，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
});