Ajax IE caching nightmare

ballboy · 06-17-2008, 02:45 AM

Hi,

I'm having trouble with an Ajax script that auto refreshes content on a page. The code worked fine on FireFox, and then i found out that it wont work on either IE6 or 7. I tested further on Opera (didn't work) and Safari (did work).

I've been doing some reading about this issue and found that apart from caching via headers some people pass a random number as a variable in the url which is supposed to solve the problem. surprisingly (or not) it fixed the problem on Opera, but not on either version of IE.

The script just loads a time stamp from a file called time.php

Im attaching the code in hope someone might put out me of my misery

Code:

<?php
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>

<head>
<script type="text/javascript">
var randomnumber = Math.floor(Math.random()*1000001);
var page = "/4xp/ajax/time.php?dummy=" + randomnumber;

function ajax(url,target)
 {
 
    // native XMLHttpRequest object
   document.getElementById(target).innerHTML = 'sending...';
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("GET", url, true);
       req.send(null);
   // IE/Windows ActiveX version
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
       if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("GET", url, true);
           req.send(null);
       }
   }
		   setTimeout("ajax(page,'scriptoutput')", 1000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}
</script>
</head>
<body onload="ajax(page,'scriptoutput')">
<p>Current Server date & time:<br />
<span id="scriptoutput"></span></p>
</body>

and time.php is just:

Code:

<?php
echo time();
?>

Thanks!

bdl · 06-17-2008, 03:53 AM

I used to use the random GET string hack, but now I've found setting a header with the XMLHttpRequest setRequestHeader() method is best:

Code:

/* xhr is your request object of course */
xhr.open("GET","script.php",true);
/* send If-Modified-Since header
xhr.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT");
xhr.onreadystatechange= function() {
 /* callback function */
}
xhr.send(null);

You shouldn't have to worry about any caching issues, the header ensures it always returns a result based on your If-Modified-Since header. Just make sure it's long enough in the past to work. I use "doomsday eve", AKA the night before Y2K.

Eris · 07-26-2008, 04:41 PM

I've searched so long how to solve this problem and finally found the way. This really works. Thx A LOT bdl.

babelfish · 09-03-2008, 08:48 AM

yes, fixed my problem too! kudos!

ctess · 09-25-2008, 07:59 PM

There is a much easier option and you can remove all the caching headers at the top as well. This solved all my caching issues:

xmlHttp.open('GET', url+'?bustcache='+new Date().getTime(), true);

xcaliburs · 10-15-2008, 12:48 AM

To bdl,

Thank you for posting! You're the man

Cheers