Ajax+PHP打造等待进度条效果

Posted 2021-04-15 巴巴塔分享站

方法XHR.readyState五种状态

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

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

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

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

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

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

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

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

200 — 成功

201 — 提示知道新文件的URL

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

301 — 删除请求数据

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

500 — 服务器产生内部错误

实例操作

先看效果图：

index.php：

<script type="text/javascript" src="ajax.js"></script>
<a href="#" onclick="funphp('o')">o</a>&nbsp;&nbsp;&nbsp;
<a href="#" onclick="funphp('t')">t</a>&nbsp;&nbsp;&nbsp;
<a href="#" onclick="funphp('x')">x</a>&nbsp;&nbsp;&nbsp;
<br>
<div id="php"></div>

ajax.js：

var xmlHttp;
function S_xmlhttprequest() {
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
    }else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
}

function funphp(url) {
    S_xmlhttprequest();
    xmlHttp.open("GET","for.php?id="+url,true);
    xmlHttp.onreadystatechange=byphp;
    xmlHttp.send(null);
}

function byphp() {
    if(xmlHttp.readyState==1){
        document.getElementById('php').innerhtml="<img src=loading.gif>";
    }
    if(xmlHttp.readyState==4){
        if(xmlHttp.Status==200){
            var byphp=xmlHttp.responseText;
            document.getElementById('php').innerHTML=byphp;
        }
    }

}

for.php：

<?php
$id=$_GET['id'];
for ($i=0;$i<3;$i++){
    echo $i."$id<br>";
    sleep(1);
    //由于执行时间非常快，所以使用睡眠函数看效果
}