bulletproof ajax:ajax 载入时显示动画

The simplest format for this kind of image is an animated GIF
file. The exact image can be anything you like, as long as it features
a smoothly looping animation. Rotating shapes, spinning
arrows, and barbershop-pole progress bars are all popular conventions
for indicating activity.
Here’s a short function called displayLoading. It takes a single argument,
which is an element in the document. This element is first emptied by removing
all of its child nodes. Then, a newly created img element is appended.

function displayLoading(element) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
var image = document.createElement("img");
image.setAttribute("src","loading.gif");
image.setAttribute("alt","Loading...");
element.appendChild(image);
}

Now I can update the contact details example to use this function. I want to
execute it at the same time that I’m starting the Ajax request in the grabFile
function:

function grabFile(file) {
var request = getHTTPObject();
if (request) {
displayLoading(document.getElementById("details"));
request.onreadystatechange = function() {
parseResponse(request);
};
request.open("GET", file, true);
request.send(null);
return true;
} else {
return false;
}
}

When a name is clicked, a GIF animation appears in the “details” div,which is where that person’s details will appear.

Once the Ajax call is successfully completed, the loading image is obliterated
by the use of innerHTML in the parseResponse function:

function parseResponse(request) {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var details = document.getElementById("details");
details.innerHTML = request.responseText;
}
}
}