xmlHTTPrequest abort fails to abort request
0 posts in topic
Flat View  Flat View
TOPIC ACTIONS:
 

Posted By:   Hak_Kahlouche
Posted On:   Wednesday, August 22, 2007 09:54 AM

Dear All, I'm having an issue trying to abort an xmlHTTPrequest I have issued to my server. Essentially, I have created a loading popup and on the loading popup I have embedded a link with a click addEventListener that within the callback function runs abort(). It's weird, when I click the link, the callback function is executed but the abort() function doesn't abort the request and the Web page continues to wait for the response from the server (readyState == 4). I have looked all over the place for an answer but have been unsuccessful. The code is fairly extensive so I will try to summarize below: 1. I create the xmlHTTPrequest depending on the browser: Code: // if Mozilla,    More>>

Dear All,


I'm having an issue trying to abort an xmlHTTPrequest I have issued to my server. Essentially, I have created a loading popup and on the loading popup I have embedded a link with a click addEventListener that within the callback function runs abort(). It's weird, when I click the link, the callback function is executed but the abort() function doesn't abort the request and the Web page continues to wait for the response from the server (readyState == 4). I have looked all over the place for an answer but have been unsuccessful. The code is fairly extensive so I will try to summarize below:




1. I create the xmlHTTPrequest depending on the browser:



Code:
			
// if Mozilla, Safari etc
if (window.XMLHttpRequest)
req = new XMLHttpRequest()
// if IE
else if (window.ActiveXObject){
try {
req = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{ req = new ActiveXObject("Microsoft.XMLHTTP") }catch (e){}
}
}else{
alert('This Browser do not support AJAX-Technology!');
return ;
}



2. I then create my status bar with the embedded cancel link and set it's visibility to hidden:




Code:
			
if(!document.getElementById("uiStatus")) _createstatusbar(req);
_showstatus(false);



3. I then register two callback functions, one for onReadyStateChange and timeout function for long running requests:



Code:
			
//Timout function
var requestTimer = setTimeout(function() {
try{req.abort(); req=null;}catch(e){}
_showstatus(false);
alert('Your request has timed-out');
// Handle timeout situation, e.g. Retry or inform user.
}, 30000);

//handle status
req.onreadystatechange = reqreadystatechange;The Timeout function does correctly abort the request



4. My callback function for onReadyStateChange:



Code:
			
function reqreadystatechange() {

if (req.readyState != 4){return;}
clearTimeout(requestTimer);
if (req.status == 200) {
data = req.responseText;
req=null;
_showstatus(false);
}else{
alert('ERROR loading data :-(');
}
}



5. So my createStatusBar method creates the status bar and registers the onClick callback function:



Code:
			
function _createstatusbar(xmlReq){
//statusbar div
var uiStatus = document.createElement("div");
uiStatus.setAttribute("style","visibility:hidden;position:absolute;width:215px;left:0px;top:0px;font:normal 14px Arial;background:#f4fccc;padding:4px;color:#330000;border:2px #999 solid;z-index:100;");
uiStatus.setAttribute("id","uiStatus");

var statusText = document.createTextNode("Executing...");
uiStatus.appendChild(statusText);
var editLink = document.createElement("a");
var linkText = document.createTextNode("cancel");
editLink.setAttribute("class", "redsmall");
editLink.setAttribute("style", "position:absolute;top:4px;right:4px;");

editLink.appendChild(linkText);
uiStatus.appendChild(editLink);

var statusImg = document.createElement("img");
statusImg.setAttribute("src","../images/pleasewait.gif");
uiStatus.appendChild(statusImg);

window.document.documentElement.appendChild(uiStatus);

var abort = new AbortXMLRequest(xmlReq);
editLink.addEventListener('click', abort.invoke, false);
}



6. With my AbortXMLRequest callback looking as follows:



Code:
			
function AbortXMLRequest(req) {

this.req=req;

var me=this;

this.invoke=function () {

me.req.abort();
_showstatus(false);

}
}



I understand this may be a difficult problem but I would greatly appreciate anyone who could give me a hand. If you need any more information please let me know.



Many Thanks,    <<Less
About | Sitemap | Contact