【转】收藏一些ajax loading图

转自：http://hi.baidu.com/pao8041/blog/item/97e1565450bc0a56574e00f0.html

 

 

地址一：http://www.napyfab.com/ajax-indicators/

地址二：http://mentalized.net/activity-indicators/

[ajax]loading...代码
<script>
function xxx(){
document.body.innerHTML=div1.innerHTML;
}
</script>
<form name="form1" action="http://www.sohu.com"onsubmit="returnxxx()">
<input type="submit" name="submit" value="提交">
</form>
<div id="div1" style="display:none;">
<p> </p><p> </p><p> </p><p align=center>请稍候……</p>
</div>

Demo2
//request.html
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() { //创建一个xmlHttpRequest对象
     if (window.ActiveXObject) {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if (window.XMLHttpRequest) {
         xmlHttp = new XMLHttpRequest();
     }
}

function dealAct(){
     var url = "requestPage.php"; //请求页面url
     createXMLHttpRequest();
     xmlHttp.onreadystatechange = handleStateChange; //请求状态改变事件触发handleStateChange功能
     xmlHttp.open("GET",url); //采用get方法提交数据
     xmlHttp.send(null);    
}

function handleStateChange(){
     if(xmlHttp.readystate == 4){     //表示请求状态 4为完成
             if(xmlHttp.status == 200){ //http状态指示码，200表示ok
                          document.getElementById(infoId).innerHTML = xmlHttp.responseText; //将服务器返回信息作为文本插入到infoId指示的容器中。
                 }
         }
         else document.getElementById(infoId).innerHTML = "loading..."; //若响应未完成的话，则显示loading..也就是搂主你要的效果了
}
</script>
<span id=infoId>[若程序被触发，将会在此容器内显示loading...]</span>

//requestPage.php
<?php
     sleep(10); //让程序暂停10s,以便于更好的观察loading效果。
    echo "cilentRequest recived";
?>