Internet explorer (IE) caching AJAX requests.

2 minute read

The project was to create a status web page that showed the temperature of a room. The temperature of the room changes rapidly and I wanted the changes to appear on the page without my users having to click refresh every time they wanted an updated value.The ideal solution was AJAX. I would use a bit of JavaScript to query anther page for the temperature of a room and refresh a div on the status page every n seconds.

It worked fine in FireFox and opera but when I tried it in Internet Explorer (IE) I found that the value never refreshed. Example: http://www.abluestar.com/dev/web/ajax/temperature/

It turns out that Internet explorer loves to cache everything even when it"s told that the data has expired. IE is happy to shows you the catches version.

The first thing I tried was to set the Last-Modified, Date, Cache-Control headers so that it shouldn"t cache anything. Of course Internet Explorer ignored these settings.

Then as a good internet enabled programmer I searched the internet for a solution and came across this page Ajax IE caching issue. His solution was to use a POST instead of a GET to retrieve the data but it didn"t work for me

After a bit of smashing my head up against the wall, cursing the devil that is internet explorer I finely found a working solution. Added a parameter to the end of the URL with the time in Sec"s

So instead of requesting value.php I request value.php?s=1828399595. It worked flawlessly Example: http://www.abluestar.com/dev/web/ajax/temperature/index2.htm

<html> <head> <title>Temperature</title> <script type="text/javascript"> function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp } function RefreshData() { // Get The value span var value_span = document.getElementById("temperature_a") ; if( value_span == null ) { return ; } // Get XmlHttp Object var xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Browser does not support HTTP Request") return ; } // Create the request xmlhttp.open("POST", "value.php" + "?ms=" + new Date().getTime() , true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if( xmlhttp.status==200 ) { value_span.innerHTML = xmlhttp.responseText ; } else { // Error value_span.innerHTML = 'Error loading data. Error=' + xmlhttp.status ; } } } // Set the request try { xmlhttp.send(null); } catch (E) { } // Set a timer to call this function again in 1 sec timerID = self.setTimeout("RefreshData( );", 1000 ) } </script> </head> <body onload='RefreshData();' > <strong>Temperature:</strong> <span id='temperature_a'>Loading</span> </body> </html>

Leave a comment