Understanding and examples of ajax synchronization and Asynchronization in jquery

Source: Internet
Author: User

Before writing JQUERY code, you must consider the code running sequence when loading data through AJAX. Recently, AJAX synchronization is used. This synchronization means that when the JS Code is loaded to the current AJAX, it will stop loading all the code on the page, and the page will go out in a suspended state, after AJAX is executed, other code pages will continue to be run and the suspended state will be removed.
Asynchronous mode can run the same as other codes when the AJAX code is running.
Jquery's async: false, this attribute
The default value is true: asynchronous, and false: synchronous.
Copy codeThe Code is as follows:
$. Ajax ({

Type: "post ",

Url: "path ",

Cache: false,

Async: false,

DataType: ($. browser. msie )? "Text": "xml ",

Success: function (xmlobj ){

}

});

With this attribute, You can relatively reduce the code running order, but if you use too much, the page will be suspended too many times. This leads to poor user experience ~!

$. Ajax () official explanations of async and success:

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 'ype ype 'parameter, and a string describing the status. this is an Ajax Event.

Here, the default value of async is true, which is asynchronous, that is, when ajax sends a request, it is waiting for the server to return this process, the foreground will continue to execute the script after the ajax block until the server returns the correct result to execute success. That is to say, two threads are executed at this time, example of the following code:
Copy codeThe Code is as follows:
$. 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 sends a request, it will stop at function1 (), waiting for the server to return, but at the same time (in this waiting process ), the front-end will execute function2 (). That is to say, there are two threads at this time. Here we are talking about function1 () and function2 ().

When asyn is set to false, ajax requests are synchronized. That is to say, after the ajax block sends a request, it will wait at function1, function2 () is not executed, and function1 () is completed.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.