HTML5中AJAX超简单实现方法,原生JavaScript中，AJAX的兼容问题

AJAX兼容

HTML5学堂：AJAX的实现步骤相对简单，比较麻烦的是需要进行处理AJAX的兼容。那AJAX的兼容包括创建请求和判断服务器加载完成这两部分，还用到了AJAX的状态码和HTTP状态码，实现AJAX兼容，具体我们一起来看看。

创建AJAX请求兼容

var xhr = new XMLHttpRequest();

// 非IE

var xhr = new ActiveXObject("Msxml2.XMLHTTP");

// 大多数IE

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

// IE5、6

创建AJAX请求兼容具体事项

function createRequest(){

var request = null;

try {

request = new XMLHttpRequest();

} catch (tryMs) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (otherMs) {

request = new ActiveXObject("Microsoft.XMLHTTP");

};

}

return request;

}

判断服务器加载完成

onload只是确定后台加载完毕了，不能保证数据请求的有效性(没有进行筛选)；onload不能保证JavaScript不被阻塞，从而导致AJAX没有异步可言了；另外onload不兼容IE7以及IE7以下的浏览器。这时候需要想出另外的方法，来替换掉onload事件。

在发送请求的时候，为了不让JavaScript进行等待而阻塞执行，可以检测AJAX对象的readyState属性，该属性表示请求响应过程的当前活动阶段。

readyState属性

0：未初始化。尚未调用open()方法；

1：启动。已经调用open()方法，但未调用send()方法；

2：发送。已经调用send()方法，但未接收到响应；

3：接收。已经接收到部分响应数据；

4：完成。已经接收到全部响应数据，而且已经在客户端使用了。

onreadystatechange事件：

只要readyState属性的值由一个值变成另外一个值，都会触发一次onreadystatechange事件。

// 创建请求

var xhr = new XMLHttpRequest();

xhr.open("get", "reset.css", true);

xhr.send(null);

xhr.onreadystatechange = function () {

// 监测readyState状态

if (xhr.readyState == 4) {

// 只有已经接收到全部响应数据，才能获取数据

};

}

欢迎沟通交流~HTML5学堂

现在是可以判断AJAX解析过程，但是还不能明确响应的HTTP请求状态。HTTP的状态码以2开头的代表成功处理了请求的状态代码。304表示请求的资源没有被修改，可以直接使用浏览器的缓存，但是这样的响应也是有效的。

// 创建请求

var xhr = new XMLHttpRequest();

xhr.open("get", "reset.css", true);

xhr.send(null);

xhr.onreadystatechange = function () {

// 监测readyState状态

if (xhr.readyState == 4) {

// 检测HTTP的状态码

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

console.log(xhr.responseText);

}

};

}

欢迎沟通交流~HTML5学堂