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

来源：互联网发布：淘宝运险费是什么意思编辑：程序博客网时间：2024/05/27 14:14

最近想学一门新手艺，一直听说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文件

0 0