www.baike369.com
百科369 > Ajax教程 > XMLHttpRequest(XHR)对象回访readyState

XMLHttpRequest(XHR)对象回访readyState


XMLHttpRequest(XHR)对象回访readyState

readyState属性是用于查询XHR的请求状态的。要测试readyState的值是非常简单的,在每次readyState的值改变时,都将调用回调函数,从而再次改变这个值的状态。在下面的代码中,当请求执行时,readyState属性的值显示在一个警告对话框中:

var url = "http://www.baike369.com/code.php";
var readyStateOutput = document.getElementById("readyStateOutput");
readyStateOutput.style.display = "";
var xhr = createXHR();
if (xhr)
{
  readyStateOutput.innerHTML ="Before Open: readyState: " + xhr.readyState + "<br/>";
  xhr.open("GET",url,true);
  readyStateOutput.innerHTML += "After Open/Before Send: readyState: " + xhr.readyState + "<br/>";
  xhr.onreadystatechange = function(){handleResponse(xhr);};
  xhr.send(null);
}

这个警告非常有用,因为它阻止了请求的进行,这样我们就可以近距离地观察到该进程了。


实例

本例以实时方式观察请求的进度。

1. test.html文档的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XMLHttpRequest(XHR)对象回访readyState-www.baike369.com</title>
<script type="text/javascript"> 
function createXHR()
{
  try { return new XMLHttpRequest(); } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  return null;
}
function sendRequest()
{
  var url = "http://www.baike369.com/code.php";
  var readyStateOutput = document.getElementById("readyStateOutput");
  readyStateOutput.style.display = "";
  var xhr = createXHR();
  if (xhr)
  {
    readyStateOutput.innerHTML ="Before Open: readyState: " + xhr.readyState + "<br/>";
    xhr.open("GET",url,true);
    readyStateOutput.innerHTML += "After Open/Before Send: readyState: " + xhr.readyState + "<br/>";
    xhr.onreadystatechange = function(){handleResponse(xhr);};
    xhr.send(null);
  }
}
function handleResponse(xhr)
{
  var readyStateOutput = document.getElementById("readyStateOutput");
  readyStateOutput.innerHTML += "In onreadystatechange function: readyState: " + xhr.readyState + "<br/>";
}
window.onload = function () 
{ 
  document.requestForm.requestButton.onclick = function () { sendRequest(); };
};</script> 
</head>
<body>
<form action="#" name="requestForm">
  <input type="button" name="requestButton" value="Make Request" />
</form>
<div id="readyStateOutput" style="display:none;">&nbsp;</div>
</body>
</html>

2. code.php文件的源代码如下:

<?php
header("Cache-Control: no-cache");
header("Pragma: no-cache");
sleep(5);
$ip = GetHostByName($_SERVER['REMOTE_ADDR']);
echo "Hello user from $ip it is " .  date("h:i:s A");
?>

3. 显示效果如下:

XMLHttpRequest(XHR)对象回访readyState

和XHR的很多细节一样,readyState的值可能是稍微有些离奇,因为它依赖于代码和浏览器。但是,各种奇异的readyState值在实践中是很少出现的,因为多数人只会去查找最终的值是4的情况。

Copyright© 2011-2016 www.baike369.com All Rights Reserved