Ajax+PHP--进度条的打造

知识准备：


方法XHR.readyState五种状态

XHR.readyState == 状态（0，1，2，3，4）

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。


方法XHR.status常见的几种状态

XHR.status == 200，300，404 等

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——成功

201——提示知道新文件的URL

300——请求的资源可在多处得到

301——删除请求数据

404——没有发现文件、查询或URl

500——服务器产生内部错误


制作进度条的原理：

通过XHR.readyState ==1，来判断是否出现进度条；通过XHR.readyState ==4和XHR.status ==200来判断是否服务器已经成功的完成响应。


实例代码：

（代码根据上一个例子进行部分修改，可以参考：Ajax+PHP快速上手及简单应用）

index.html

<!--index.html-->
<body>
    <script src="test.js" type="text/javascript"></script>  
    <a href="#" onClick="php100(1)">1</a> ||  
    <a href="#" onClick="php100(2)">2</a> ||  
    <a href="#" onClick="php100(3)">3</a>  
      
    <div id="php100"></div>  
</body>

do.php

  // do.php
    <?PHP  
    $id=@$_GET[id];  
    for($i=1;$i<3;$i++){  
        echo $i."------".$id."<br/>";
		sleep(1);  //为了使响应时间不至于过快，使用sleep函数模拟响应时间
    }

test.js

// JavaScript Document
    var xmlHttp;  
    function S_xmlhttprequest(){  
        if(window.ActiveXObject){  
            xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');  
        }else if(window.XMLHttpRequest){  
            xmlHttp=new XMLHttpRequest();  
        }  
    }  
    function php100(url){  
        S_xmlhttprequest();  
        xmlHttp.open("GET","do.php?id="+url,true);  
        xmlHttp.onreadystatechange=byphp;  
        xmlHttp.send(null);  
    }  
    function byphp(){  
	    if(xmlHttp.readyState==1){
			document.getElementById('php100').innerHTML="<image src=\"1.gif\">";//等待响应显示进度条
		}
		if(xmlHttp.readyState==4){//响应完成
                     if(xmlHttp.Status==200) {//响应成功
                         var byphp100=xmlHttp.responseText;  
                         document.getElementById('php100').innerHTML=byphp100;  
			}
		}
    }


posted @ 2013-06-12 00:20  千手宇智波  阅读(252)  评论(0)    收藏  举报