您的位置：首页 > 理论基础 > 计算机网络

XMLHttpRequest的亲密接触（1）——简单讲解

2011-05-05 14:18 204 查看

一年前看w3school里面的一个例子，记得让我头疼的要命。

例子如下，转载于http://www.w3school.com.cn上面。

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
elseif (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
document.getElementById('A1').innerHTML=xmlhttp.status;
document.getElementById('A2').innerHTML=xmlhttp.statusText;
document.getElementById('A3').innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving XML data:"+ xmlhttp.statusText);
}
}
}
</script>
</head>

<body>
<h2>Using the HttpRequest Object</h2>

<p><b>Status:</b>
<span id="A1"></span>
</p>

<p><b>Status text:</b>
<span id="A2"></span>
</p>

<p><b>Response:</b>
<br /><span id="A3"></span>
</p>

<button onclick="loadXMLDoc('/example/xdom/note.xml')">Get XML</button>

</body>
</html>

显示结果是这样的

如果看不懂就先放放，亲密接触（2）有详细示例，看完2再看这个例子就能看懂了。

tip1：XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值	描述
[align=center]0[/align]	描述一种"未初始化"状态;此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
[align=center]1[/align]	描述一种"发送"状态;此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
[align=center]2[/align]	描述一种"发送"状态;此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
[align=center]3[/align]	描述一种"正在接收"状态;此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
[align=center]4[/align]	描述一种"已加载"状态;此时，响应已经被完全接收。

　　

status属性：这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
　　

responseText属性：这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
　　

statusText属性：这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

这个就解决了我当时的疑问：为什么xmlhttp.readyState==4一定要是4呢，是1000不行么，这就告诉我，不行！。

tip2：至于那个status==200，这里有个解释：Ajax中，XMLHttpRequest对象的status属性一般用来返回服务器的HTTP状态码。status为200表示“成功”，status为404代表“页面未找到”。

xmlHttpRequest对象的status属性的取值长整形标准http状态码，定义如下：

tip3：Ajax里的onreadystatechange的作用

发送一个请求后，客户端无法确定什么时候会完成这个请求，所以需要用事件机制来捕获请求的状态，XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。
onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果，如：
ajaxObj=XMLHttpRequest();
var url="/MyTodoes/FetchText?id="+id;
ajaxObj.open("Get",url,true);
ajaxObj.onreadyStateChange=changeTabCallBack;
ajaxObj.send(null);

onreadyStateChange事件是在readyState属性发生改变时触发的，readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。 readyState有五种可取值0：尚未初始化，1：正在加载，2：加载完毕，3：正在处理；4：处理完毕。一旦readyState属性的值变成了4，就可以从服务器返回的响应数据进行访问了。
通常在事件中判断readyState的值是在请求完毕时才做处理，如：
function changeTabCallBack(){
if(ajaxObj.readyState==4){
// 下一步验证
}
}
Status存储了服务器端返回的Http请求响应代码，它表示请求的处理结果，常见响应代码的含义如右。
在Ajax开发中，最常用就是200这个响应码，代码如下：
function changeTabCallBack(){
if(ajaxObj.readyState==4){
if(ajaxObj.status==200){
// 服务端返回了正确数据，开始响应处理
}
}
}
Http状态码含义
200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航