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

我有一个日历应用程序，它使用ajax和json结果加载所有的事件数据。问题是我有不同的看法，现在我必须在更改视图时重新调用服务器。如何在客户端避免过多的ajax调用和缓存json数据

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

这是什么最佳做法？

来源

2011-12-09 leora

它被称为MVC。

您需要为您的应用程序构建数据模型，编写某种Record对象，然后确定其状态。所以你的应用程序会有一些CalendarEvent模型，当你从服务器加载数据时，你会实例化实例。

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

您的计划不需要那么复杂。如果通过标识加载事件，你可以这样做

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

当您加载一个记录，你可以把

window.App.Models[id] = InstanceOfYourRecord

和这样的非常快，以寻找记录。或者只是使用具有强大数据层的框架（如Sproutcore）。

来源

2011-12-09 00:24:30 hvgotcodes

我在最近的项目上遇到了类似的问题。

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

为了让生活更加健全，客户端保留了自己的本地数据模型。在客户端DM之外，所有客户端代码都认为它在本地拉取结果。

读取来自客户端DM它的数据（GET）时间：

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

当通过客户端DM它改变数据（POST）：

无效缓存适当
调用适当AJAX查询
发射定制的jQuery事件，指示客户端DM改变

请注意，此客户DM还有：

集中处理AJAX错误处理
跟踪AJAX调用仍在进行中。（让我们在留下未保存更改的页面时提醒用户）。
允许在单元测试中使用虚拟替换，其中所有的调用命中本地数据并且完全同步。

实现注意事项：

我的代码是以称为DataModel的一个JavaScript类。随着设计变得越来越复杂，将分解对象的责任进一步分解是有意义的。
jQuery的自定义事件可让您轻松实现观察者模式。客户端组件每当它指示数据已更改时，就从客户端DM更新它们自己。
远程API中的JSON有助于简化代码。我的客户DM将JSON结果直接存储在其缓存中。
客户端dm函数参数包括回调函数，所以当需要时，一切都可以自然地通过AJAX传递：函数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 = {};

来源

2011-12-09 00:24:36 nsanders

但我将如何缓存json结果在客户端？ – leora

在我自己的代码中添加了一个示例，以显示正在执行的缓存。辅助函数首先缓存JSON结果。然后它调用所有等待该结果的回调。（listAllQueue部分）。 – nsanders

像hvgotcodes说的那样，MVC框架会有所帮助;例如，试试backbone.js（http://documentcloud.github.com/backbone/）。

或者，您可能要考虑使用jStorage（http://www.jstorage.info/）。每次需要进行AJAX调用时，首先检查它是否在存储对象中，如果不是，则运行AJAX调用。另一方面，每当完成一次AJAX调用时，将结果存储在存储对象中。确保在数据存储中查找时需要引用某种索引（CalendarEvent ID）。可能希望为存储中的数据添加某种“过期时间”...... AJAX调用之后的时间戳记，并且如果过期，请重新提出请求。

来源

2011-12-09 00:36:58 Ben

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

回答

相关问题