"Ajax等待数据返回时loading的显示":
有时候ajax处理的数据量比较大的时候,用户等待时间会比较长,如果这个时候不提示用户等待的话,用户可以会觉得很不耐烦。这里介绍一下如何在ajax如何在处理数据时显示loading。
首先在html页面添加一个div层:
这个div一开始是不显示的。
然后你可以在ajax请求函数中添加如下代码:
xmlreq.onreadystatechange = function()
{
var sliderblank = document.getelementbyid("sidebar");
// 让需要显示结果的层显示空白
sliderblank.innerhtml = " ";
// 获得loading显示层
var loadingdiv = document.getelementbyid("loading");
// 插入loading图
loadingdiv.innerhtml = "";
// 显示loading层
loadingdiv.style.display = "";
if(xmlreq.readystate == 4)
{
// 数据处理完毕之后,将loading层再隐藏掉
loadingdiv.style.display = "none";
//alert(xmlreq.responsetext);
//document.getelementbyid(‘content2‘).innerhtml = xmlreq.responsetext;
// 输出处理结果
runxml(xmlreq.responsetext);
}
}
就是如此简单!
下面再附另一段参考代码:
xmlhttp.onreadystatechange = function(){
//displace loading status
var loadingdiv = document.getelementbyid("loading"); // get the div
loadingdiv.innerhtml = "loading..."; // insert tip information
loadingdiv.style.right = "0"; // set position, the distance to the right border of current document is 0px
loadingdiv.style.top = "0"; // set position, the distance to the top border of current document is 0px
loadingdiv.style.display = ""; // display the div
//load completed
if(xmlhttp.readystate == 4) {
//hide loading status
loadingdiv.style.display = "none"; // after completed, hidden the div again
loadingdiv.innerhtml = ""; // empty the tip information
//process response
if(xmlhttp.status == 200) {
var str = xmlhttp.responsetext;
/* do something here ! */
}
else
alert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);
}
}
转载:http://www.nowamagic.net/librarys/veda/detail/564