SoFunction
Updated on 2024-07-16

ajax async property value of synchronous and asynchronous and synchronous and asynchronous difference

jquery in the ajax method has an attribute async used to control synchronous and asynchronous, the default is true, that is, ajax requests are asynchronous requests by default, sometimes the project will be used in the AJAX synchronization. The meaning of this synchronization is that when the JS code is loaded into the current AJAX page will stop loading all the code, the page appears to be a fake dead state, when the AJAX execution is complete before continuing to run other code page fake dead state is lifted. Asynchronous AJAX code is running when the other code can run.

The property async in ajax is used to control the way of requesting data. The default is true, which means that data is requested in an asynchronous way by default.

I. async value is true (asynchronous)

When ajax sends a request, in the process of waiting for the server side to return, the foreground will continue to execute the script behind the ajax block, until the server side returns the correct result to execute the success, that is to say, at this time the execution of the two threads, the ajax block sends out the request after a thread and the script behind the ajax block (another thread)

for example

$.ajax({  
     type:"POST", 
     url:"?act=init", 
      dataType:"html", 
     success:function(result){  //function1()
       f1(); 
       f2();  
    } 
     failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();

In the above example, when the ajax block makes a request, he will stay at function1() and wait for the server side to return, but at the same time (during this wait), the frontend will go and execute function2().

II. async value is false (synchronization)

When the execution of the current AJAX will stop the execution of the next JS code , until the AJAX execution is complete , you can continue to execute the next JS code .

for example

$.ajax({  
     type:"POST", 
     url:"?act=init", 
     dataType:"html", 
     async: false,
    success:function(result){  //function1()
       f1(); 
       f2(); 
     } 
    failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2(); 

When asyn is set to false, the ajax request is synchronized, i.e., when the ajax block sends out the request, it will wait for function1() and won't execute function2() until the function1() part is executed.

Difference between Ajax synchronous and asynchronous

var returnValue = null; 
xmlhttp = createXmlHttp(); 
 = function() { 
  if( == 4 &&  == 200) { 
    if ( == "true") { 
      returnValue = "true"; 
    } 
    else { 
      returnValue = "false"; 
    } 
  } 
}; 
("Post",url,true); //Asynchronous transfer
("If-Modified-Since","0"); //No Ajax caching
(sendStr); 
return returnValue;

You can only use state values when you are asynchronous! Here are the different ways to call asynchronous and synchronous:

Java

("GET",url,true);//Asynchronous
   = showResult; //showResult is the name of the callback function.
  (null);
function showResult(){  
  if( == 4){   
   if( == 200){
   ******
   }
  }
}

Java

("GET",url,false);//Synchronization method
      (null);  
      showResult(); //showResult is the name of a callback function but the usage is different.
function showResult(){   
       //if( == 4){ Don't bother here, just dosomething.
        //if( == 200){  
          ******//dosomething  
        //}  
      //}  
}
("Post",url,true);

If it is synchronized (false), the return value is true or false, because after the execution of send, the execution of onreadystatechange begins, the program will wait until the onreadystatechange are executed, get the responseText before continuing to execute the next statement, so returnValue must have a value.

If it is asynchronous (true), the return value must be null, because the program does not wait for the response of xmlhttp after the execution of send, but continues to execute the next statement, so the returnValue has not come to change before it has returned null.

All if you want to get the xmlhttp return value you must use synchronous, asynchronous can not get the return value.

synchronous asynchronous use of the xmlhttp pool should be noted: to obtain xmlhttp can only be a new xmlhttp, can not be used from the pool out of the xmlhttp already used xmlhttp, because the used xmlhttp's alreadyState is 4, so synchronous asynchronous will be sent but do not execute the onreadystatechange.