您的位置:首页 > 其它

两个并行AJAX引发的业务思考?

2016-11-17 22:41 162 查看

事件的起因是:避免后台执行过慢影响页面显示效果

在页面执行ajax进入后台执行大量的算法处理和调用数据量十分大的接口时,想比会导致回调过慢或者前端页面卡死的情况,这样十分影响用户体验和网页加载,而且后台执行到某一步产生错误信息的时候,十分容易导致ajax最后回调的是错误信息。



要解决一个需求,大概就是利用php的fastcgi_finish_request()函数到达类似异步执行的效果(或者其他办法),就是ajax进入后台而马上回调success,而后的进程还是在执行,只是这样的话就不会影响前台的数据展示和刷新了。

如果不太了解整个函数的,请出门右拐

这是fastcgi_finish_request()使用的简单实例:

假如前台ajax执行的url方法是schedule()……

public function schedule(){

echo '我回调了噢';
fastcgi_finish_request();

echo '我在不断执行,只是你看不见!';
//处理大量的数据和接口回调
for(){
*****
}
//处理大量的数据和接口回调
file_put_contents($文件名, $传入参数);   //后面会提到
}




另一个需求又来了,这次是要在执行完第一个ajax后再不断执行一个ajax去查询前面文件中所保存的数据,并返回显示到前台已进度条的形式展示

简单概括:要有个不断执行的ajax以表示进度条的数据。

(1)我首先想到的是前端计时器去不断访问后台的接口,并在数据到一个为”END”的值的时候就结束计时器。

但是这个方案实现起来并不是那么靠谱,因为ajax回调的时间和计数器每次的循环时间是很难统一的。

有一个很严重的问题就是,前端是不能同时执行多个ajax的,也就是说,你要执行下一个ajax的之前必须让前一个ajax完全执行后才能开始执行

这是在内部执行的ajax

function good(){
$.ajax({
type:"post",
data:{},
async:true,
url:"**我是不断访问后台文件的接口**",
success:function(data){
console.log(data);
}
})
}

$.ajax({
type:"post",
data:{},
async:true,
url:"**我是访问大量数据,并把数据存数据存到文件中的接口**",
beforeSend: function()
{
console.log("最开始的执行!");
time=setInterval(good,1000);
},
success:function(data){
console.log(data);
console.log("执行成功!");
},
complete:function(){
//                clearInterval(time);
console.log("执行结束!");
},
})


这是在前一个大的接口回调后执行的(后台接口含有fastcgi_finish_request()的函数)后,再执行计时器

$.ajax({
type:"post",
data:{
},
url:"**我是很多数据的接口**",
async:true,
success:function(data){
//我会立即回调,因为后台执行了fastcgi_finish_request
console.log(data);
}
});
var time=setInterval(function(){
$.ajax({
type:"post",
data:{},
async:true,
url:"**我是不断访问**",
beforeSend: function()
{
console.log("最开始的执行!");
},
success:function(data){
console.log(data);
if(data==**){
clearInterval(time);
}
console.log("执行成功!");
},
complete:function(){

console.log("执行结束!");
},
})
},1000);


(2)第二个方案原理是使用递归,每次都只执行一次的ajax,并且,每次回调之后都会执行自身

function ajax(){
console.log("我在不断执行");
$.ajax({
type:"post",
data:{
},
url:"**这是我不断访问后台文件得到数据的接口**",
async:true,
success:function(data){
console.log(data);

ajax();   //我又回去执行自己

//利用读取的后台数据处理进度条事件

}
});
}


最后我使用第二种办法,成功解决了进度条所产生的不断访问后台数据,而又不会卡死页面的效果,还有一个值得一提:把不断变化的值放到文件中,读取并写入文件,可以更好的处理前后台数据的传递。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: