HTML5-类库系列 补讲AJAX

HTML5学堂：AJAX主要是两个兼容问题，其一是AJAX请求的创建，其二是加载状态的检测。本文主要讲解AJAX兼容的方法的搭建。

AJAX请求的创建

大部分使用AJAX的人都会使用new XMLHttpRequest()的方法进行AJAX的创建。这种方法能够很好的兼容IE7以及IE7+的浏览器，但是却没有办法处理IE7-的低版本浏览器。对于当前，我们已经摆脱了IE6的困扰，所以这个兼容问题也不再是那么严重，在这里仅仅做一个介绍。

IE5是第一款引入AJAX的浏览器，在IE5中，需要通过ActiveX对象实现AJAX功能。从IE5到IE6（注：IE在早期并非仅仅是整数版本，还存在IE5.5等版本）因此，当时创建AJAX需要遇到MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0三种情况。此时如果我们希望能够创建一个兼容版本的AJAX，就需要书写如下代码：

function creatRequest() {
var request = null;
try {
request = new XMLHttpRequest();
} catch (tryMS) {
try {
request = new ActiveXObject("MSXML2.XMLHttp.6.0");
} catch (otherMS){
try{
    request = new ActiveXObject("MSXML2.XMLHttp.3.0");
}catch(failed){
    request = new ActiveXObject("MSXML2.XMLHttp");
}
}
}
return request;
}

加载状态检测

var xhr = creatRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert('申请失败');
}
};
}
xhr.open('get', 'liuguoli.json', true);
xhr.send(null);

先来解释readyState，用于表示请求/响应过程的当前活动状态，即AJAX的请求状态。

0 表示未初始化，没有调用open方法

1 表示请求已经准备好，可以发送 open()结束 未send

2 表示已经发出send方法，但是并没有接收到服务器的响应

3 表示数据下载到请求对象 但是响应数据还没有准备好，不能使用 responseText

4 表示服务器处理完成，数据可以使用

再来说状态码,HTTP状态码中的不同数字开头代表不同的含义：

1XX 消息

2XX 成功

3XX 重定向

4XX 错误

5XX 服务器端错误

此处使用了大于200，小于300，表示的就是请求成功。而304需要特殊注意，304表示的是请求的资源并没有发生更改，可以直接使用本地浏览器的缓存版本，也意味着响应是有效的。

关于onload方法，有些同学可能会觉得，为何不可以用这个呢？其实它也是有浏览器兼容问题的，需要IE8以及IE8以上的浏览器才能够支持。

结束~！

欢迎沟通交流~HTML5学堂