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

相关文章

来自专栏落影的专栏

iOS开发笔记(七)

正文 这次分享三个有意思的问题:二维码生成、Xcode8单元测试的问题、添加新字体。 二维码生成 iOS平台上的二维码生成有很多第三方库,也可以使用原生的方法,...

3689
来自专栏IMWeb前端团队

webpack 项目 css/js主域重试

为了提高网站的访问速度,现在一般会将静态资源放在 CDN 下,而不是放在网站的域名之下。以腾讯课堂为例,其域名为 ke.qq.com,打开控制台,访问 ke....

20710
来自专栏偏前端工程师的驿站

JS魔法堂:获取当前脚本文件的绝对路径

一、前言                           当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这...

1756
来自专栏一“技”之长

iOS UITextField 使用与方法解读

UITextField是IOS开发中用户交互中重要的一个控件,常被用来做账号密码框,输入信息框等。

421
来自专栏何俊林

工作累了,用Python抓取小姐姐图片来打鸡血

最近突然发现之前写的妹子图的爬虫不能用了,估计是网站又加了新的反爬虫机制,本着追求真理的精神我只好又来爬一遍了!

604
来自专栏FSociety

Python使用BeautifulSoup爬取妹子图

最近突然发现之前写的妹子图的爬虫不能用了,估计是网站又加了新的反爬虫机制,本着追求真理的精神我只好又来爬一遍了!

952
来自专栏程序员的碎碎念

JS动态加载以及JavaScript void(0)的爬虫解决方案

对于使用JS动态加载, 或者将下一页地址隐藏为 JavaScriptvoid(0)的网站, 如何爬取我们要的信息呢?

892
来自专栏有趣的Python

17 -Flask构建弹幕微电影网站- 电影播放及评论弹幕收藏实现

上映预告 模型: Preview 表单: 无 请求方法: GET 访问控制: 无 views中进行业务逻辑的实现 @home.route("/animation...

45912
来自专栏一“技”之长

iOS中UISearchBar(搜索框)使用总结

初始化:UISearchBar继承于UIView,我们可以像创建View那样创建searchBar

661
来自专栏简书专栏

Python爬虫-小测验

(1)读取给定的dangdang.html页面内容,注:编码为gbk(5分) (2)获取页面中所有图书的名称,价格,作者,出版社及图书图片的url地址(20分...

692

扫码关注云+社区