PHP / Ajax "Vary: X-Requested-With" doesn't work for me!

Question

I am trying to use cached content depending on whether this is an ajax request or not.

Scenario:

A little PHP script "/test.php" executes some HTML output and sets the following headers:

Expires Wed, 23 Feb 2011 13:30:06 GMT Cache-Control public, max-age=60 Vary X-Requested-With,Accept-Encoding 

The output depends on the state of $_SERVER['HTTP_X_REQUESTED_WITH'] .

When my Firefox points to Url, I get the output, and for the next minute I get the same result from Browser-Cache without getting to the server. Okay bye.

When I request the same resource using XMLHttpRequest (with the X-Requested-With: XMLHttpRequest header), my Firefox DOES NOT request the server, but it executes a (wrong) response from Cache!

Conversely, the same thing. Ajax-Call on the resource fills the cache, and the subsequent browser request serves the (incorrect) response from the cache.

Does anyone have any experience with this topic? I think this should be a fairly common problem - serving content depending on whether it is ajax or not (at the same URL).

greetings, ilja

Answer 1

I can reproduce this, but only if I do not include the X-Requested-With header in the ajax response. If I set the header for the ajax call, it works basically as expected, although the ajax call clears the cache for a regular request, and vice versa - the content is not cached, but you never get the wrong content.

My PHP document is as follows:

 <? putenv('TZ=PST8PDT'); date_default_timezone_set('America/Los_Angeles'); header('Expires: '.gmdate("D, d MYH:i:s").' GMT'); header('Cache-Control: public, max-age=60'); header('Vary: X-Requested-With,Accept-Encoding'); echo 'it is now '.date('Ymd H:i:s'); ?> 

And my test page is as follows:

 <a href="resource.php" target="ifr">load into frame</a><br /> <iframe name="ifr" width="400" height="100"></iframe> <hr /> <a href="#" onclick="return load();">load into div via ajax</a><br /> <div id="di" style="border: 1px solid black; width: 400px; height: 100px;"></div> <script> function load(){ var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if (req.readyState == 4){ document.getElementById('di').textContent = req.responseText; } } req.open('GET', 'resource.php', 1); req.setRequestHeader("X-Requested-With", "XMLHttpRequest"); req.send(null); return false; } </script> 

When I click the first link, it requests from the server. When I hit it again, it comes from the cache. Each subsequent click comes from the cache, up to 60 seconds.

When I hit the second link, the request is sent to the server. When I hit it again, it comes from the cache. Each subsequent click comes from the cache, up to 60 seconds.

If I click link 1 and then link 2, they will both go to the server. If I delete link 1 again, it will reappear on the server (which is wrong). Demo sequence (provided that everything is within 60 seconds):

 Reg : server Reg : cache Reg : cache Reg : cache Ajax : server Ajax : cache Reg : server Ajax : server 

The result is that if you want to cache things differently reliably when served through ajax, use a different url when executing the ajax request (? Ajax = 1 will work fine).

I am testing the latest version of FF 4.0