how to make ajax request async?

Question

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",
 async: true, 
 complete: function () {
 console.log("1");
 }, 
 type: "post",
 dataType: "json"
 });
 console.log("2");
 $.ajax({
 url: "urltwo",
 async: true,
 complete: function () {
 console.log("3");
 },
 type: "post", 
 dataType: "json"
});

in the urlone background,I make the thread sleep 5 seconds, and in the urltwo background I return the json Immediately.

I write this, but no effect, I want the console print 2 3 1

but,actually,it print 2 1 3

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

How to solve this problem??

Added in February 6th:Thanks for your enthusiasm answer. My server side is C# and in urlone I wrote

JsonModel xx=new JsonModel(){.......}; //as you known
System.Threading.Thread.Sleep(5000);
return Json(xx);

in urltwo I wrote

JsonModel xx=new JsonModel(){.......}; //as you known
return Json(xx);

that's it!

I want this because I performed a very time-consuming operation in urlone, when I back from urlone,The front has lost response,Even if I set up a very large ajax waiting time。So I want to query whether the opration in urlone is completed by request urltwo,the urltwo is designed for query database complete field flag for the operation in urlone. This is my idea.

But today, I found a new problem。 when I sleep background thread a long time,then back json data to front,front can response and done some js function,but when I perform a very time-consuming operation in urlone background,when it return to front,the front is no response. there must be some problem I have not realized, so

• Rakesh_Kumar: By default, all ajax requests are sent async only...
• Kirill Pisarev: as an assumption: do you yse node js and make it's single thread sleep?
• Rakesh_Kumar: You may want to check this.. jsfiddle.net/v6u0wtpj
• 4ega: You can see in Chrome dev tools (network), are this two request async, or sync. I think that your solution with 5 sec dose not work)
• T.J. Crowder: It would improve this question dramatically if you said what server-side technology you're using and showed the relevant code processing the two URLs.

Answer 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".

Answer 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

Answer 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()

• iCollect.it Ltd: Noooooo! Never suggest async: false as a solution! Use promises instead.
• 4ega: "but,actually,it print 2 1 3" not 231 !
• Rahul Desai: @TrueBlueAussie Thanks. I think thats a better idea. Answer updated. :)
• Rahul Desai: @4ega Woops! Misread that part. Thanks for pointing out. Answer updated! :)

Answer 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.