Jump to content
skaterdav85

Cacheing AJAX responses with jQuery

Recommended Posts

I want to cache my AJAX responses for my site's search box since the data in the appilcation only changes once a day. I added the jQuery cache property and set it to true

var date = new Date(), fulldate = [date.getMonth() + 1, date.getDate(), date.getFullYear()].join('_'); 		 $.ajax({			 url: 'index.php?action=Home&method=search&d='+fulldate,			 type: 'GET',			 data: data,			 cache: true,			 success: function(msg) {				 data.msg = msg;				 PS.publish('search-complete', data);			 },			 error: function(jqXHR, textStatus, errorThrown) {				 console.log('Error retrieving results.')			 }		 });

The URL is unique each day by the d query string parameter and by the searchTerm query string parameter. So if I'm understanding this correctly, the result for this URL should be cached for each day for the searchTerm 'battery'. However, when I make multiple searches on the same day for the same keyword, the web console returns a 2xx status code instead of 304 (which would mean the response was read from cache). http://localhost/map...&method=searchd=3_14_2012&searchTerm=battery[HTTP/1.1 200 OK 359ms] Maybe I am missing something. Anyone understand how to use the cache property in jQuery's ajax method? Thanks!

Share this post


Link to post
Share on other sites

It might not be an issue with jQuery, use PHP to also set cache control headers like the expire date. Check the response headers to see if there is anything interfering with caching.

Share this post


Link to post
Share on other sites

I just checked the Firefox extension CacheViewer and the url shows up in the cache. You can also view some of the request and response headers. This is what I see:

Key: http://localhost/map2/index.php?action=Home&method=search&d=3_14_2012&searchTerm=batteryData Size: 8261 bytesFetch Count: 6Last Modified: Wednesday, March 14, 2012 5:26:22 PMLast Fetched: Wednesday, March 14, 2012 5:26:35 PMExpiration Time: Wednesday, December 31, 1969 4:00:00 PMFile on disk: none request-method: GETrequest-Accept-Encoding: gzip, deflateresponse-head: HTTP/1.1 200 OKDate: Thu, 15 Mar 2012 00:26:22 GMTServer: Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i PHP/5.2.9X-Powered-By: PHP/5.2.9Vary: Accept-EncodingContent-Encoding: gzipContent-Length: 8261Content-Type: text/html

My guess is that the problem lies with the Expiration time since it is 1969. I think I just need to set this to 1 day ahead and hopefully it works. Edit:Turns out just setting the Expires header works. However, you don't see a request made in the Web Console in Firefox. I'm not quite sure what Expiration-Time is, since nothing really comes up on Google about a header called 'Expiration-Time'. Also, is there an easy way to set the Expires header to the next day without parsing the date and setting it?

Edited by big dave

Share this post


Link to post
Share on other sites

Expiration time is the expires header, Firefox is just making it "readable". The value of 1969 might indicate that there is no expires header, that date is a timestamp value of 0.

Also, is there an easy way to set the Expires header to the next day without parsing the date and setting it?
There might be an Apache setting to do that, but I'm not sure.

Share this post


Link to post
Share on other sites

Thanks JSG. The Cache-Control header is easier and I did:

header('Cache-Control: max-age=86400'); //1 day = 86 400 seconds

Also, by appending d=3_14_2012 to each request, the URL for the next day will be unique thus, not using the cache from the previous day.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...