issue with IE and Ajax

[BeerFizz]

I'm using AJAX for the first time and while writing some code I noticed that IE appeared to be miss-behaving. Attached below is the test case showing the issue. This appears to fail with IE 6 and IE 7. Works fine with firefox and chrome.

In the code I have a number of alerts showing the path through the code and everything works ok until (with IE only) the call to the call back function setOutput. With IE the second time the doAjax script is invoked, setOutput's never called (or at least there is never a ready state of 4).

The way to reproduce this, is to delete IE's temporary internet files (tools/delete browsing history/temporary internet files). Load the test script test.html. Then click the "Click here" button and follow the path through. The first time it works fine and SetOutput is indeed called. If the button is clicked a second time, setOutput's never called. You can repeat this procedure (deleting browser history and clicking "click here").

I tried deleting the ajaxObject object to see if that would help, but it did not.

All help appreciated,
Thanks
Phil

----------------------------------------------
<code>

---------------- test.html --------------------------------------

&lt;head&gt;

&lt;script language="javascript" type="text/javascript"&gt;
&lt;!--


var ajaxObj = null;

function getAjaxObj()
{

alert("getAjaxObj: Getting ajax object.");
alert("getAjaxObj: req is " + typeof req);

// native XMLHttpRequest object
if(window.XMLHttpRequest &amp;&amp; !(window.ActiveXObject)) {
alert("1");
try {
req = new XMLHttpRequest();
alert("1.1");
} catch(e) {
req = false;
alert("1.2");
}
// IE/Windows ActiveX version
} else if(window.ActiveXObject) {
alert("2");
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
alert("2.1");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
alert("2.2");
} catch(e) {
req = false;
alert("2.3");
}
}
} else {
alert("getAjaxObj: Your browser does not support AJAX.");
req = false;
}

alert("3");
alert("getAjaxObj: req is " + typeof req);

return req;
}



function setOutput()
{
if (ajaxObj.readyState == 4) {
if (ajaxObj.status != 200) {
alert("setOutput: Ajax Error: " + ajaxObj.status);
} else {
var cType = ajaxObj.getResponseHeader("Content-Type")
alert("setOutput: Ajax content type " + cType);
delete ajaxObj; // tried doing this to see if it would fix the issue????
}
}
}



function doAjax()
{
ajaxObj = getAjaxObj();
if (ajaxObj != null) {
ajaxObj.open("GET", ".../test.php", true);
ajaxObj.send(null);
ajaxObj.onreadystatechange = setOutput;
}
}



//--&gt;
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;button onclick="doAjax()"&gt;Click here&lt;/button&gt;

&lt;/body&gt;



------------------- test.php ----------------------------------------------------

&lt;?php
echo ("Hello World");
?&gt;

</code>

 

[BillyRayPreachersSon]

This is a very common problem with IE's out-of-the-box cache setting of 'automatic'. If this is for your own personal use, you could set the setting to 'always check'. For others, you'll either have to:

1. use a 'cache-buster', or
2. set cache headers on your response.

I'd advise option 1, as it's easier to implement, unless you have a caching setup that doesn't like params (e.g. proxy software, load balancing, etc).

So, to use a cachebuster param, change this:

ajaxObj.open("GET", ".../test.php", true);

to this:

ajaxObj.open("GET", ".../test.php?cachebuster=" + new Date().getTime(), true);

Of course, I haven't corrected the fact all your markup seems to be escaped, nor the fact you have 3 dots in your pathname (is that valid?).

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BeerFizz]

Dan,

Thank you so much for the very complete solution.

Best
Regards
Phil