HTTP Techniques

Cache-control

• A radical solution to force a browser refetch in all cases is to generate a unique random key as a GET parameter in an Ajax call.

• Else, the normal solution is to use (in the HTTP headers) the Cache-Control directive. The following arguments should be enough to disable caching.

Cache-control "no-cache, no-store, max-age=0, must-revalidate"

• I don't know exactly what the "private" value in Cache-control does.

• Technically, an "Expires" header with any other value than a date is not valid. You can set the date in the past though, to force a refetch:

Expires "Fri, 01 Jan 1990 00:00:00 GMT"

• Note that Pragma: "No-cache is not a valid header to disable caching.

Firefox

• Under Firefox, when you press the back button, Firefox does not refetch the page from the server and it does not even retrieve it from cache. It retrieves it from RAM. This can cause problems when you want to refresh the pages (typically, if some information has been added to the HTTP session for example).

• If the JavaScript code makes an AJAX call this call too will be cached.

• Firefox 3 cache implementation seems to be broken. Even with the above header values, Firefox seems to randomly use the version of the document in the RAM cache, or refetch.

Reloading an image with the same URL

• If an image has changed on the server but has the same URL, and you wish to refresh it on the client (browser), one trick is to add an unique key to the HTTP request. For example, issue a GET /image/sample-image.png?random=156831357. This works out very well.

Ajax File Upload

• The idea here is to use a hidden iframe that the upload form will target. To get back JS control once the upload is finished, several techniques are possible. The following one registers a "load" event listener on the upload frame:

$("uploadFrame").observe("load", this.myCallBack.bindAsEventListener(this));

• To access content inside an iframe, the following JS code can be used:

data = frames["uploadFrame"].document.getElementById("uploadFrameResultData").innerHTML.evalJSON();