How can i stop ajax request (don't wait untill response come)?

Question

If I use Ajax to send request and this request take long time ..... if I want to send anther request what should I do?

the current behaviour the second request (I did) waiting until the first request get with response.

NOTE : i want to do this behaviour on whole application (any new request execute immediately not wait the old one to be finished firstly) My application using (Ajax + PHP + jQuery + Symfony)

Assume that is the first request take long time:

$.ajax
({
    type: "GET",
    url: url1,
    success: function (html)
    {
       // do some thing  
    }
});

In any time I want this request to execute and terminate the first one.

$.ajax
({
    type: "POST",
    url: url,
    success: function (html)
    {
       // do some thing else 
    }
});

---

var xhrReq;
xhrReq = $.ajax(...);

// then if you want to stop the rqest and exit use :

 xhrReq.abort();

Answer 1

It's sort of a manual process, but you can add a global xhr object and test it on each request. If the readystate is "loading", abort it:

var xhr;
var loadUrl = function(url) {
    if ( xhr && xhr.readyState > 0 && xhr.readyState < 4 ) {
        // there is a request in the pipe, abort
        xhr.abort();    
    }
    xhr = $.get(url, function() {
        console.log('success', this);
    });
};

loadUrl('/ajax/');

Answer 2

The XMLHttpRequest object has an abort function. You can use setTimeout to abort a request that is taking too long.

EDIT: In the case you do not want to use a timer, and a new event occurs that should abort the prior request, then the event handler should do the following

if(!this.request) return;  // request contains the XMLHttpRequest
this.request.onreadystatechange = function() {};
if(this.request.readyState != 4) {
    this.request.abort();
}

Then after that you can create the new XMLHttpRequest object.

Answer 3

I have been working on this many ways and I feel I found a working solution. I had a caching process that was causing a page to hang until done (average 5 seconds). Yes this is better suited as a CRON job, but I needed to create caching process for the user without knowing the environment they are using for my CMS. What I had done: Create the call within a variable and then remove it by a hard delete. By deleting this it seems to be removing the wait. This "hack" seemed to pull the wait from 5 second average to a 325ms wait.

var ignore = $.ajax({
    url:something/here.php,
    type: "GET",
    url: url1,
    success: function(){}
});
delete ignore;

Answer 4

Defining the ajax request variable:

var xhr;

Making the ajax call:

xhr = $.ajax(...);

Aborting the ajax call:

xhr.abort();

Answer 5

Browser allows you to handle only limited amount of requests to same host at time (2 or 3 as I remember, depending on browser).

Workaround on requests count is to make fake domains - like img1.domain.com, img2.domain.com, etc. leading to the same host and randomly use them in requests. Then you can just make requests you need. Domains count should be chosen depending on requests quantity in order to keep in bounds - 2 requests per domain. Otherwise 3rd request will wait until one of active finishes.

It allows you to receive responses from all your requests. For example, Google uses it to make images load faster.

EDIT:

Example: you have http://yourhost.com/ and alias http://alias.yourhost.com which points to the same place. Then:

$.ajax
({
    type: "GET",
    url: 'http://yourhost.com/somescript.php',
    success: function (html)
    {
       // do some thing  
    }
});

and then

$.ajax
({
    type: "POST",
    url: 'http://alias.yourhost.com/somescript2.php',
    success: function (html)
    {
       // do some thing else  
    }
});