What is the difference between synchronous and asynchronous ajax? Introduction to the difference between ajax synchronization and asynchronous

For ajax, we should know that ajax is mainly used to request data from the server backend in the front-end page. Ajax is divided into two execution methods: synchronous (async = false) and asynchronous (async = true) according to the value of async. , So, what is the difference between ajax's synchronous and asynchronous request methods? This article will give you a detailed analysis of the difference between ajax synchronization and asynchronous execution.

First of all, let’s take a look at What are ajax synchronous and asynchronous requests?

ajax asynchronous request:

Asynchronous request When the request is made, the browser can continue to do anything. Ajax sending the request will not affect the page The loading and user operations are equivalent to being on two lines, each going its own way without affecting each other. The general default value is true. Asynchronous requests do not affect the user experience at all. No matter how long or short the request is, the user is concentrating on operating other content on the page and does not feel like waiting.

For example:

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

Explanation: In the above code, when the ajax block sends a request, it will stay in function1() and wait for the return from the server, but at the same time (during this waiting process), The front desk will execute function2().

ajax synchronous request:

Synchronous request means that after the current request is issued, the browser cannot do anything and must wait. After the request completes and returns the data, the subsequent code will be executed, which is equivalent to queuing. That is to say, when the JS code is loaded into the current ajax, all codes in the page will stop loading, and the page will be in a state of suspended animation. When this ajax is executed After completion, it will continue to run other code pages to release the suspended animation state (that is, when ajax returns the data, the subsequent functions will be executed).

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

Explanation: In the above code, when asyn is set to false, the ajax request is synchronized. That is to say, after the ajax block sends the request at this time, He will wait at function1() and will not execute function2() until the function1() part is completed.

After reading the meaning of ajax synchronous and asynchronous requests, let’s take a look at the difference between ajax synchronous requests and asynchronous requests.

The difference between ajax synchronous request and asynchronous request:

In asynchronous mode:

When After we send the request using AJAX, there may still be code that needs to be executed. At this time, the server may not have responded to our request due to various reasons, but because we use asynchronous execution, the remaining code in all functions containing AJAX request code will continue to execute. If we hand over the request result to another JS function for processing, then it will be like two threads executing at the same time.

In synchronous mode:

After we use AJAX to send the request, there is still code that needs to be executed later. We also hand over the server response to another JS function to process, but the code execution situation at this time is: when the server does not respond or the JS function that processes the response result has not processed and completed the return, the remaining code of the function containing the request code cannot be executed. Just like a single thread, it enters the blocking state after the request is sent, and the remaining code will not continue to execute until it touches the blocking state.

The above is the entire content of this article. For more exciting content, you can follow the php Chinese website! ! !

The above is the detailed content of What is the difference between synchronous and asynchronous ajax? Introduction to the difference between ajax synchronization and asynchronous. For more information, please follow other related articles on the PHP Chinese website!