AJAX实现loading….效果

绿色通道文件都是走批，一个文件走完流程后，再查询，速度真是慢，要分别从5个表查，并且需要设置关联查询，因此在提交数据后，我希望查询这部分可以用AJAX实现，当数据未返回时，DIV里显示一个加载GIF，等数据返回后再显示提交的数据。而重复查询时也不会再提交数据和刷新,节省了很多资源.

 

   虽然我会用DWR框架，但是我却不会用DWR实现这个功能，因为一直没弄清楚DWR是怎么封装XMLHTTP的，因此还是直接用XMLHTTP的请求状态来做比较直观。

 

[code]

<script type="text/javascript">

var xmlHttp;

 

//创建一个xmlHttpRequest对象

function createXMLHttpRequest() {

    if (window.ActiveXObject) {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else if (window.XMLHttpRequest) {

        xmlHttp = new XMLHttpRequest();

    }

}

 

function handleStateChange(){

       var img = "<img src='/images/green/loading.gif' style='margin-top:130px; margin-left:250px'>";

    if(xmlHttp.readystate == 4){   //表示请求状态 4为完成

           if(xmlHttp.status == 200){ //http状态指示码，200表示ok

                     //将服务器返回信息作为文本插入到DIV容器中。

               document.getElementById("data").innerHTML = xmlHttp.responseText;

          }

    }

else document.getElementById("data").innerHTML = img;

//若响应未完成的话，则显示loading..

}

 

       function showData(entityName){

         var url = "/greengate.action?doing=listResult&entity_name="+entityName;

      createXMLHttpRequest();

         //请求状态改变事件触发handleStateChange功能

      xmlHttp.onreadystatechange = handleStateChange;

        xmlHttp.open("GET",url);

      xmlHttp.send(null);   

       }

</script>