xmlHTTPrequest abort fails to abort request

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,