The difference between synchronization and asynchronous and synchronization and asynchronousness of async attribute value in ajax

Async is used to control synchronization and asynchronousness in the ajax method in Jquery. When the async value is true, it is an asynchronous request, and when the async value is false, it is a synchronous request. The async attribute in ajax is used to control the way data is requested. The default is true, which means that data is requested asynchronously by default.

The ajax method in jquery has an attribute async for controlling synchronization and asynchronousness. The default is true, that is, the ajax request is an asynchronous request by default. Sometimes AJAX synchronization is used in projects. What this synchronization means is that when the JS code is loaded into the current AJAX, all the code in the page will stop loading, and the page will appear in a state of suspended animation. When the AJAX is completed, it will continue to run other codes and the page's suspended state will be lifted. Asynchronously, other codes can run while this AJAX code is running.

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

1. The async value is true (asynchronous)

When ajax sends a request, while waiting for the server to return, the foreground will continue to execute the ajax block. The script will not execute success until the server returns the correct result. That is to say, two threads are executed at this time, one thread after the ajax block sends the request and the script after the ajax block (another thread)

For example

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?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, it will stay in function1() and wait for the return from the server side, but At the same time (during this waiting process), the front desk will execute function2().

2. The async value is false (synchronous)

When the current AJAX is executed, the subsequent JS code will stop executing until the AJAX is completed. , to continue executing the following JS code.

For example

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?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, and That is to say, after the ajax block sends a request at this time, it will wait at function1() and will not execute function2() until the function1() part is completed.

The difference between Ajax synchronization and asynchronous

var returnValue = null; 
xmlhttp = createXmlHttp(); 
xmlhttp.onreadystatechange = function() { 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    if (xmlhttp.responseText == "true") { 
      returnValue = "true"; 
    } 
    else { 
      returnValue = "false"; 
    } 
  } 
}; 
xmlhttp.open("Post",url,true); //异步传输 
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajax
xmlhttp.send(sendStr); 
return returnValue;

xmlHttpReq can only be used asynchronously .onreadystatechange status value! The following are the different calling methods of asynchronous and synchronous:

Java

xmlHttpReq.open("GET",url,true);//异步方式
  xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
  xmlHttpReq.send(null);
function showResult(){  
  if(xmlHttpReq.readyState == 4){   
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}

Java

xmlHttpReq.open("GET",url,false);//同步方式  
      xmlHttpReq.send(null);  
      showResult(); //showResult虽然是回调函数名但是具体用法不一样~  
function showResult(){   
       //if(xmlHttpReq.readyState == 4){  这里就不用了，直接dosomething吧~  
        //if(xmlHttpReq.status == 200){  
          ******//dosomething  
        //}  
      //}  
}
xmlhttp.open("Post",url,true);

If it is synchronous (false), the return value is true or false, because after executing send, onreadystatechange starts to be executed, and the program will wait until onreadystatechange is completed. The next statement will not be executed until responseText is obtained, 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 executing send, and continues to execute the next statement, so the returnValue has returned null before it has changed. .

If you want to get the xmlhttp return value, you must use synchronization. The return value cannot be obtained asynchronously.

Be careful when using the xmlhttp pool synchronously and asynchronously: when obtaining xmlhttp, you can only create a new xmlhttp, and you cannot take out the used xmlhttp from the pool, because the readyState of the used xmlhttp is 4, so Both synchronous and asynchronous will send but do not execute onreadystatechange.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Understanding the datatype attribute option value in jquery ajax

Realize N seconds interval based on Jquery ajax technology Passing values ​​to a page

Solve the forward and backward problems of ajax based on Jquery.history

The above is the detailed content of The difference between synchronization and asynchronous and synchronization and asynchronousness of async attribute value in ajax. For more information, please follow other related articles on the PHP Chinese website!