Home > Web Front-end > JS Tutorial > body text

Detailed explanation of ajax synchronization and asynchronousness in jquery

亚连
Release: 2018-05-25 09:55:33
Original
2123 people have browsed it

jquery ajax synchronization means 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. The suspended state will be lifted. . Asynchronous means that other codes can run while this ajax code is running. This article will give you a detailed explanation. Interested friends can refer to

. When I have been writing JQUERY code before, I need to consider the code running order when encountering AJAX loading data. Recent projects have used AJAX synchronization. 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 go out of suspended animation state. When the AJAX is completed, it will continue to run other codes and the page suspended animation state will be lifted.

Asynchronously, other codes can run while this AJAX code is running.

jquery's async:false, this attribute

The default is true: asynchronous, false: synchronous.

$.ajax({ 
    type: "post", 
    url: "path", 
    cache:false, 
    async:false, 
    dataType: ($.browser.msie) ? "text" : "xml", 
     success: function(xmlobj){ 
    } 
});
Copy after login

Having this attribute can relatively reduce the problem of code running book order, but if it is used too much, the page will freeze too many times. This will lead to poor user experience~!

$.The official explanation of async and success in Ajax():

async 
Boolean 
Default: true
By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
success 
Function
A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.
Copy after login

Here, the default setting value of async is true, This situation is asynchronous, which means that after Ajax sends a request, while waiting for the server to return, the front desk will continue to execute the script behind the Ajax block. Success will not be executed until the server returns the correct result, that is, It is said that two threads are executed at this time, one thread after the ajax block sends the request and the script (another thread) after the ajax block. Example:

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

function2();

In the above example, 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 Function2() will be executed, that is to say, two threads will appear at this time, let's call them function1() and function2() here.

When asyn is set to false, the ajax request is synchronous. 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 executed.

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

Related articles:

Jquery specific examples introduce when to use AJAX and where AJAX should be used

jquery and PHP combines to implement AJAX long polling

##Initially understand JavaScript, Ajax, jQuery, and compare the relationship between the three

The above is the detailed content of Detailed explanation of ajax synchronization and asynchronousness in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template