Link to home
Start Free TrialLog in
Avatar of Brian Bush
Brian BushFlag for United States of America

asked on

onreadystatechange Event Stops Firing

I am trying to set up a couple of ajax functions to reuse the XMLHttpRequest object. In this example, I have a function that runs on an interval. It fires the event handler just fine the first time through. The second time, the ajax sends back to the server and returns data, but the event handler is not run. Any ideas why?
var xmlHttpRequest;
 
function ajaxGet(uri, isAsync) {
	if (typeof(xmlHttpRequest) == 'undefined') {
		if (window.XMLHttpRequest) { // Mozilla, Safari,...
			xmlHttpRequest = new XMLHttpRequest();
		} else if (window.ActiveXObject) { // IE
			try {
				xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
	}
	xmlHttpRequest.onreadystatechange = ajaxListener;
	xmlHttpRequest.open("GET", uri, isAsync);
	xmlHttpRequest.send(null);
}
 
function ajaxListener() {
	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
		alert("response: " + xmlHttpRequest.responseText);
	}
}
 
function getHttpUpdates() {
	ajaxGet("AjaxServlet?do=getUpdates", true);
}
 
window.setInterval(getHttpUpdates, 5000);

Open in new window

Avatar of third
third
Flag of Philippines image

so you will always get a fresh page, try adding random number to your url


function getHttpUpdates() {
        ajaxGet("AjaxServlet?do=getUpdates&sid="+Math.random(), true);
}

Avatar of Brian Bush

ASKER

Not sure what you mean about "a fresh page", but I tried the random number anyway. I assume you are concerned that I am caching in some way. That's not the problem.

I can pull up Fiddler and see that the call goes to the server and sends back the data with a 200, but it never fires the Listener function after the first alert is cleared.
Something that I thought might help is the original method I was using. In this case, the Javascript is leaky in Internet Explorer. So, I am trying to make it better with the version above. So, the choices are leaky, but working or sound, but useless.
//var xmlHttpRequest;
 
function ajaxGet(uri, isAsync) {
	/*
	* Make the xmlHttpRequest object local.
	* This causes a memory leak in IE, because the
	* object is not cleaned up after it is completed.
	* Setting the object to null fixes the leak, but
	* it is difficult to predict when you can set the
	* object to null without killing a current action.
	*/
	var xmlHttpRequest;
 
	if (typeof(xmlHttpRequest) == 'undefined') {
		if (window.XMLHttpRequest) { // Mozilla, Safari,...
			xmlHttpRequest = new XMLHttpRequest();
		} else if (window.ActiveXObject) { // IE
			try {
				xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
	}
	// xmlHttpRequest.onreadystatechange = ajaxListener;
	/*
	* You have to define the listener function as an anonymous
	* function, so that it has access to the local xmlHttpRequest object.
	*/
	xmlHttpRequest.onreadystatechange = function() {
		if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
			alert("response: " + xmlHttpRequest.responseText);
		}
	}
	xmlHttpRequest.open("GET", uri, isAsync);
	xmlHttpRequest.send(null);
}
 
/*
* function ajaxListener() {
* 	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
* 		alert("response: " + xmlHttpRequest.responseText);
* 	}
* }
*/
 
function getHttpUpdates() {
	ajaxGet("RequestHandler?action=getContacts&search=e0019662", true);
}
 
window.setInterval(getHttpUpdates, 5000);

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of third
third
Flag of Philippines image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I should have mentioned that this code seems to work fine in Google Chrome, Safari, Firefox, etc. Internet Explorer is the issue, but it is our company standard.
It looks like setting the object to null in the listener works fine, as long as I also check for it in the ajaxGet function. Thanks for the help third. I throw you the points.
var xmlHttpRequest;
 
function ajaxGet(uri, isAsync) {
	if ((xmlHttpRequest == null) || typeof(xmlHttpRequest) == 'undefined') {
		if (window.XMLHttpRequest) { // Mozilla, Safari,...
			xmlHttpRequest = new XMLHttpRequest();
		} else if (window.ActiveXObject) { // IE
			try {
				xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
	}
	xmlHttpRequest.onreadystatechange = ajaxListener;
	xmlHttpRequest.open("GET", uri, isAsync);
	xmlHttpRequest.send(null);
}
 
function ajaxListener() {
	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
		alert("response: " + xmlHttpRequest.responseText);
		xmlHttpRequest = null;
	}
}
 
function getHttpUpdates() {
	ajaxGet("RequestHandler?action=getContacts&search=e0019662", true);
}
 
window.setInterval(getHttpUpdates, 5000);

Open in new window

Thanks.
Avatar of venkatma
venkatma

I am using the same code and it doesnt work in IE. I tried setting request object as local var and global variable but, when I request a lot of data, onreadystatechange doesnt fire.

so, i did a experiment where I made ajax call in a loop reesting the same amount of data and not using the data in the UI. ajax works fine.

but when I load the data in a silverlight UI for every call and the silverlight page shows a busy indicator when the request is made, I get this behavior.

If I remove the busy indicator, everything works normally.

is there a solution for this