Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

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",
 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

Answer*

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

Draft saved

Draft discarded

Edit Summary*

Cancel

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

how to make ajax request async?

Answer*