Ajax实现页面loading效果!

//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";

?>