AJAX兼容
HTML5学堂:AJAX的实现步骤相对简单,比较麻烦的是需要进行处理AJAX的兼容。那AJAX的兼容包括创建请求和判断服务器加载完成这两部分,还用到了AJAX的状态码和HTTP状态码,实现AJAX兼容,具体我们一起来看看。
创建AJAX请求兼容
var xhr = new XMLHttpRequest();
// 非IE
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
// 大多数IE
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
// IE5、6
创建AJAX请求兼容具体事项
function createRequest(){
var request = null;
try {
request = new XMLHttpRequest();
} catch (tryMs) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMs) {
request = new ActiveXObject("Microsoft.XMLHTTP");
};
}
return request;
}
判断服务器加载完成
onload只是确定后台加载完毕了,不能保证数据请求的有效性(没有进行筛选);onload不能保证JavaScript不被阻塞,从而导致AJAX没有异步可言了;另外onload不兼容IE7以及IE7以下的浏览器。这时候需要想出另外的方法,来替换掉onload事件。
在发送请求的时候,为了不让JavaScript进行等待而阻塞执行,可以检测AJAX对象的readyState属性,该属性表示请求响应过程的当前活动阶段。
readyState属性
0:未初始化。尚未调用open()方法;
1:启动。已经调用open()方法,但未调用send()方法;
2:发送。已经调用send()方法,但未接收到响应;
3:接收。已经接收到部分响应数据;
4:完成。已经接收到全部响应数据,而且已经在客户端使用了。
onreadystatechange事件:
只要readyState属性的值由一个值变成另外一个值,都会触发一次onreadystatechange事件。
// 创建请求
var xhr = new XMLHttpRequest();
xhr.open("get", "reset.css", true);
xhr.send(null);
xhr.onreadystatechange = function () {
// 监测readyState状态
if (xhr.readyState == 4) {
// 只有已经接收到全部响应数据,才能获取数据
};
}
欢迎沟通交流~HTML5学堂
现在是可以判断AJAX解析过程,但是还不能明确响应的HTTP请求状态。HTTP的状态码以2开头的代表成功处理了请求的状态代码。304表示请求的资源没有被修改,可以直接使用浏览器的缓存,但是这样的响应也是有效的。
// 创建请求
var xhr = new XMLHttpRequest();
xhr.open("get", "reset.css", true);
xhr.send(null);
xhr.onreadystatechange = function () {
// 监测readyState状态
if (xhr.readyState == 4) {
// 检测HTTP的状态码
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
}
};
}
欢迎沟通交流~HTML5学堂