Internet Explorer 7 Ajax links only load once

Question

I'm writing an application and I'm trying to tie simple AJAX functionality in. It works well in Mozilla Firefox, but there's an interesting bug in Internet Explorer: Each of the links can only be clicked once. The browser must be completely restarted, simply reloading the page won't work. I've written a very simple example application that demonstrates this.

Javascript reproduced below:

var xmlHttp = new XMLHttpRequest();

/*
item: the object clicked on
type: the type of action to perform (one of 'image','text' or 'blurb'
*/
function select(item,type)
{

    //Deselect the previously selected 'selected' object
    if(document.getElementById('selected')!=null)
    {
        document.getElementById('selected').id = '';
    }
    //reselect the new selcted object
    item.id = 'selected';

    //get the appropriate page
    if(type=='image')
        xmlHttp.open("GET","image.php");
    else if (type=='text')
        xmlHttp.open("GET","textbox.php");
    else if(type=='blurb')
        xmlHttp.open("GET","blurb.php");

    xmlHttp.send(null);
    xmlHttp.onreadystatechange = catchResponse;

    return false;

}
function catchResponse()
{
    if(xmlHttp.readyState == 4)
    {
        document.getElementById("page").innerHTML=xmlHttp.responseText;
    }

    return false;
}

Any help would be appreciated.

score 16 · Accepted Answer · answered Oct 28 '08 at 21:27

16

This happens because Internet Explorer ignores the no-cache directive, and caches the results of ajax calls. Then, if the next request is identical, it will just serve up the cached version. There's an easy workaround, and that is to just append random string on the end of your query.

 xmlHttp.open("GET","blurb.php?"+Math.random();

answered Oct 28 '08 at 21:27

TJ L

23,914
7
59
77

In my experience, adding all three headers I posted above will prevent IE from caching, without needing to append a random number. – pkaeding Oct 28 '08 at 21:29

score 6 · Answer 2 · answered Oct 28 '08 at 21:25

6

It looks like IE is caching the response. If you either change your calls to POST methods, or send the appropriate headers to tell IE not to cache the response, it should work.

The headers I send to be sure it doesn't cache are:

Pragma: no-cache
Cache-Control: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT

Note the expiration date can be any time in the past.

answered Oct 28 '08 at 21:25

pkaeding

36,513
30
103
141

How exactly to you set these headers? Would I use the header() function of PHP? Something in the HTML? I'm a little confused. – stillinbeta Oct 29 '08 at 12:07
Yes, the PHP header() function can be used to add these – Mark Renouf Feb 13 '09 at 16:10
And in ColdFusion you can use the cfheader tag to pass them using name and value attributes. For some reason I had to add no-store to Cache-Control as well, and of course in IE 8 even that didn't work, but at least it did in IE 7 and Firefox 3. – Dave DuPlantis May 21 '09 at 18:28

jcampbell1 · Answer 3 · 2008-10-29T00:20:48.800

3

The problem is that IE does wacky things when the response handler is set before open is called. You aren't doing that for the first xhr request, but since you reuse the xhr object, when the second open is called, the response handler is already set. That may be confusing, but the solution is simple. Create a new xhr object for each request:

move the:

var xmlHttp = new XMLHttpRequest();

inside the select function.

edited Oct 29 '08 at 00:20

answered Oct 29 '08 at 00:11

jcampbell1

4,159
3
33
35

Thanks, this did the trick. It should be noted, though, that I have to move the event handler within the function so it has the scope to read the xmlHttpRequest variable. – stillinbeta Oct 29 '08 at 11:54
Upon closer inspection, this doesn't seem to have solve the problem. – stillinbeta Oct 29 '08 at 12:01

score 1 · Answer 4 · answered Nov 03 '12 at 22:23

1

Using Dojo, this can be done using dojo.date.stamp, just adding the following to the url:

"...&amp;ts=" + dojo.date.stamp.toISOString(new Date())

answered Nov 03 '12 at 22:23

Alfredo Carrillo

316
2
8

score 1 · Answer 5 · answered Feb 11 '09 at 10:23

1

Read No Problems section in [link text][1] [1]: http://en.wikipedia.org/wiki/XMLHttpRequest

answered Feb 11 '09 at 10:23

score 1 · Answer 6 · answered Apr 13 '09 at 18:40

The response header that has worked best for me in the IE AJAX case is Expires: -1, which is probably not per spec but mentioned in a Microsoft Support Article (How to prevent caching in Internet Explorer). This is used in conjunction with Cache-Control: no-cache and Pragma: no-cache.

score 0 · Answer 7 · answered Dec 10 '08 at 15:35

xmlHttp.open("GET","blurb.php?"+Math.random();

I agree with this one.. it works perfectly as a solution to this problem. the problem is that IE7's caching of urls were terrible, ignoring the no-cache header and save the resource to its cache using its url as key index, so the best solution is to add a random parameter to the GET url.

score 0 · Answer 8 · answered Mar 14 '12 at 10:00

0

In jQuery.ajax, you can set the "cache" setting to false:

http://api.jquery.com/jQuery.ajax/

answered Mar 14 '12 at 10:00

Erel Segal-Halevi

33,955
36
114
183

Internet Explorer 7 Ajax links only load once

8 Answers8

Linked