jqXHR.abort() not cancelling the request but causing the browser to be unresponsive

Question

I have a jQuery dialog which I use when making ajax calls. I want to be able to abort the current request when the dialog is closed. For this purpose I have defined a global variable called currentRequest and each time I setup an ajax request I assign it to this variable. In the close event of the dialog I check if currentRequst does not equal to undefined, if so I call currentRequst.abort(). But this does not seem to work as I am not able to reload the page. I have to wait until the time that would be needed to receive the response has elapsed. Here's the piece of the dialog:

...
 close:function(event,ui){dialogClosehandler();}
...

function dialogClosehandler(){
  alert('Dialog is closed');
 if(currentRequest!=undefined)
    currentRequest.abort();
}

As I said, this does not work. But if I abort it right when setting up the ajax call then it works.

currentRequest=$.ajax({
    url: "/GetData",
    type: 'POST',
    data: {} ,
    contentType: 'application/json',
    dataType: 'json',
}).abort();

Note the .abort().

Is there something I am missing?

EDIT: I think I need to expand the problem a bit more. I don't have any problem with for instance a button that just alerts hello or a link that takes user to google.com. But let's say I click on a button that makes another ajax request, or try to submit the form, so anything that would send a request to the server, in this case it won't have any effect unless some time has elapsed.

EDIT 2 For testing purposes I created 2 functions:

currentXHR=null;

function startAjax(){
  var url="/StartAjax";
  currenXHR=$.get(url,{},function(){alert('Ajax launched');});
}

function cancelAjax(){
  currentXHR.abort();
}

And this is the server side method (it's C#, ASP.NET MVC):

    public void StartAjax()
    {
        System.Threading.Thread.Sleep(10000);
    }

I have two buttons named start and cancel. When I click start and wait for the response I get "Ajax launched" alert after 10 seconds. But if I click cancel right after starting the request I don't receive any alert in the end, but still I can't refresh the page unless 10 seconds has elapsed. As you can see, the ajax request is asynchronous(otherwise I wouldn't be able to click teh cancel button), so this problem is related to something else.

You can only abort the request before it's sent to the server, which means you generally have milliseconds to abort it. Once it's sent, there's no way to get it back or stop it, the best you can hope for is that the callback is never called, but the server will receive the call. — adeneo, May 25 '15 at 06:49
What do you say to this? http://stackoverflow.com/a/4551178/751796 — Mikayil Abdullayev, May 25 '15 at 07:06
Do I need to say anything, it says the same thing, the request can't really be aborted once it's sent. That shouldn't hang the UI though, so something else is going on in code you're not showing us — adeneo, May 25 '15 at 08:05
I don't mean to avoid the request to reach the server. That's not my goal. I am trying to stop waiting for the response to the sent request .I am able to interact with the ui elements, so the UI does not freeze, but they have no effect. I mean I click on browser reload button, the reload does not take place until the time that would be needed to receive response has elapsed. I've edited the question to give more detail. — Mikayil Abdullayev, May 25 '15 at 09:38
That shouldn't happen anyway, unless you've set the ajax request to be synchronous — adeneo, May 25 '15 at 11:00
I've added the result of my experiment. Please see the edit please. — Mikayil Abdullayev, May 26 '15 at 07:27
Sounds to me like your server is not accepting new requests while handling your previous request. — gpgekko, May 26 '15 at 08:15
Right now I'm working locally (IIS Express) But the same is true when I try connecting to remote IIS. Is there something I can configure? — Mikayil Abdullayev, May 26 '15 at 08:18

Mikayil Abdullayev · Accepted Answer · 2015-05-26T12:18:05.273

After lots of digging and searching I came to this conclusion that this is the expected behavior because although the AJAX Request itself is async, this doesn't mean that the server will also handle this request on a separate thread. So as long as the main thread is busy with processing the previous request it won't proceed to another one. So, when reload button is pressed, a new request is indeed sent to the server, but the response for the new request is returned only after it's done with the previous one. So to me, the best option would be to process ajax request on a separate thread. This has 2 advantages:

As the main thread is not blocked, response for a new request doesn't have to wait.
By using CancellationToken we can also notify the server to cancel processing the response for a certain request, which prevents waste of resources.

I think this article by Rick Anderson is a brilliant guide to do just that.

jqXHR.abort() not cancelling the request but causing the browser to be unresponsive

1 Answers1