Detailed Ajax Request (iv)--execution order of multiple asynchronous requests

First, ask a question: Click the page on the previous button to send two AJAX requests, one of the requests will not wait for another request to execute after the execution?

The answer is: No, both asynchronous requests are sent at the same time, as for the fast and slow execution, the size of the response data and the complexity of the background logic.

　　From the principle of how asynchronous requests are executed, we know that when an asynchronous request is sent, the browser is not in a locked, waiting state, and the browser can do other things from an asynchronous request to the time it gets the result of the response. This means that multiple asynchronous requests are executed in parallel.

Let's take a look at the problem from an example.

Requirements: AJAX1 the data from the background request drop-down list, ajax2 the data from the background request drop-down list to select an item.

<type= "button"  value= "Test button"  onclick= "Sentajax ( );" />< BR > <  ID= "selectclassify"  style= "width:100px;" > </ Select >

JS Code:

<script type= "Text/javascript" >functionSentajax () {Ajax1 ();Ajax2 ();}functionAjax1 (Urlparam) {$.ajax ({cache:false, URL:"<%=basepath%>/manager/test/ajax1", Success:function(Result) {alert ("Ajax1"); $("#selectClassify"). HTML (""); varhtml = ""; varSelectjson =result.downlist; $.each (Selectjson,function(I, item) {HTML= html+ "<option value=" + Item + ">" + Item + "</option>";                }); $("#selectClassify"). append (HTML);           }      }); } functionAjax2 () {$.ajax ({cache:false, URL:"<%=basepath%>/manager/test/ajax2", Success:function(Result) {alert ("Ajax2"); $("#selectClassify"). Val (Result.kind); }      }); }</script>

Java code:

@Controller @requestmapping ("/manager/test") Public classTestajax {@ResponseBody @RequestMapping ("/ajax1")     PublicMap<string,string[]>ajax1 () {Map<string,string[]> Jsonmap =NewHashmap<string, string[]>(); String[] Downlist=Newstring[2000];        //Here in order to illustrate that AJAX2 will not wait for ajax1 to execute after execution, so that ajax1 response to a large amount of data.  for(inti = 0;i < 2000;i++) {Downlist[i]= "<---" + (i+1) + "--->"; } jsonmap.put ("Downlist", downlist); returnJsonmap; } @ResponseBody @RequestMapping ("/ajax2")     PublicMap<string,string>ajax2 () {Map<string,string> Jsonmap =NewHashmap<string, string>(); Jsonmap.put ("Kind", "<---7--->"); returnJsonmap; }}

Click the Test button we find that alert ("Ajax2") pops up before alert ("Ajax1"), stating that AJAX2 does not wait for AJAX1, that asynchronous requests are parallel, that the execution is fast and slow, that the size of the data to be responded to and the complexity of the background logic. And there is a phenomenon: the last drop-down box shows the

　　

AJAX2 requested drop-down list to select the data of an item is not displayed, this means that ajax2 to the page operation faster than AJAX1, this time ajax1 to the page operation has not started, so the AJAX2 on the page operation has no effect.

　　It is not difficult to solve this problem, there are two kinds of solutions available:

(1) The execution of the AJAX2 () method is put to the last line of the success callback function of Ajax1 ().

(2) In the asynchronous request method of Ajax1 (), add a callback function: COMPLETE:AJAX2

　　

(3) Of course there are many solutions to this problem, such as the drop-down list is drawn in a synchronous way, and the echo of the data is asynchronous, or an asynchronous request returns all the data, and then the data is presented in a logical order, which is no longer covered in this article.

Reference article: http://www.w3school.com.cn/jquery/ajax_ajax.asp

To conclude, we, as programmers, are going to go into a little bit of a thorough study of the problem. When you have a thorough understanding of the principle, development is also handy, a lot of development problems and doubts will be solved, and in the face of other problems can also be done comprehend by analogy. Of course, in the development of not too much time to let you study the principle of development in order to achieve the premise of the function, you can wait for the project on-line, you have a lot of time or spare time, you can go to the inquisitive, in-depth study of a technology, in order to think this is a programmer's growth is very important thing.

Detailed Ajax Request (iv)--execution order of multiple asynchronous requests