IE AJAX Issue..

[Nico VanHaaster]

Hello all,

I have run across an issue with IE 6.0+. I have a page that makes an
XMLHttpRequest to the webserver to update a report on the page. The
first time you hit the refresh report button the data is refreshed,
however if you try to refresh the report the onreadystatechage does
not seem to fire. I have tested this by placing an alert in the
verifyID2 & verifyID3 function to track where the XMLHttpRequest
currently is. Now when creating the Javascript i tend to lean towards
FireFox for obvious reasons. I have created similar Functions on other
pages that seem to work over multiple browsers so i am sort of
stumped.

Please let me know if you come up with anything. I have been looking
all over the place.

function verifyID(){
var ss = document.getElementById('reportspan')
ss.innerHTML = '';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please Wait
\">&nbsp;Preparing Reporting';
ss.style.cursor = 'wait';
setTimeout("verifyID2()",0);
}
function verifyID2(){
var ss = document.getElementById('reportspan')
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
ss.style.cursor = 'wait';
var url = 'get_unass_xml.php?location='+varLoc+'&sdate='+varSDate
+'&edate='+varEDate+'&ses='+ Math.random()
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
alert('Preparing Send'); //added to verify we are about to send
data
searchReq.onreadystatechange = verifyID3;
searchReq.open('GET', url, true);
searchReq.send(null);
}
}
function verifyID3(){
if(searchReq.readyState != 4){
alert(searchReq.readyState); //added to watch ready states <-
Second run never displays this message.
return false;
}
var ss = document.getElementById('reportspan')
var response = searchReq.responseText.split(":");
if(response[0]=='true'){
document.getElementById('next').style.display = 'none';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please
Wait\">&nbsp;Generating View';
ss.style.cursor = 'default';
setTimeout("doNothing()",0)
if (searchReq.overrideMimeType){
searchReq.overrideMimeType('text/xml');
}
ss.innerHTML = '<table id=\"responsetable\"></table>';
setTimeout("doNothing()",300)
var tbl = document.getElementById('responsetable');
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = '<a href=\"javascript:verifyID();
\">refresh report</a>';
var row = tbl.insertRow(1);
var cell = row.insertCell(0);
cell.innerHTML = 'Unassigned ID\'s With Hours';
if (searchReq.readyState == 4 || searchReq.readyState ==
0) {
if (isBusy){
searchReq.abort;
}
searchReq.open('GET', response[1], true);
searchReq.onreadystatechange = verifyID4;
searchReq.send(null);
}

}
else{
ss.innerHTML = '<img src=\"check.gif\" alt=\"Check
\">&nbsp;No Unassigned ID\'s Please Contiue.';
document.getElementById('step').value = 1;
document.getElementById('s1td1').className = 'active';
document.getElementById('s1td2').className = 'active';
document.getElementById('next').value = 'Next';
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
setStep(varLoc,varSDate,varEDate,'3');
}
}
function verifyID4(){
if (searchReq.readyState == 4) {
var varLoc = document.getElementById('location').value;
var xmldoc = searchReq.responseXML;
var root = xmldoc.getElementsByTagName('root').item(0);
for (var iNode = 0; iNode < root.childNodes.length; iNode+
+) {
var node = root.childNodes.item(iNode);
for (i = 0; i < node.childNodes.length; i++) {
var sibl = node.childNodes.item(i);
var len = parseInt(sibl.childNodes.length / 2);
var arr = new Array(len);
var cnt = 0;
for (x = 0; x < sibl.childNodes.length; x++) {
var sibl2 = sibl.childNodes.item(x);
var sibl3;
if (sibl2.childNodes.length > 0) {
sibl3 = sibl2.childNodes.item(0);
arr[cnt] = sibl3.data;
cnt++;
}
}
url = '<span style=\"cursorointer;\" onClick=
\"javascript:window.open(\'showEmpHours.php?location='+varLoc
+'&employee='+arr+'&sess='+Math.random()+'\',\'Hours_View\',
\'status=0,toolbar=0,scrollbars=1,width=620,height=480\');\">'+arr+'</
span>';
addrow("responsetable", url);
}
}
var ss = document.getElementById('reportspan')
document.getElementById('s1td1').className = 'error';
document.getElementById('s1td2').className = 'error';
}
}

