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请求。

有多种方法可以解决您没有触发多个请求的问题：

当您点击其中一个项目时，只需取消注册其他项目上的处理程序，并在您的请求返回时将其放回。
您可以在设置属性的请求处理程序范围内拥有一个对象，例如'requestInProgress'，您可以将其设置为true和false。换句话说，使用闭包。

显示'详细信息正在加载'很简单 - 您可以在触发请求之前将Panel dom或innerhtml的值设置为该消息，并在请求时设置实际返回值回报。

请注意，许多js库（如jQuery）提供了围绕发出可能简化操作的ajax请求的API。例如，jQuery.ajax方法接受一个对象文字，它可以包含函数'beforeSend'，'complete'，'success'，这样你就可以在成功之前，之后和之后做一些事情（在其他函数中，检查{ {3}}）

你可以使用裸机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
});

ajax最佳实践

2 个答案: