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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

利用H5的EventSource,小试服务器推送(SSE)

H5在最后定稿的时候,出现了一个新的JS API:EventSource(也许是我之前一直没关注吧)。

1830
来自专栏Kafka 运维操作总结

Kafka Partition 迁移方法总结

10.191.132.147:2181 是zookeeper 通信ip和port.

2835
来自专栏魏艾斯博客www.vpsss.net

解决 Winscp 不显示隐藏文件的办法

1302
来自专栏FreeBuf

XSS的原理分析与解剖:第三章(技巧篇)

作者 Black-Hole 0×01 前言: 关于前两节url: 第一章:http://www.freebuf.com/articles/web/40520....

2047
来自专栏IT笔记

前后端分离之SpringBoot项目Token认证

写在开始 有人说,爱上一座城,是因为城中住着某个喜欢的人。其实不然,爱上一座城,也许是为城里的一道生动风景,为一段青梅往事,为一座熟悉老宅。或许,仅仅为的只是这...

4759
来自专栏拂晓风起

Loader拉取图片,由于redirect重定向,导致策略文件无效 设置checkPolicyFile后还是无效:需要一个策略文件,但在加载此媒体时未设置 checkPolicyFile 标志

1146
来自专栏张戈的专栏

PHP彩蛋还是漏洞?expose_php彩蛋的触发和屏蔽方法

最近在折腾网站 XSS 漏洞修复的时候,当我把 XSS 漏洞和谐成功之后,360 扫描送来了一个"彩蛋": ? ? ? 本以为又是 360 误报,结果点击看了下...

42710
来自专栏知识分享

八,ESP8266 文件保存数据(基于Lua脚本语言)

应该是LUA介绍8266的最后一篇,,,,,,下回是直接用SDK,,然后再列个12345.......不过要等一两个星期,先忙完朋友的事情 前面几篇 用AT指令...

4097
来自专栏智能计算时代

Envoy架构概览(9):访问日志,MongoDB,DynamoDB,Redis

访问日志 HTTP连接管理器和tcp代理支持具有以下功能的可扩展访问日志记录: 每个连接管理器或tcp代理的任意数量的访问日志。 异步IO刷新架构。 访问日志记...

3953
来自专栏码洞

如何优雅的关闭Go Channel【译】

不要在消费端关闭channel,不要在有多个并行的生产者时对channel执行关闭操作。

2744

扫码关注云+社区

领取腾讯云代金券