asked on

AJAX and IE

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

-------------------------------------- test.html ----------------------------
 
<head>
 
<script language="javascript" type="text/javascript">
<!--
 
 
var ajaxObj = null;
 
function getAjaxObj()
{
 
	alert("getAjaxObj: Getting ajax object.");
	alert("getAjaxObj: req is " + typeof req);
 
    // native XMLHttpRequest object
    if(window.XMLHttpRequest && !(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;
    }
}
 
 
 
//-->
</script>
 
</head>
 
<body>
 
	<button onclick="doAjax()">Click here</button>
 
</body>
 
 
 
------------------- test.php -------------------------------------------------------------------
 
<?php
	echo ("Hello World");
?>

Open in new window

ASKER CERTIFIED SOLUTION

Badotz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Badotz

Using the above code results in a *new* XMLHttpRequest object each time.

BeerFizz

ASKER

Hi Badotz,

Thank you for responding. Unfortunately the issue I am having (as I just found out) revolves around IE's cache. Since the call is identical every time: "ajaxObj.open("GET", ".../test.php", true); IE does not make the call and uses the previous answer. Solution is to add a unique parameter to the url in the call.

Thanks you for trying
Best
Phil

BeerFizz

ASKER

Thanks

Badotz

Oh, right.

Can you post your code so others can see the way to avoid this problem?

And no worries- glad to help.

BeerFizz

ASKER

Replace the open with a parameter that has an unique number. This will circumvent IE's cache.

See below.

function getClubID()
{
    ajaxObj = getAjaxObj();
    if (ajaxObj != null) {
        ajaxObj.open("GET", "yourpath/test.php?cachebuster=" + new Date().getTime(), true);
        ajaxObj.send(null);
        ajaxObj.onreadystatechange = setOutput;
    } else {
      alert("Failed to get Ajax Object.");
    }
}

Open in new window