AJAX兼容

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

创建AJAX请求兼容

1. var xhr = new XMLHttpRequest();
2. // 非IE
3. var xhr = new ActiveXObject("Msxml2.XMLHTTP");
4. // 大多数IE
5. var xhr = new ActiveXObject("Microsoft.XMLHTTP");
6. // IE5、6
7.  

创建AJAX请求兼容具体事项

1. function createRequest(){
2.     var request = null;
3.     try {
4.         request = new XMLHttpRequest();
5.     } catch (tryMs) {
6.         try {
7.             request = new ActiveXObject("Msxml2.XMLHTTP");
8.         } catch (otherMs) {
9.             request = new ActiveXObject("Microsoft.XMLHTTP");
10.         };
11.     }
12.     return request;
13. }

判断服务器加载完成

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

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

readyState属性

0：未初始化。尚未调用open（）方法；

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

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

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

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

onreadystatechange事件：

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

1. // 创建请求
2. var xhr = new XMLHttpRequest();
3. xhr.open("get", "reset.css", true);
4. xhr.send(null);
5. xhr.onreadystatechange = function () {
6.     // 监测readyState状态
7.     if (xhr.readyState == 4) {
8.         // 只有已经接收到全部响应数据，才能获取数据
9.     };
10. }

欢迎沟通交流~HTML5学堂

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

1. // 创建请求
2. var xhr = new XMLHttpRequest();
3. xhr.open("get", "reset.css", true);
4. xhr.send(null);
5. xhr.onreadystatechange = function () {
6.     // 监测readyState状态
7.     if (xhr.readyState == 4) {
8.         // 检测HTTP的状态码
9.         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
10.             console.log(xhr.responseText);
11.         }
12.     };
13. }

欢迎沟通交流~HTML5学堂