Avoiding too many ajax calls and client side json cache data

Question

I have a calendar application and it downloads all event data using ajax and json results. the problem is that I have different views, and now I have to re-call the server when I change my views.

Is there any recommendation regarding how to cache this data on the client side and check if I loaded these events before disconnecting more ajax calls.

What is the best practice for this?

Answer 1

It is called MVC.

You need to build a data model for your application, write some record objects, and then you can determine their status. That way, your application will have some CalendarEvent model, and when you download data from the server, you must instantiate instances.

Thus, when changing views, you must first check if you have a model object for this view, and if you did, you would not need to download it from the server (if you do not want to check for changes).

Your circuit should not be so complicated. If you load events by ID, you can do something like

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

when you upload a record that you could put

window.App.Models[id] = InstanceOfYourRecord

and thus its pretty quick to search for entries. Or just use a framework (like Sproutcore) that has a reliable level of data.

Answer 2

As hvgotcodes says, MVC infrastructure will help; For example, try backbone.js (http://documentcloud.github.com/backbone/).

Alternatively, you may need to use jStorage (http://www.jstorage.info/). Each time you need to make an AJAX call, first check to see if it is in the storage object, and then start the AJAX call if it is not. On the other hand, whenever you end an AJAX call, store the results in a storage object. Make sure you have some kind of index (CalendarEvent identifier) ​​for the link when searching the data warehouse. You might want to add some kind of “expiration time” to the data in your repository, as well ... timestamp after calling AJAX and re-request the front if it is out of date.

Answer 3

I had similar problems in a recent project.

Conceptually, I have a “real” data model (DM) stored on a server, stored in a database.

To bring life to life, the client maintains its own local data model. Outside of client-side DM, all client-side code considers that it outputs results locally.

When reading data (GET) from a DM client, this is:

• checks cache for existing results
• Raises appropriate AJAX requests when cached data is not available, then caches the results.

When changing data (POST) through a client DM, it:

• invalidates the cache file accordingly
• raises relevant AJAX requests
• emits a custom jQuery event indicating a client DM change.

Please note that this client DM also:

• centralizes AJAX error handling
• AJAX tracks are still in flight. (Allows us to warn users by leaving pages with unsaved changes).
• Allows replacement, dummy replacement for unit testing, where all calls fall into local data and are completely synchronous.

Implementation notes:

• I encoded this as a JavaScript class called DataModel. As the project becomes more complex, it makes sense to further divide the responsibilities into separate objects.
• JQuery custom events make it easy to implement an observer pattern. Client components update themselves from the client DM when it indicates that the data has been changed.
• JSON in your remote API helps simplify the code. My client DM stores JSON results directly in the cache.
• The arguments to the client dm function include callbacks, so if necessary, of course, you can pass it through AJAX: function listAll (contactId, cb) {...}
• My project allows only single-user logins. If third parties can change the server data server, you must periodically run some probe with data changes to ensure that the client’s cache is maintained.
• For my application, several client components will request the same data when they receive a client DM change event. This has led to numerous AJAX calls with the same information. I fixed this problem with the getJsonOnce () helper, which manages the callback queue of client components waiting for the same result.

An example function in my implementation:

 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 ); } 

The getJsonOnce () helper ensures that if multiple client components request the same (unshielded) data, we send only one AJAX request and let everyone know when it arrives.

NotesCache is just a javascript object:

 this.notesCache = {};