开发者社区> meteoric> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ajax和它的超时

简介: 日常开发中一般都会使得ajax去获了数据,但有两点是需要值得注意的: 1、ajax请求队列 2、ajax的超时处理 为什么要注意这两点?为了让用户在其可视区域内更快速的看见内容。 假设页面结构分为三栏:左、中、右,而且页面数据会比较多,页面呈现的顺序则是是按从上而下执行的(当然是从左至右开始,一个模...
+关注继续查看

日常开发中一般都会使得ajax去获了数据,但有两点是需要值得注意的:

1、ajax请求队列

2、ajax的超时处理

为什么要注意这两点?为了让用户在其可视区域内更快速的看见内容。

假设页面结构分为三栏:左、中、右,而且页面数据会比较多,页面呈现的顺序则是是按从上而下执行的(当然是从左至右开始,一个模块一个模块加载数据),如果不采用队列,那么在页面可视范围之外的模块可能已经加载完数据了,而可视范围之内(假设为第一屏)的模块却尚未开始接收数据,这一类应用如:搜狐博客、新浪博客、网易博客等…

 

既然是采用了队列,那么又会有一个新的问题:需要保证一个请求的时候不能太长,不能因为一个请求而导致后续的请求被阻塞了。在这两点上jQuery做的其实都挺不错的。队列的处理上,已经有一个插件了,叫ajaxManager,例子和链接在这里:http://www.protofunc.com/scripts/jquery/ajaxManager/;而在超时的处理上,jquery本身就支持传递参数timeout来进行设置(默认是没有设置的)。它没有考虑IE8,尽管IE已经支持xhr对象的timeout属性。

 

从ajax创建开始,这里优化的一点是针对IE浏览器,只循环获取一次使用哪种MSXML库,副作用就是需要使用额外的属性来记录它

function createXHR() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != 'undefined') {
if (typeof arguments.callee.activeXString != 'string') {
var version = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

for (var i = 0, len = version.length; i < len; ++i) {
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}
catch (ex){

}
}
}

return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
 
创建的xhr对象,它对应有5状态(readyState属性)
0   Uninitialized(尚未调用open方法)
1   Loading (已调用open,尚未调用send)
2   Loaded (已经调用send,尚未接收到响应)
3   Interactive (开始接收数据)
4   Complete (数据接收完毕,响应内容解析完成)
 
在判定一个请求是否已经完成的时候,验证xhr的status有一点是需要注意的:“有的浏览器会错误地返回204状态码”,而IE(非原生的XHR对象)中会将204设置为1223,Opera会在取得204时将status设置为0,而Safari 3之前的版本会将status设置为undefined
最终验证请求是否成功的代码将会是:

 

( xhr.status >= 200 && xhr.status < 300 ) ||
xhr.status === 304 || xhr.status === 1223 || xhr.status === 0

 

 
另外在send的时候,还需要注意的是如果不需要通过请求主体发送数据,最好是传入参数,因为send方法的参数
对于有些浏览器是必需的,建议一般传null即可
 
在发送请求时,可以通过setRequestHeader来设置HTTP头部信息,在使用GET请求时,可以在头部加上If-Modified-Since、Cache-Control参数来达到刷新缓存数据的目的(如果采用在URL上加随机数据或是时间戳,资源并没有被缓存)

 

xhr.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
xhr.setRequestHeader('Cache-Control', 'no-cache');

 


 
在响应完成后,可以使用getResponseHeader、getAllResponseHeaders两个方法来获取指定或是全部的响应头的HTTP信息
 
剩下的一个问题是,处理ajax超时的问题。jquery中的做法是使用定时器来检测xhr的状态,而使用延时器来解决超时的问题:
setInterval(onreadystatechange, 13);
setTimeout(fn, timeout);
而在自定义的onreadystatechange函数中会检测传入的参数,如果参数为“timeout”则说明超时了,先调用xhr的abort取消请求,然后再调用complete方法。至于间隔时间为什么是13,这个没仔细去研究它
 
正常情况下,如果readyState为4,则先清除定时器,然后再检测响应的数据。而setTimeout中的fn函数,在处理时会先检测请求是否已经处理过了,这里它并没有对延时器进行引用,会导致的一种情况是,请求已经结束,延时器还在跑,直到达到指定的时间间隔。
 
最后如果ajax请求为异步的话,别忘记将xhr置为null==>xhr = null; 以防止内存泄漏的问题
 
IE8中直接写xhr.timeout = xxx;然后当超时时,会调用xhr的ontimeout方法,不过需要注意的问题是,当调用ontimeout事件时,此时的readyState可能已经变为了4,此时如果去访问status则会导致错误(最好使用try{}catch{}进行捕获一下)
 
到目前为止,除IE外,其它浏览器支持xhr对象的onload事件,只要浏览器开始接收到响应,就会触发它,所以在这个函数里面还是需要对它的status属性进行判断。
 
最后一点是在FF 1.5之后,它支持progress事件,这意味着可以显示当前请求的进度(不再是枯燥的loading了)。
在onprogress事件中会传入一个event对象,它的target是对应的xhr对象,它包含了两个额外的属性:position、totalSize。
其中position表示已接收的字节数,totalSize表示根据Content-Length响应头部确定的预期字节数。

 

var xhr = new createXHR();
xhr.onload = function() {
//...
}
xhr.onprogress = function(evt) {
var percent = (evt.position / evt.totalSize)*100;
}
xhr.open("get", url, true);
xhr.send(null);

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Ajax技术详解(上)
在本文中,我们将从5个部分来对Ajax技术进行讲解: 1.背景知识介绍(包括所涉及的相关名词概念等) 2.服务端介绍(介绍三种搭建服务器的方法) 3.代码展示(原生Ajax代码展示及讲解,jQuery-ajax、Vue-resource、Vue-axios、微信小程序实现的案例讲解) 4.跨域问题(基础知识概述及跨域解决方案) 5.进阶(Ajax现存问题分析及ES6-Promise、Generator的介绍)
32 0
ajax基础
AJAX AJAX简介 ajax分类 ajax的语法 表示一个对象 表示一个由对象组成的数组 将java对象转换成json字符串 ajax实现过程 获取ajax对象 配置请求对象的信息 发送请求 监听Ajax引擎对象的改变是否正确做出了响应 Ajax引擎的状...
1308 0
AJAX-基础
1、ajax是什么 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
711 0
再看Ajax
原文:再看Ajax  再回顾Ajax相关的内容,再次梳理学习还是很有必要的,尤其是实际的开发中,ajax更是必不可少,仔细学习以便避免不必要的错误。     文章导读:     --1.使用XMLHttpRequest----------       1.
939 0
ajax PDF
http://www.codepub.com/software/view-software-8932.html
668 0
AJAX(2)
AJAX (Asynchronous Javascript And XML) 你看到一个网页代码,网页里有script代码,script里面有XMLHttpRequest 于是基本可以确定你在看一个应用了ajax的网页  AJAX就是这么简单 在javascript里定义一些XMLHttpRequest,通过.op
926 0
+关注
422
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载