JQuery Ajax Asynchronous load display wait effect code sharing _jquery

AJAX Full name Asynchronous JavaScript and XML (asynchronous JavaScript and XML). It is not a new technology, but a combination of the following kinds of original technologies.

1 use CSS and XHTML for presentation.

2 Use the DOM model for interactive and dynamic display.

3 use XMLHttpRequest to communicate with the server asynchronously.

4 use JavaScript to bind and invoke.

With Ajax asynchronous technology, you can use the XMLHttpRequest object to complete the HTTP request/Answer (RESPONSE) model when client-side scripting interacts with the Web server:

1 does not require the user to wait for service-side response. Control is immediately returned to the browser after the XMLHttpRequest request is distributed asynchronously. The interface does not appear on the whiteboard, and can be friendly to give a load hint before the server responds.

2 does not need to reload the entire page. Registers a callback function for the XMLHttpRequest that triggers the callback function when the server response arrives, and passes the required small amount of data. "On-demand data" also lowers the pressure on the server.

3 do not need to use hidden or embedded frames. Before XHR objects, analog AJAX communications typically use hack means, such as using hidden or embedded frames (<iframe> tags).

Css:

#loading {
width:170px;
height:25px;
border:3px solid #C3DAF9;
Position:absolute;
top:300px;
left:600px; 
z-index:10000; 
Background-color: #F7F9FC;
line-height:25px;
Vertical-align:middle;
font-size:11pt;
Display:none;
}

Html:

<div id= "Loading" > is loading data, please wait ...</div>

Js:

$.ajax ({
async:true,
beforesend:function () {
showdiv ();
},
complete:function () {
Hiddendiv ();
},
type: ' POST ',
url: ',
data: {
},
success:function (data) {
// var obj = json.parse (data);
var str = json.stringify (obj);
}
});
Displays the load data
function Showdiv () {
$ ("#loading"). Show ()
;
Hide Load Data
function Hiddendiv () {
$ ("#loading"). Hide ();

The picture effect diagram looks like this:

The above is a small series to introduce the jquery Ajax asynchronous loading display waiting for the effect of the code to share, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!