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 条评论
登录 后参与评论

相关文章

来自专栏Spring相关

Springboot之Actuator的使用解析

Actuator是spring boot提供的对应用系统的自省和监控的集成功能,可以对应用系统进行配置查看、相关功能统计等。

693
来自专栏FreeBuf

我与学校SafeConnect软件斗智斗勇的经历

*本文原创作者:zasdfgbnm,本文属FreeBuf原创奖励计划,未经许可禁止转载 故事是这样的,本文作者在美国某大学读书,学校IT部门要求我们如果Win...

1985
来自专栏软件测试经验与教训

如何手写LR脚本?

教学网址:http://computer-database.gatling.io/computers

772
来自专栏企鹅号快讯

代码注入技术Process Doppelgänging利用介绍

0x00 前言 在最近的BlackHat Europe 2017,Tal Liberman和Eugene Kogan介绍了一种新的代码注入技术——Process...

2159
来自专栏程序猿

Burp Suite进阶之十四节:数据查找和拓展功能的使用

通过基础部分的学习,我们对BurpSuite的基本使用已经非常熟悉,从这一章开始,我们进入BurpSuite高级功能的使用。 ...

3299
来自专栏HTML5学堂

AJAX原理与步骤

HTML5学堂:而今,AJAX技术已经成为JavaScript的重要组成部分,提到AJAX,最核心的两个词语是“局部刷新”和“异步加载”。在本文当中,主要介绍A...

3436
来自专栏个人技术分享

android手机免root修改hosts

开发及测试过程中经常需要切换开发、测试、预发布等环境,切换环境是通过修改hosts实现的。

3623
来自专栏非著名程序员

10款你可能不知道的Android开发辅助工具

1、XAppDbg XAppDbg是一个可以在运行中改变代码中参数的一个应用开发工具。这个工具可以为你省下大量的时间,因为你不用为应用的每次小改变而重新编译运...

1846
来自专栏FreeBuf

Sqlmap联合Nginx实现“地毯式”检测网站SQL注入漏洞

以安全防御方的角度来看,防御的广度比深度更具优先级,这也是信息安全中木桶原理的体现。 Sqlmap是一个开源的SQL注入漏洞检测工具,Nginx是高性能的WEB...

2058
来自专栏木头编程 - moTzxx

Laravel5.5 session 的配置及使用示例讲解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

411

扫描关注云+社区