关于readystate==1状态下的ajax效果不能显示的问题的解决

　　最近想学一门新手艺，一直听说php学习快，开发也快，所以就马上找来教学视频来看，php100上的，别说学起来势必java快很多啊，好了，闲话不说，进入正题。

　　今天在学习php和ajax结合运用的时候遇到了一个问题，现在我需要实现一个进度条的效果，就是在使用ajax异步刷新的时候如果等待时间长就出现一个等待的图片告知用户，主要的实现原理就是利用readystate的5中取值来实现，大家都知道readystate表示XMLHTTP请求的当前状态；

0 （未初始化）	对象已建立，但是尚未初始化（尚未调用open方法）
1 （初始化）	对象已建立，尚未调用send方法
2 （发送数据）	send方法已调用，但是当前的状态及http头未知
3 （数据传送中）	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 （完成）	数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据

可以利用readystate==1尚未调用send方法时的状态，在此时刻插入等待的图片，当readystate==4时，返回结果显示。但是在实际情况中却并不如意，我使用Chrome和Firefox都无法获取readystate==1的状态，从输出的情况看只有2，3，4的状态，以下是代码：

var xmlHttp;
//获取XmlHttpRequest对象
function $_xmlhttprequest() {
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xmlHttp = new XMLHttpRequest();
    }
}

//创建ajax异步方法
function getAjax(url) {
    $_xmlhttprequest();
    xmlHttp.open("POST", "for.php?id="+url, true);
    xmlHttp.onreadystatechange = callback;    
    xmlHttp.send(null);
}

//回调方法
function callback() {
        if(xmlHttp.readyState == 1) {
            document.getElementById("dxc").innerHTML = "<img src=images/loading.gif>";
        }
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            var request = xmlHttp.responseText;
            document.getElementById("dxc").innerHTML = request;
        }
    }
}

　　在callback方法中的第一个条件判断是无法被执行的，我在网上找了很多方法都不好使，例如将条件改成"xmlHttp.readystate!=4"，后来我终于找到一个可以解决问题的方法就是在getAjax方法中“xmlHttp.send()”之后加上readyState==1条件时的操作，即：

function getAjax(url) {
    $_xmlhttprequest();
    xmlHttp.open("POST", "for.php?id="+url, true);
    xmlHttp.onreadystatechange = callback;    
    xmlHttp.send(null);
    document.getElementById("dxc").innerHTML = "<img src=images/loading.gif>";
}

如此就可以捕获到readystate==1的状态了。

以下是我这个小例子的全部代码，来源于php100的教学视频

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax进度条</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
    <a href="#" onclick="getAjax('o')">o</a>
    <a href="#" onclick="getAjax('t')">t</a>
    <a href="#" onclick="getAjax('y')">y</a>
    <div id="dxc">
        </div>
</body>
</html>

for.php

<?php
    $id = $_GET[id];
    for($i=0;$i<3;$i++) {
        echo $i."发"."$id<br />";
        //调用sleep()函数，睡眠1秒,营造等待效果
        sleep(1);
    }
?>

ajax.js

var xmlHttp;
function $_xmlhttprequest() {
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xmlHttp = new XMLHttpRequest();
    }
}

function getAjax(url) {
    $_xmlhttprequest();
    xmlHttp.open("POST", "for.php?id="+url, true);
    xmlHttp.onreadystatechange = callback;    
    xmlHttp.send(null);
    document.getElementById("dxc").innerHTML = "<img src=images/loading.gif>";
}

function callback() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            var request = xmlHttp.responseText;
            document.getElementById("dxc").innerHTML = request;
        }
    }
}

ps:请自行在项目目录下添加images文件夹，其中添加loading.gif文件

posted @ 2014-08-25 13:11 码贼阅读(818) 评论(0) 收藏举报

码贼

关于readystate==1状态下的ajax效果不能显示的问题的解决

公告