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学堂
- 3891: [Usaco2014 Dec]Piggy Back
- Java8-如何构建一个Stream
- 2016: [Usaco2010]Chocolate Eating
- javascript 闭包详解
- 3016: [Usaco2012 Nov]Clumsy Cows
- POJ 3207 Ikki's Story IV - Panda's Trick(2-SAT)
- 3359: [Usaco2004 Jan]矩形
- 漫谈Java IO之 Netty与NIO服务器
- Java线程的几种状态
- POJ3683 Priest John's Busiest Day(2-SAT)
- javascript 面向对象(实现继承的几种方式)
- Base64 的 JavaScript 实现 js-base64
- HTTP请求详解
- 漫谈Java IO之 NIO那些事儿
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自定义View实现五星好评效果
- Android通过ViewModel保存数据实现多页面的数据共享功能
- Android自定义View实现炫酷进度条
- OpenSSL的VC编程 - MD5
- 详解AndroidStudio中代码重构菜单Refactor功能
- Android自定义View仿QQ运动步数效果
- Kotlin类型安全构建器的一次运用记录
- 两个surfaceView实现切换效果
- AndroidStudio4.0 New Class的坑(小结)
- Android日历控件的实现方法
- GetDiskFreeSpaceEx函数的一点处理
- Flutter轮播图效果的实现步骤
- Android自定义View实现五子棋游戏
- android简单自定义View实现五子棋
- 文件操作API