使用AJAX加载器的最佳方法？

Question

我在动态更新内容DIV之前实现了一些糟糕的解决方案来启动AJAX加载程序，但似乎没有“通用”，我发现每次我这样做我都在重新编写它。如果我的DIV内容根据用户点击页面的内容而更新，并且我想在此内容DIV上显示加载器，那么最佳方法是什么？我已经看到一些开发人员总是在页面上加载加载器，他们只是显示阻止或没有，我看到其他人将它附加到DIV。当你还有多个可以更新的区域时呢？我正在想一些可重复的东西，我可以用函数调用，也许可以传递一些参数。

Answer 1

某些JavaScript库允许侦听打开和关闭请求。查看Prototype的请求响应者http://www.prototypejs.org/api/ajax/responders。

你会做这样的事情：

Ajax.Responders.register({
  onCreate: function() {
    $('loader').show();
    Ajax.activeRequestCount++;
  },
  onComplete: function() {
    Ajax.activeRequestCount--;
    if (Ajax.activeRequestCount < 1) $('loader').hide();
  }
});

对于加载的可视化表示，您可能希望识别页面的不同部分，这些部分可能需要单独加载图形并将Request对象子类化，每次都指示请求的类型。

E.g。
这是一个被保存的领域吗？ new FieldUpdateRequest(field)
它正在加载页面吗？ new Request();
容器是否正在更新？ new PartialRequest(div);

然后捕获每个子类类型并显示或隐藏不同的加载器图形。

遗憾的是没有快速解决方案。您可以构建一个通用脚本，用于将加载器图形附加到容器，这样可以节省一些重复。如果你这样做，请记住在这里张贴:)？

Answer 2

您可以在不同的库中使用JQuery progress bar或类似内容。