How To Make Ajax Request Async?

I want to make some ajax requests asynchronous . such as two Ajax, The first Ajax doesn't need to completed, the second request can take place, $.ajax({ url: 'urlone

Solution 1:

You've said you want to make the requests asynchronous; they are (and you don't need async: true, that's the default).

this show the second request can be trigged only after the first request return

No, it shows that the first one completed before the second, not that the second wasn't triggered until the first one completed.

If you're reliably seeing 2 1 3 in repeated tests, that tells you one of two things:

1. The first request is inherently faster to process than the second — but if you're holding up the processing of urlone for five seconds (and you've verified that), then it's not this

2. The server is serializing them

The server may be serializing them for any of several reasons; what those reasons are depends on the server-side technology and configuration you're using. For instance, some servers will serialize requests for dynamically-generated content that are in the same "session".

Solution 2:

Due to the nature of async and the code you posted, these requests you can never really guarantee that one will finish before the other (consider a real world example where req1 is waiting on a resource that req2 wants, it may block req2 from completing).

If your ultimate goal is to control the flow of execution then to gain some control over the flow, you could leverage the deferred (or promise based) nature of jQuery AJAX like so (jsFiddle http://jsfiddle.net/2qjha4m7/):

var req1 = $.ajax({
            url: "urlone",  
            type: "post",
           dataType: "json"
        });

 var req2 = $.ajax({
            url: "urltwo",
             type: "post", 
             dataType: "json"
});

$.when(req1, req2).done(function(resultFromReq1, resultFromReq2) {
    console.log("2");
    console.log("3");
    console.log("1");
});

This means that the "console.log" stuff will only run once both req1 & req2 have finished.

Or, if you just want to print 2, 3, get that out of the way and make sure you only print 1 after this work (you say "The first Ajax doesn't need to completed..." - Assign a resolution function to request1 inside of the resolution of request2 like so (http://jsfiddle.net/Lf5axetd/):

var req1 = $.ajax({
            url: "urlone",   
            type: "post",
           dataType: "json"
        });

 var req2 = $.ajax({
            url: "urltwo",
             type: "post", 
             dataType: "json"
});

req2.done(function(result) {
   console.log("2");
   console.log("3");
   req1.done(function(resultFromReq1) {
       alert("1"); 
   });
});

And, yes, like others have said this stuff is async by default, no need for async: true

Solution 3:

The function in complete part of your AJAX call is executed ONLY when the async operation is done.

You got 2 1 3 in your console because the order of completion of the AJAX calls was not what you expected. The first AJAX call was completed after console.log("2") was executed and after that the second AJAX call was completed.

Note that AJAX operations are async by default.

Readup: jQuery.ajax()

---

If you want the console to print 2 3 1, you should consider using promises.

Readup: jQuery promise()

Solution 4:

Your requests are async, btw they are async by default.

If you using node as your backend, the reason may be in falling asleep of the single node's thread. Second request can't be completed faster than first, because node waiting 5 seconds to response to the first and only after that node response to other one.