Display of loading when Ajax waits for data to return

Sometimes, when the amount of data processed by Ajax is large, the user waits for a long time. If the user is not prompted to wait at this time, the user may feel impatient. This section describes how to display loading when processing data in Ajax.

First, add a div layer on the HTML page:

<div id="loading" style="color:#ffffff; display:none; position:absolute; top:80px; left:3em;"></div> 

This div is not displayed at the beginning.

Then you can add the following code to the Ajax request function:

XmlReq. onreadystatechange = function () {var sliderBlank = document. getElementById ("sidebar"); // display the blank sliderBlank at the layer to display the result. innerHTML = ""; // obtain the loading display layer var loadingDiv = document. getElementById ("loading"); // Insert the loading graph loadingDiv. innerHTML = " 
That's easy!
 
A reference code is provided below:
 
xmlHttp.onreadystatechange = function(){//displace loading statusvar loadingDiv = document.getElementById("loading"); // get the divloadingDiv.innerHTML = "loading..."; // insert tip informationloadingDiv.style.right = "0"; // set position, the distance to the right border of current document is 0pxloadingDiv.style.top = "0"; // set position, the distance to the top border of current document is 0pxloadingDiv.style.display = ""; // display the div//load completedif(xmlHttp.readyState == 4) {//hide loading statusloadingDiv.style.display = "none"; // after completed, hidden the div againloadingDiv.innerHTML = ""; // empty the tip information//process responseif(xmlHttp.status == 200) {var str = xmlHttp.responseText;/* do something here ! */}elsealert("Error!" + "nStatus code is: " + xmlHttp.status + "nStatus text is: " + xmlHttp.statusText);}}