PHP/Ajax "Vary: X-Requested-With" does not work for me! -

i trying serve cacheable content depending on whether ajax request or not.

scenario:

a little php-script "/test.php" serves html-output , sets 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 $_server['http_x_requested_with'] state.

when firefox points url output, , next minute same result browser-cache, not hitting server. ok, far.

when request same resource via xmlhttprequest (with x-requested-with: xmlhttprequest header), firefox not request server, serves (wrong) response cache!

for other way round, same. ajax-call on resource fills cache, , subsequent browser-request serves (wrong) response cache.

does have experience topic? think should common enough issue - serving content depending on whether ajax or not (on same url).

greetings, ilja

i can reproduce this, if don't include x-requested-with header in ajax response. if set header ajax call, works mostly expected, although ajax call clears cache regular request , vice-versa - content not cached, never wrong content.

my php doc looks this:

<?     putenv('tz=pst8pdt');     date_default_timezone_set('america/los_angeles');      header('expires: '.gmdate("d, d m y h:i:s").' gmt');     header('cache-control: public, max-age=60');     header('vary: x-requested-with,accept-encoding');      echo 'it '.date('y-m-d h:i:s'); ?> 

and test page this:

<a href="resource.php" target="ifr">load frame</a><br /> <iframe name="ifr" width="400" height="100"></iframe>  <hr />  <a href="#" onclick="return load();">load 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 hit first link, requests server. when hit again, comes cache. every subsequent click comes cache, 60 seconds.

when hit second link, request goes server. when hit again, comes cache. every subsequent click comes cache, 60 seconds.

if hit link 1, link 2, both go server. if hit link 1 again, goes server again (which wrong). demo sequence (assuming within 60s):

reg  : server reg  : cache reg  : cache reg  : cache ajax : server ajax : cache reg  : server ajax : server 

the upshot is, if want reliably cache things differently when served via ajax, use different url when making ajax request (?ajax=1 work fine).

i'm testing on ff 4.0 latest