本文摘自PHP中文网,作者coldplay.xixi,侵删。
ajax教程栏目介绍实时刷新处理
推荐(免费):ajax教程(视频)
作为一个老前端,本案例是基于jquery来写的。
前端渲染页面拿数据,无非就是ajax、socket,其他的暂时没有用过,但项目还是使用ajax比较多。
下面来看一下一个简单基于ajax短轮询的请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function req() {
$.ajax({
type: 'get' ,
url: 'demo.php' ,
dataType: 'json' ,
success: function (res) {
console.log(res);
},
error: function () {
console.log( '请求失败~' );
}
});
}
req();
setInterval(req, 3000);
|
如果网速快而稳定的话,可以这样使用,但网速谁能确定呢,如果网速不稳定的话,请求一个接口需要5~10秒,这样就会造成ajax请求堆积,近而引发不可估量的问题,那么怎样去避免这个问题呢?
方式一:给请求赋上一个变量,然后每次轮询先abort掉上一个请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var ajaxReq = null;
function req(isLoading) {
if (ajaxReq !== null) {
ajaxReq.abort();
ajaxReq = null;
}
ajaxReq = $.ajax({
type: 'get' ,
url: 'demo.php' ,
dataType: 'json' ,
beforeSend: function () {
if (isLoading) {
$( '.zh-loading' ).show();
}
},
success: function (res) {
console.log(res);
},
complete: function () {
if (isLoading) {
$( '.zh-loading' ).hide();
}
},
error: function () {
console.log( '请求失败~' );
}
});
}
req(true);
setInterval( function () {
req(false);
}, 3000);
|
猛一看,感觉还行,差不多就OK了,但作为前端的我们要不断的去寻找更合适的方式,所以有个下面这个。
阅读剩余部分
相关阅读 >>
javascript怎么将数据转换为整数
javascript如何添加节点
javascript与html的结合方法详解
javascript怎么判断是否为null
浅谈动态导入ecmascript模块的方法
javascript怎么实现页面跳转
javascript如何判断对象是否数组
javascript怎么隐藏表格
javascript字符串大写怎么转为小写
javascript如何判断是否为整数
更多相关阅读请进入《ajax》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 快来看看 ajax实时刷新处理