前端技术分享-码匠 极客编程技术分享

您当前位于:AJAX数据交互 ——> 原生JavaScript中,AJAX的兼容问题

原生JavaScript中,AJAX的兼容问题

2015/05/02 19:48:26 | 作者:HTML5学堂(码匠) | 分类:AJAX数据交互 | 关键词:HTTP,AJAX,兼容问题

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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端