View Full Version : Enable Client-Side Caching with Ext.Ajax.request to Prevent Unnecessary Requests

29 Oct 2013, 9:00 AM
I've been trying to figure this out for some time and have searched the forums and Google without success this far. I looked through the references in this post (http://www.sencha.com/forum/showthread.php?155392), and have read through many others, but still am simply unable to determine how to get client-side caching to work with ExtJs AJAX requests.

Essentially I have certain infrequently-changing data which is requested from a RESTful ASP.NET MVC4 service via Ext.Ajax.request calls. The service is (as far as I can tell) returning the correct cache information in the response header to indicate that the response should be private-cached on the client and specifies that the data won't expire for one hour.

What I want to have happen is that when I call Ext.Ajax.request using an URL that has previously been requested, that it should retrieve the data from the client browser cache rather than pushing another request to the server with the overhead that requires. What's happening is that the Ext.Ajax.request call is always resulting in a request to the server, and it doesn't ever retrieve the previous result from the browser cache. I've verified that this happens even if I arrange the calls so they happen in immediate succession.
Here's an example of what my request/response look like:

Request URL:http://localhost/Rx/tasks/templates/SetupCountry
Request Method:GET
Status Code:200 OK
Request Headers

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Response Headers

Cache-Control:private, no-cache="Set-Cookie", no-store, max-age=3600
Content-Type:application/json; charset=utf-8
Date:Tue, 29 Oct 2013 16:20:54 GMT
Expires:Tue, 29 Oct 2013 17:20:54 GMT
Last-Modified:Tue, 29 Oct 2013 16:20:54 GMT
Set-Cookie:AppNameCookie=3D58A0219716305D528AC656F2C34C7BF8BA10F3B9293A65F1D2FE894DCBF6EFD6186DCF77597DC5389F546209B3C1434D7C3D957E69DAA7C9F6BE0C5E436795488289296B0F40CF3F8CD686301D0816C1078AA9A0110C8DCFB5B3C1FDA4B202829B7271AECB13EFE00049D4966771874CE3B1837CA2BF644C1720FA8F8F9AE45D63F3111D00C020138BD837C509E1002A049901775C2618C1E6E68814DF16EABD1BCE6F2EA2F9B06516F73AC7C68AD9756BB79260142CA70F6149531A3B8C6C5C79553FADF8B9ECCE6DF886B71E38A4; path=/FormsAuth; HttpOnly

The last portion of the request URL (the "SetupCountry") part changes as part of the RESTful URL with all requests to /tasks/templates mapping to the same service method on the server. I'm not using any query string parameters, which I understand can cause the browser to not use the cache, so that shouldn't be an issue in my case.

Because it's my understanding the Ext disables caching by default, I've added the following statements during initialization, though to be honest this seems like serious overkill and I don't understand why so many seemingly redundant settings would need to be configured:

Ext.Loader.setConfig({enabled:true, disableCaching: false});
Ext.data.Connection.disableCaching = false;
Ext.data.JsonP.disableCaching = false;
Ext.data.proxy.Server.prototype.noCache = false;
Ext.Ajax.disableCaching = false;
I don't really understand why the request header includes "Cache-Control:no-cache" and "Pragma:no-cache", though I don't know whether these are the reason that the response isn't being cached by the browser.

My code is pretty straightforward, and I've tried modifying the options for the request method call to explicitly set header parameters such as "Cache-Control", but it appears that this is overridden by some of the lower-level logic in Ext.Ajax. I was hoping there would be some way to specify whether to enable caching for a specific Ext.Ajax.request call, but the only suggestions I've seen are to modify the global settings, make the call, then reset them, and I've chosen to change the global settings throughout at least until I get this working.

getTemplate: function(templateId, callback, scope) {
var me = this;
method: 'GET',
url: Sentric.env.rootUrl + '/tasks/templates/' + templateId,
success: function(resp) {
var result = Ext.decode(resp.responseText);

if (callback) {
callback.apply(scope || me, [result]);
It feels like there's something obvious I must be missing here, but I've been through the documentation, forums, and other sources many times and haven't been able to figure out how to make this work. Any assistance would be fantastic.

Thank you

29 Oct 2013, 12:57 PM
Ext doesn't do anything under the hood to set those caching headers.

The "caching" that Ext.Ajax does is that it will append a parameter with the current time to a get request to prevent it from caching. If you turn that off, the parameter disappears, but that's the extent of it. Everything else is up to the browser.