005.后台处理进度实时显示

一.思路

大致是利用两个ajax和全局变量来实现该功能。

图解如下：

主ajax---》发送数据请求---》将处理进度写入全局变量

辅助ajax--》获取全局变量---》前台显示

下载前，前台实时显示后台的处理进度效果图：

?

?

二、具体实现过程

辅助ajax后台实现过程如下：

1.先创建一个全局变量类

map全局变量存储所有进度信息，利用map的特性，可以多并发处理多用户请求，互不干扰。

?

2.创建辅助请求类，用于返回处理进度到前台

因为本人公司请求方式不一样，你们可以使用注解方式提供请求地址，这个没关系。也可以使用responsebody返回数据到前台，只要ajax能接受到数据就可以。

请求的时候请加上参数，progress=‘id’，因为每个用户都有唯一的id，通过这个id作为key来保证用户之间的进度数据互不干扰。

?

?

3.主ajax后台请求类

这个就是你们的业务逻辑所在的位置了，把处理的进度信息添加到全局变量map就可以。

我是在业务处理类中最占用时间的for循环中将处理进度添加到map中的。

?

?

?

?

?

好了以上的后台写好了，接下来便是前端显示的问题。要辅助ajax获取到进度信息，显示的事情就很简单了，什么ui框架之类的用个进度条功能就可以了.

我用的是easyui,其他诸如bootstrap之类的也可以.

?

三、前台进度条实时展示

1.添加显示标签栏（easyui的进度条bar，注意先引用插件的js、css）

?

?

2.两个ajax的调用

定义一个javascripte定时器变量t1和一个uuid变量

?

主ajax，请求一定要记得传个uuid

主ajax如下：

定义一个javascript定时器变量t1和一个uuid变量，

红框框这两者一般放在点击事件的函数里面一起执行。

?

定时器调用的刷新实时进度的函数（辅助ajax），以及uuid函数

?

?

好了，各位应该知道怎么实现整个功能了吧。在下代码实在是不咋地，就别在意这点了，希望对各位工作或是学习有帮助！谢谢！