Brian Bush
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);
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.
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.
ASKER
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);
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
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);
ASKER
Thanks.
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
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
function getHttpUpdates() {
ajaxGet("AjaxServlet?do=ge
}