HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery与类库搭建 ——> 如何编写自己的JS框架/类库-之五 AJAX的相关功能实现

如何编写自己的JS框架/类库-之五 AJAX的相关功能实现

2015/05/05 11:26:56 | 作者:HTML5学堂(码匠) | 分类:jQuery与类库搭建 | 关键词:JavaScript,框架开发,类库开发,AJAX

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,就需要书写如下代码:

  1. function creatRequest() {
  2.     var request = null;
  3.     try {
  4.     request = new XMLHttpRequest();
  5.     } catch (tryMS) {
  6.         try {
  7.             request = new ActiveXObject("MSXML2.XMLHttp.6.0");
  8.         } catch (otherMS){
  9.             try{
  10.                 request = new ActiveXObject("MSXML2.XMLHttp.3.0");
  11.             }catch(failed){
  12.                 request = new ActiveXObject("MSXML2.XMLHttp");
  13.             }
  14.      }
  15.      }
  16.     return request;
  17. }

加载状态检测

  1. var xhr = creatRequest();
  2. xhr.onreadystatechange = function () {
  3.     if (xhr.readyState == 4) {
  4.         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  5.             alert(xhr.responseText);
  6.         } else {
  7.             alert('申请失败');
  8.         }
  9.     };
  10. }
  11. xhr.open('get', 'liuguoli.json', true);
  12. xhr.send(null);

欢迎沟通交流~HTML5学堂

先来解释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学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端