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

?>