How to prevent browser caching

On http://stepcounter.wohill.com you can fill in how many steps you have taken for specific days. When saving, an AJAX-request is sent to the backend PHP-controller page which stores the data in the database. When a response is sent back that everything went ok, other functions are called that redraws a table and a chart presenting the current steps status. Here was the first raw design of how it looks, just to give you the idea:

When the redraw takes place we want it to be displayed in real-time of course. This is no issue if your browser doesn't cache the pages. Many browsers do use cache however - this is for example the default behaviour for Internet explorer 6. So when using IE6 you will not see the update in the table or chart when adding new steps. For static pages this could be handled by modifying the http-headers using meta tags or by tuning the web server settings.

To do this using the meta tags add these lines to the page (see source page here):

If you are using an Apache web server you could for instance modify the .htacccess file by adding these lines (see the Wikipedia source page here):

<FilesMatch "\.(html|htm|js|css)$">
Header set Cache-Control "max-age=0, no-cache, no-store, private"
Header set Pragma "no-cache"
Header set Expires "0"
</FilesMatch>

But if you would get the data using AJAX which is the case here (a JavaScript function calls a backend PHP-function to get the data asynchronously) then these modifications will not be enough. Instead the solution here is to set the http-headers before writing the response back to the calling function (see source page here):

<?php

/*
Functionality to handle and get data.
*/

/* Set http-headers */
// Backwards Compatibility for HTTP/1.0 clients
header("Expires: 0");
header("Pragma: no-cache");
// HTTP/1.1 support
header("Cache-Control: no-cache,no-store,max-age=0,s-maxage=0,must-revalidate");

Print "Data that should be sent back to the calling front-end function";
?>

So this way the table and chart will be updated instantly without having to refresh the page.