Thank you in Advance....

 

[Peter Michaux]

Hello all,

I have run across an issue with IE 6.0+. I have a page that makes an
XMLHttpRequest to the webserver to update a report on the page. The
first time you hit the refresh report button the data is refreshed,
however if you try to refresh the report the onreadystatechage does
not seem to fire. I have tested this by placing an alert in the
verifyID2 & verifyID3 function to track where the XMLHttpRequest
currently is. Now when creating the Javascript i tend to lean towards
FireFox for obvious reasons. I have created similar Functions on other
pages that seem to work over multiple browsers so i am sort of
stumped.

Please let me know if you come up with anything. I have been looking
all over the place.

function verifyID(){
var ss = document.getElementById('reportspan')
ss.innerHTML = '';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please Wait
\">&nbsp;Preparing Reporting';
ss.style.cursor = 'wait';
setTimeout("verifyID2()",0);}

Why use the setTimeout() call above? Why not just merge verifyID() and
verifyID2() or just call verifyID2() directly above?

function verifyID2(){
var ss = document.getElementById('reportspan')
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
ss.style.cursor = 'wait';
var url = 'get_unass_xml.php?location='+varLoc+'&sdate='+varSDate
+'&edate='+varEDate+'&ses='+ Math.random()
if (searchReq.readyState == 4 || searchReq.readyState == 0) {

searchReq just magically appeared here. When was it instantiated? Why
do you need to test it's ready state before you send the request?

alert('Preparing Send'); //added to verify we are about to send
data
searchReq.onreadystatechange = verifyID3;
searchReq.open('GET', url, true);
searchReq.send(null);
}}

function verifyID3(){
if(searchReq.readyState != 4){

It looks like searchRequest is some sort of global. What happens if
two XHR requests are simultaneous. Will searchRequest point to the
second request? What happens when the first XHR (likely) returns first
and calls verifyID3()? It will try to look at the readyState of the
second request which is not 4 yet.

alert(searchReq.readyState); //added to watch ready states <-
Second run never displays this message.
return false;
}
var ss = document.getElementById('reportspan')
var response = searchReq.responseText.split(":");
if(response[0]=='true'){
document.getElementById('next').style.display = 'none';
ss.innerHTML = '<img src=\"vistawait2.gif\" alt=\"Please
Wait\">&nbsp;Generating View';
ss.style.cursor = 'default';
setTimeout("doNothing()",0)
if (searchReq.overrideMimeType){
searchReq.overrideMimeType('text/xml');
}
ss.innerHTML = '<table id=\"responsetable\"></table>';
setTimeout("doNothing()",300)
var tbl = document.getElementById('responsetable');
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = '<a href=\"javascript:verifyID();
\">refresh report</a>';
var row = tbl.insertRow(1);
var cell = row.insertCell(0);
cell.innerHTML = 'Unassigned ID\'s With Hours';

For a posting where you are seeking help I think a lot of the above
could have been trimmed to just and alert() call.

if (searchReq.readyState == 4 || searchReq.readyState ==
0) {
if (isBusy){
searchReq.abort;
}
searchReq.open('GET', response[1], true);
searchReq.onreadystatechange = verifyID4;
searchReq.send(null);

I remember reading on quirksmode.com that reusing an XHR object can
cause problems. I don't reuse XHR objects so haven't had to look into
this.

}

}
else{
ss.innerHTML = '<img src=\"check.gif\" alt=\"Check
\">&nbsp;No Unassigned ID\'s Please Contiue.';
document.getElementById('step').value = 1;
document.getElementById('s1td1').className = 'active';
document.getElementById('s1td2').className = 'active';
document.getElementById('next').value = 'Next';
var varLoc = document.getElementById('location').value;
var varSDate = document.getElementById('sdate').value;
var varEDate = document.getElementById('edate').value;
setStep(varLoc,varSDate,varEDate,'3');
}}

