Chrome displays ajax response when pressing back button Chrome displays ajax response when pressing back button ajax ajax

Chrome displays ajax response when pressing back button


Make sure your AJAX requests use a different URL from the full HTML documents. Chrome caches the most recent request even if it is just a partial.

https://code.google.com/p/chromium/issues/detail?id=108425


Just in case you are using jQuery with History API (or some library like history.js), you should change $.getJSON to $.ajax with cache set to false:

$.ajax({    dataType: "json",    url: url,    cache: false,    success: function (json) {...}});


Actually this is the expected behavior of caching system according to specs and not a chrome issue. The cache only differentiate requests base on URL and request method (get, post, ...), not any of the request headers.

But there is a Vary header to tell browser to consider some headers when checking the cache. For example by adding Vary:X-Requested-With to the server response the browser knows that this response vary if request X-Requested-With header is changed. Or by adding Vary:Content-Type to the server response the browser knows that this response vary if request Content-Type header is changed.

You can add this line to your router for PHP:

header('Vary:X-Requested-With');

And use a middleware in node.js:

app.use(function(req, res) {    res.header('Vary', 'X-Requested-With');});