Why will my jQuery ajax not support the ETag feature?
You see in the second example, there is no "If-None-Match" header. But why?
In both tested browser i have a 50% change to have a cache will pressing F5 but in simply reopen the page by clicking links it wont work.
Working none jQuery example
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log( xmlhttp.responseText );
}
}
xmlhttp.open("GET","/energyManagerSensor/getCleanData/sensor_id/4?shrink_type=day&from=18.11.2011&to=23.02.2013",true);
xmlhttp.send();
REQUEST Header
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,de-CH;q=0.6,fr-FR;q=0.5,fr;q=0.4,en-gb;q=0.3,sr-RS;q=0.2,sr;q=0.1
Cache-Control max-age=0
Connection keep-alive
Cookie PHPSESSID=iie173rsc5bqggll6uhmg6m7i6
Host sfportal3_hh_dev
If-Modified-Since Tue, 12 Feb 2013 0:0:0 GMT
If-None-Match 4SdayF1321570800T1361574000
Referer http://sfportal3_hh_dev/energyManagerDisplay/view/display_id/1
User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0 FirePHP/0.7.1
x-insight activate
RESPONSE Header
Cache-Control max-age=3600
Connection close
Date Tue, 12 Feb 2013 06:16:23 GMT
Expires Thu, 19 Nov 1981 08:52:00 GMT
Server Apache/2.2.22 (Ubuntu)
NOT Working jQuery example
$.ajax({
url: "/energyManagerSensor/getCleanData/sensor_id/4?shrink_type=day&from=18.11.2011&to=23.02.2013",
type: 'GET',
dataType: "json",
cache: true,
ifModified: true,
success: function(return_data) {
console.log(return_data);
}
});
REQUEST Header
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,de-CH;q=0.6,fr-FR;q=0.5,fr;q=0.4,en-gb;q=0.3,sr-RS;q=0.2,sr;q=0.1
Connection keep-alive
Cookie PHPSESSID=iie173rsc5bqggll6uhmg6m7i6
Host sfportal3_hh_dev
Referer http://sfportal3_hh_dev/energyManagerDisplay/view/display_id/1
User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0 FirePHP/0.7.1
X-Requested-With XMLHttpRequest
x-insight activate
RESPONSE Header
Cache-Control max-age=3600
Connection Keep-Alive
Content-Type text/json
Date Tue, 12 Feb 2013 06:18:41 GMT
Etag 5SdayF1321570800T1361574000
Expires Tue, 12 Feb 2013 07:02:18 GMT
Keep-Alive timeout=5, max=74
Last-Modified Tue, 12 Feb 2013 0:0:0 GMT
Server Apache/2.2.22 (Ubuntu)
Transfer-Encoding chunked
X-Powered-By PHP/5.3.10-1ubuntu3
Test enviroment
I found the problem:
1.) The "ifModified" on http://api.jquery.com/jQuery.ajax/ is absolutely wrong in my eyes. After reading the jQuery source code, I would remove the sentence:
"Allow the request to be successful only if the response has changed since the last request."
And would write something like: If "ifModified" is true, The lastModified and etag header options will be used, for active caching.
2.) I have had a problem in PHP
It is required to send the ETag always, also in case of 304 response.
<?php
// Save performance use ETag system
// @see http://en.wikipedia.org/wiki/HTTP_ETag
$lastmod = gmdate('D, d M Y 0:0:0 \G\M\T', time());
$etag = $sensor_id . 'S' . $shrink_type . 'A' . $alarms . 'F' . $from . 'T' . $to . 'D' . date('Dmy');
$ifmod = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] == $lastmod : null;
$iftag = isset($_SERVER['HTTP_IF_NONE_MATCH']) ? $_SERVER['HTTP_IF_NONE_MATCH'] == $etag : null;
header_remove('Pragma');
header_remove('Cache-Control');
header('Expires: ' . gmdate('D, d M Y H:m:i \G\M\T', time() + 3600));
header('Cache-Control: max-age=3600');
header('Last-Modified: ' . $lastmod);
header('ETag: ' . $etag);
if (($ifmod || $iftag) && ($ifmod !== false && $iftag !== false)) {
header('HTTP/1.0 304 Not Modified');
die();
}