AJAX——XMLHttpRequest对象的使用

AJAX是web2.0即动态网页的基础，而XMLHttpRequest对象又是AJAX的核心。XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器响应信息和数据

一、创建 XMLHttpRequest对象

　　不同的浏览器创建XMLHttpRequest对象的方式不同。其中高版本使用XMLHttpRequest创建，而低版本的则是使用ActiveXobject创建，这两个组件均是window对象的成员。应该判断浏览器是否支持XMLHttpRequest，是则创建，否则用ActiveXobject创建；

示例如下：

function makexhr() 
{
　　var xhr1;
　　try 
　　{
　　　　if (window.XMLHttpRequest)　　//高版本浏览器
　　　　　　xhr1 = new XMLHttpRequest();
　　　　else if (window.ActiveXobject)　　//针对低版本浏览器
　　　　　　xhr1 = new ActiveXobject("Microsoft.XMLHTTP");
　　　　return xhr1;
　　}
　　catch (e) 
　　{
　　　　alert("你的浏览器无法创建XMLHttpRequest对象！");
　　}
}

二、XMLHttpRequest对象属性和方法

常用属性和方法如下：

1、判断程序执行进程时用到的属性：

• readyState：状态值，返回当前请求的状态。随着程序的执行，其值会依次变成以下几个值。我们通常要判断其是否等于4

0	未初始化。   但对象已经建立，此时尚未调用open方法创建http请求
1	初始化。      未调用send方法发送http请求
2	发送数据。    send方法已经被调用
3	数据传送中。因为响应及http头不全，这时通过response系统方法获取部分数据会出现错误
4	传送完成。   此时才能通过response系统方法获取完整的回应数据

• status:状态码。返回当前HTTP请求的状态码，属性只读。如：404＝“文件未找到”，200＝“成功”

2、操作XMLHttpRequest对象与服务器交互的方法

• open：初始化XMLHttpRequest对象。用于创建一个新的http请求，并设置该请求的相关信息。  语法：xhr.open(method,url,[async],[user],[password])，说明如下。

method	提交给服务器的方式：GET、POST
url	要求处理该请求的服务端资源(URL)
async	true：异步处理，即向服务器端发送完数据后，处理其他事情，待服务器答复后再处理返回的数据。 false: 同步处理，即向服务器端发送完数据后，一直等待服务器答复，再进行下一步处理。
user、password	用户名和密码，用于服务器端验证

• send:发送请求到http服务器并接收回应。语法：xhr.send(data);   参数data为要发送给服务器的内容。如果没有内容要发送，data 3参数应设为null。

• onreadystatechange:指定当readyState属性改变时的事件处理句柄。即指定 readyState 状态值从0到4每次改变后的处理方法。在事件处理函数中判断readyState状态值并做相应的处理。 语法：xhr.onreadystatechange = function ;function作为事件处理函数， readyState 状态值从0到4每次改变都会触发该函数。所以 function 函数体内应判断 readyState == 4 && xhr.status == 200，只有正确只得到服务器的答复才能进一步执行。

• abort：取消当前请求；

3、获取服务器的返回数据的属性

• responseBody:将回应信息正文以unsigned byte 数组形式返回，属性只读。
• responseText:以字符串的形式返回服务器响应信息，属性只读。
• responseXML:将响应信息格式化为XML Document对象返回，属性只读。

4、操作http头信息相关的属性。

• getAllResourceHeaders:获取相应的全部http头信息。语法：headers = xhr.getAllResourceHeaders();
• getResourceHeader:从响应信息中获取指定的http头信息。 语法：head =xhr.getResourceHeader("header-name");
• setRequestHeader:单独设定请求的某个头。

三、实例

步骤如下：

(1)创建XMLHttpRequest对象；
(2)初始化XMLHttpRequest对象，设置发送请求参数：采用GET或者POST，以及是否采用异步方式。
(3)设置XMLHttpRequest状态改变时的事件处理函数。
(4)发送请求，如采用POST方法发送请求，可以发送带参数的请求，GET方式不可以。

function Getjson()
{
　　var str = "NKXZPJ.ashx";
　　var xhr = makexhr(); 　　//(1)
　　xhr.open("Post", str, true);　　//(2)
　　xhr.onreadystatechange = function () 　　//(3)
　　{
　　　　if (xhr.readyState == 4 && xhr.status == 200)
　　　　{
　　　　　　var res = xhr.responseText;
　　　　　　return res;
　　　　}
　　}
　　xhr.send(null);　　//(4)
}
//xhr 创建 XMLHttpRequest 对象
function makexhr()
{
　　var xhr1;
　　try
　　{
　　　　if (window.XMLHttpRequest)　　//高版本浏览器
　　　　　　xhr1 = new XMLHttpRequest();
　　　　else if (window.ActiveXobject)　　//针对低版本浏览器
　　　　　　xhr1 = new ActiveXobject("Microsoft.XMLHTTP");
　　　　return xhr1;
　　}
　　catch (e)
　　{
　　　　alert("你的浏览器无法创建XMLHttpRequest对象！");
　　}
}