CODEWITHSUNDEEP
javascriptbrowser-cache
gaa
gaa

Reputation: 1162

How to avoid caching in browser when replacing contents of page with document.write()

I'm bit struggling with browser caching.

I have a static HTML page (lets call it index.html) which includes javascripts which do the magic (embedding interactive service). Those scripts have AJAX response error handler which looks like this:

function(response){ // response is prototype.js AJAX response 
  document.open("text/html");
  document.write(response.responseText);
  document.close();
}

When this is invoked and document content is replaced, browser caches (i don't want it to be chached) it and hitting F5 does nothing. Ofc. CTRL+F5 works fine but I cannot assume that user will do this.

This function is handler for error AJAX responses which I get. It is used to replace page contents with custom error page responded by front Apache HTTP server which has reverse proxy to another Apache HTTP server which again has reverse proxy to Tomcat serving scripts and handling requests from them.

Front Apache HTTP server has in its configuration error page override and cache control headers for index.html:

ProxyErrorOverride On
<Files index.html>
  Header set Cache-control "no-cache, no-store, max-age=0, must-revalidate"
  Header set Pragma "no-cache"
  ExpiresByType text/html "access plus 1 second"
</Files>

So caching of index.html seems for me to be switched off. I assume that you see that I'm using mod_proxy, mod_headers, mod_expires.

Error page has is equipped with meta tags for cache control (i know, i know they can be not taken into account ;) and lets say its header looks like this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Thu, 01 Jan 1970 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

So on the end my scenario looks more or less like this:

  1. page loads
  2. javascripts are loaded and invoked, magic begins (service embeds in designated div, and starts to talk with server with use of AJAX).
  3. Tomcat/Inner HTTP server is down (i don't know maintenance/upgrade of software)
  4. scripts get AJAX error responses (which responseText is custom error page overridden by front Apache HTTP server with his error page)
  5. contents of page is being replaced with custom error page
  6. server from 4. gets up (or even not, then it will be handled from different level)
  7. user hit F5 page is reloaded (but it doesn't)

I can be bit chaotic here so if something is unclear or i should give more details please ask I will try to provide additional info ASAP.

PS: I assume I might be fundamentally wrong with my approach or doing something stupid. If I do, let me know.

EDIT:

Actually it is happening on ff(16.0.2, 17.0) and IE9. Chrome, Opera and Safari simply reload page without caching. Oh, it is even worse ff and ie don't refresh on ctrl+f5 only when you hit enter in address bar :P

On ff i get wycywig:/// in documentURI property

Upvotes: 4

Views: 1837

Answers (1)

bm_i
bm_i

Reputation: 598

Are you using IE? IE likes to cache AJAX get requests regardless of cache-header response. Have you tried adding a cache-busting string to the request URL something like this:

var cacheBuster = '?buster=' + (new Date()).getTime(), //add a timestamp
    url = '/my/url' + cacheBuster;

new Ajax.Request(url, { 
    //... your ajax request 
});

Upvotes: 0

Related Questions