位置：首页>> 网络编程>> JavaScript>> 详解AJAX核心 —— XMLHttpRequest 对象（2）

详解AJAX核心 —— XMLHttpRequest 对象（2）

　　发布时间：2010-03-31 14:49:00　

标签：ajax,XMLHttpRequest,浏览器

下面从发送请求并处理请求结果的过程来理解一下XMLHttpRequest 对象吧。

发送请求之前自然就是生成一个XMLHttpRequest 对象，代码上面有了就不多写了。

生成一个XMLHttpRequest 对象

var xmlhttp = CreateXMLHttp();

创建好XMLHttpRequest 对象了，那我们要送请求到哪个网站呢，就选择博客园首页的RSS吧。那怎么设置我要请求的网站地址呢，使用open()方法。

open(method, url, async, username, password)

该方法有5个参数，具体什么意思可以看这里：http://www.w3school.com.cn/xmldom/dom_http.asp

我们用的就是这个了。

xmlHttp.open("get","http://www.cnblogs.com",true);

get参数表示用get方法，第二个自然就是目标地址，博客园首页，第三个就是表示是否异步了，我们当然使用true了。具体的参数说明还都可以到http://www.w3school.com.cn上面看了。

好了，目标定好了，怎么发送呢。用send()方法。

send(body)，send()方法只有一个参数，表示DOM对象，这个DOM对象需要说明的内容很多，下次说，今天我们只要写

xmlhttp.send();

就可以了。好了，发送了，那怎么处理返回的结果呢，这个时候就用到XMLHttpRequest 对象最重要的东西了，那就是onreadystatechange事件句柄。什么意思呢，那就需要说明一下XMLHttpRequest 对象的readyState了，readyState有5种状态，分别用数字的 0 到 4 来表示。

状态名称描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建（未调用open()之前）或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。

但是需要注意的是，onreadystatechange事件句柄不同的浏览器能处理的状态并不一致，IE和FireFox能处理1到4，而Safari能处理2到4的状态，Opera 能处理3、4两中状态。0的状态基本没什么用，因为创建了XMLHttpRequest 对象后都会马上调用open() 方法，这时候状态就变成1了，当然除非你要判断对象是否已经被 abort() 取消，可是这样的情况依然很少。大部分情况下判断是不是4（已经接受完成）这个状态就够了。

好了，明白了readyState有5种状态了，那处理返回结果就是看状态变更到不同的状态我们做不同的处理就可以了，怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢。有两种写法，一种是用匿名方法，另一种是指定方法，其实只是不同的写发，作用都一样，看下代码：

xmlhttp.onReadyStateChange = function (){
//处理状态变化的代码
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
///处理状态变化的代码
}
//顺便说一下，句柄的名称比较长，可以这样记忆 on ReadyState Change 表示在读取状态改变时

请求发送了，也指定处理方法了，怎么获取返回的内容呢，有responseText和responseXML两个属性可供使用，responseXML是返回对象，需要再解析，后面再说，这里先用responseText，看看返回什么。

alert(xmlhttp.responseText); //看看是不是返回了首页的HTML代码啊。是你就成功了。

整个过程是：创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意，我们正常的思路理解是这样的，可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好，否则无法处理状态变化事件。

所以我们应该按照下面的流程来记忆：创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求，请求发送后状态变化了就会自动调用指定的处理方法。

第一页上一页 1

3 下一页

投稿

详解AJAX核心 —— XMLHttpRequest 对象（2）

猜你喜欢