如何避免过多的ajax调用并在客户端缓存json数据

Question

我有一个日历应用程序，它使用 ajax 和 json 结果加载所有事件数据。问题是我有不同的视图，现在当我更改视图时我必须重新调用服务器。

对于我可以在客户端缓存这些数据并在触发更多 ajax 调用之前检查是否已经加载这些事件，是否有任何建议。

对此的最佳实践是什么？

Answer 1

正如 hvgotcodes 所说，MVC 框架会有所帮助；例如，尝试backbone.js（http://documentcloud.github.com/backbone/）。

或者，您可能需要考虑使用 jStorage (http://www.jstorage.info/)。每次需要进行 AJAX 调用时，首先检查它是否在存储对象中，如果不在，则运行 AJAX 调用。另一方面，无论何时完成 AJAX 调用，都将结果存储在存储对象中。确保在数据存储中查找时可以引用某种索引（CalendarEvent id）。可能还想向存储中的数据添加某种“过期时间”……AJAX 调用后的时间戳，如果过期则重新请求。

Answer 2

这就是所谓的MVC。

您需要为您的应用程序构建一个数据模型，编写某种 Record 对象，然后您可以确定它们的状态。因此，您的应用程序将具有某种 CalendarEvent 模型，当您从服务器加载数据时，您将实例化实例。

因此，在更改视图时，您首先要检查是否拥有该视图的模型对象，如果有，则不需要从服务器加载它（除非您想检查更改）。

你的计划不需要那么复杂。如果您按 Id 加载事件，则可以执行类似于

window.App = {};
window.App.Models = {};

加载记录时放置

window.App.Models[id] = InstanceOfYourRecord 的

操作，这样查找记录的速度相当快。或者只使用具有强大数据层的框架（如 Sproutcore）。

Answer 3

我在最近的一个项目中遇到了类似的问题。

从概念上讲，我将“真实”数据模型（DM）保存在服务器上，并保存到数据库中。

为了让生活保持理智，客户端保留自己的本地数据模型。在客户端 DM 之外，所有客户端代码都认为它在本地提取结果。

当从客户端 DM 读取数据 (GET) 时，它：

• 检查现有结果的缓存
• 当缓存数据不可用时调用适当的 AJAX 查询，然后缓存结果。

当通过客户端 DM 更改数据 (POST) 时，它：

• 根据需要使缓存无效
• 调用适当的 AJAX 查询
• 发出自定义 jQuery 事件，指示客户端 DM 已更改

请注意，此客户端 DM 还：

• 集中 AJAX 错误处理
• 跟踪仍在进行中的 AJAX 调用。 （让我们在离开未保存更改的页面时警告用户）。
• 允许对单元测试进行直接的虚拟替换，其中所有调用都会命中本地数据并且完全同步。

实现说明：

• 我将其编码为名为 DataModel 的 JavaScript 类。随着设计变得更加复杂，进一步将职责分解为单独的对象是有意义的。
• jQuery 的自定义事件可以让您轻松实现观察者模式。每当客户端组件指示数据已更改时，客户端组件就会从客户端 DM 进行自我更新。
• 远程 API 中的 JSON 有助于简化代码。我的客户端 DM 将 JSON 结果直接存储在其缓存中。
• 客户端 dm 函数参数包括回调，因此在需要时一切内容都可以自然地通过 AJAX 传递： function listAll( contactId, cb ) { ... }
• 我的项目只允许单用户登录。如果外部各方可以更改服务器数据模型，则应定期触发某种已数据更改的探测器，以确保客户端缓存仍然有效。
• 对于我的应用程序，多个客户端组件在接收客户端 DM 更改事件时将请求相同的数据。这导致多个 AJAX 调用具有相同的信息。我使用 getJsonOnce() 帮助程序解决了这个问题，该帮助程序管理等待相同结果的客户端组件回调队列。

我的实现中的示例函数：

listAll:
function( contactId, cb ) {

  // pull from cache
  if ( contactId in this.notesCache ) {
    cb( this.notesCache[contactId] );
    return;
  }

  // init queue if needed
  this.listAllQueue[contactId] = this.listAllQueue[contactId] || [];

  // pull from server
  var self = this;
  dataModelHelpers.getJsonOnce(
    '/teafile/api/notes.php',
    {'req': 'listAll', 'contact': contactId},
    function(resp) { self.notesCache[contactId] = resp; },
    this.listAllQueue[contactId],
    cb
  );
}

getJsonOnce() 帮助器确保如果多个客户端组件请求完全相同（未缓存）的数据，我们只发送一个 AJAX 请求并在它进入时通知每个人。notesCache

只是一个简单的JavaScript 对象：

this.notesCache = {};