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对象！");
}
}