function verifyID4(){
if (searchReq.readyState == 4) {
var varLoc = document.getElementById('location').value;
var xmldoc = searchReq.responseXML;
var root = xmldoc.getElementsByTagName('root').item(0);
for (var iNode = 0; iNode < root.childNodes.length; iNode+
+) {
var node = root.childNodes.item(iNode);
for (i = 0; i < node.childNodes.length; i++) {
var sibl = node.childNodes.item(i);
var len = parseInt(sibl.childNodes.length / 2);
var arr = new Array(len);
var cnt = 0;
for (x = 0; x < sibl.childNodes.length; x++) {
var sibl2 = sibl.childNodes.item(x);
var sibl3;
if (sibl2.childNodes.length > 0) {
sibl3 = sibl2.childNodes.item(0);
arr[cnt] = sibl3.data;
cnt++;
}
}
url = '<span style=\"cursorointer;\" onClick=
\"javascript:window.open(\'showEmpHours.php?location='+varLoc
+'&employee='+arr+'&sess='+Math.random()+'\',\'Hours_View\',
\'status=0,toolbar=0,scrollbars=1,width=620,height=480\');\">'+arr+'</
span>';
addrow("responsetable", url);
}
}
var ss = document.getElementById('reportspan')
document.getElementById('s1td1').className = 'error';
document.getElementById('s1td2').className = 'error';
}

}

Have you thought about extracting the XHR part of the above into an
Ajax library for reuse like Yahoo! UI or something similar? Or maybe
just using one of the many existing Ajax libraries?

Please try to trim example code as much as possible to get the best
response.

Good luck.

Peter

 

[-Lost]

I remember reading on quirksmode.com that reusing an XHR object can
cause problems. I don't reuse XHR objects so haven't had to look into
this.

Hello, Mr. Michaux. Are you sure you read that correctly?

http://www.quirksmode.org/js/xmlhttp.html

Koch specifically states that in a given scenario where the requests are limited to three
to five files, creating new XMLHttpRequest objects is fine. However, this makes no sense
in an instance that requires several hundred or more requests. Reusing the object reduces
overhead.

Of course he eludes to the fact that an XMLHttpRequest should manage its requests, however
many of them there may be.

-Lost

 

[Nico VanHaaster]

Thank you Both for your help.

I was able to find a few resources that point to creating a global
variable to set to true\false based on the XHR's state. In IE you need
to check the status of the XHR when calling additional requests on the
same object. And using the XHR.abort() function.

See here for an idea of what i am talking about.

http://www.robertnyman.com/2007/04/04/weird-xmlhttprequest-error-in-ie-just-one-call-allowed/

 

[Tom Cole]

Thank you Both for your help.

I was able to find a few resources that point to creating a global
variable to set to true\false based on the XHR's state. In IE you need
to check the status of the XHR when calling additional requests on the
same object. And using the XHR.abort() function.

See here for an idea of what i am talking about.

http://www.robertnyman.com/2007/04/04/weird-xmlhttprequest-error-in-i...

Another issue you may need to consider is that IE will cache GET
requests. Therefore if it finds that a previous request with the exact
same URL was already made, it will use the cached results from that
request and display it, rather than sencind a new request. You can
override this functionality by assigning a random value to the end of
your url for each request (i.e. the current time in milliseconds or
something like that).

 

[-Lost]

Another issue you may need to consider is that IE will cache GET
requests. Therefore if it finds that a previous request with the exact
same URL was already made, it will use the cached results from that
request and display it, rather than sencind a new request. You can
override this functionality by assigning a random value to the end of
your url for each request (i.e. the current time in milliseconds or
something like that).

http://jibbering.com/faq/#FAQ4_17

-Lost

 

[Nico VanHaaster]

On my querystrings i add ...&sess='+Math.random()+'... to make sure it
isn't a caches url.

That should do it.