Ajax+PHP--进度条的打造

前端之家收集整理的这篇文章主要介绍了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;  
			}
		}
    } 

猜你在找的Ajax相关文章