Is there a recommended general pattern for memoize ajax calls?

Question

I work with some government data published through Socrates SODA api .

This API provides a way to retrieve strings through a REST call. The API allows you to limit the query parameterization - basically you can perform a full text search and nothing more. I cannot find a way to form the returned data - for example, only return certain columns of data.

As a result, basically I can get only all rows and all columns of each type of data. This is fine, I think, but I would like to cache it - memoize to use the underscore term.

Is there a template for memoizing ajax calls with jQuery?

---

EDIT . To give you an idea of ​​what I'm talking about, this is what I am currently doing.

function onclick(event) { var $t = $(event.currentTarget); var itemId = $t.attr('data-itemid'); var url = getRestUrl(itemId); if (typeof datacache[itemId] === "undefined") { $.ajax({ url : url, cache : true, type : "GET", dataType : "json", error : function(xhr,status,error) { raiseError(error); }, success : function(response, arg2, xhr) { datacache[itemId] = response; doSomethingWithTheData(url, itemId); }}); } else { doSomethingWithTheData(url, itemId); } } // then, doSomethingWithTheData() simply references datacache[itemId] 

It seems to be faster, although I did not measure it. I really want to know if there is a common template that does something like this that I can use so that everyone who reads the code will immediately see what I'm doing?

Answer 1

You might be able to do something like doing autocomplete (this is very important from memory, but you get the idea):

 var searchCache = {}, searchXhr = null; function Search(term) { if (term in searchCache) { return doSomethingWithTheData(searchCache[term]); } if (searchXhr != null) { searchXhr.abort(); } searchXhr = $.ajax({ url : url, cache : true, type : "GET", dataType : "json", error : function(xhr, status, error) { raiseError(error); }, success : function(response, arg2, xhr) { searchCache[term] = response; if (xhr == searchXhr) { doSomethingWithTheData(response); searchXhr = null; } } }); } 

Answer 2

I'm not necessarily the best expert on the Javascript question, but I could help you use SODA.

If you are looking for more flexibility in your requests and can perform HTTP POST, you can look using the request syntax to make a more targeted request: http://dev.socrata.com/querying-datasets . The query syntax is pretty complicated, but I can help you figure out how to structure your query if you hit any clutter.

Unfortunately, since this will require POST, you need to exit XHR cross-domain locking by going through a proxy server or something similar.

In addition, FYI, we are working on a completely new syntax that will allow you to specify requests as URL parameters so that you can perform simple requests like /resources/agencies?acronym=CIA or /resources/agencies?$where='budget > 10000000' . That should be pretty amazing.

Answer 3

You will only cache ajax requests, which, as you know, will not change, for example, SDF. It seems that in your example you are requesting something related to a UI that might not be acceptable to the cache? Otherwise, you can try something like this:

var store = {};

 /** * Memoized $.getScript * * Cache one script response per url * Reference, see http://msdn.microsoft.com/en-us/magazine/gg723713.aspx * * @example $.memoizedGetScript( url ).then( successCallback, errorCallback ); * @param {String} url * @param {Function} callback (optional) * @returns {*} */ $.memoizedGetScript = function(url, callback) { var callback = callback || {}; store.cachedScripts = {}; if (!store.cachedScripts[url]) { store.cachedScripts[url] = $.Deferred(function(d) { $.getScript(url).then( d.resolve(), d.reject() ); }).promise(); } return store.cachedScripts[url].done(callback); };