使用Fusioncharts实现后台处理进度的前台展示
2016-09-13 14:09
387 查看
本文要解决两个问题:
1、在ajax的数据交互中,如何获得后台的处理进度?
2、在前台界面中,如何使用图形化的方式展示后台处理进度?
关于第一个问题,不是本文的重点,简单说一下思路。因为HTTP协议实际上是无状态的协议,前台的请求提交给后台之后,一般情况下都是后台处理完成才会向前台返回处理结果。如果想前台展示处理进度,有三个方法:
一、使用flush()函数。PHP中提供了 flush() 和 ob_flush() 函数,允许用户将缓存的内容输出,但是如果在服务器端使用了gzip压缩,这种方法常常会失效。另外,这种办法实际上是一个流式的结果输出,在形式上很难有美观的展现。
二、使用JS控制任务进度。更好的办法我觉得应该是使用JS在前端来控制多个任务提交的顺序,从而在前端计算整体的进度来用图形化的方式展现。
三、后台实现进度记录,前台进行展现。也可以采用后端使用持久化数据来记录整体计划于当前进度,前端JS定时异步调用查询结果的方式来实现前端的展示。我在一个Zip文件包解压并处理的程序中采用了第二种方式,大家可以根据项目的具体情况来选用。
下面来说如何用 Fusion charts 实时展现后台进度,本文只实现简单的有一个任务进度展示的情况。实际上 Linear Gauge 非常强大,可以支持多个指示标志,本文就不做考虑,只考虑实现一个简单的进度指示标志的情况。
完成后的效果如下图,用户选择一个Zip文件包进行上传,JS完成后台上传、解压缩与文件处理的操作。使用FusionCharts进行图形化的进度显示。
其中文件上传使用了jQuery的AjaxUpload插件,文件上传部分的JS代码如下:
文件上传后,使用JS记录下上传的文件以及Zip包内文件的数量,然后开始使用JS控制逐个文件的提交。这一部分处理的难点主要在于Zip的解压和进度控制。Zip的解压有PHP的ZipArchive类,可以很方便的获取Zip内的文件列表,以及指定读取某个文件。当获取了Zip文件包的列表数量之后,我就可以在前台使用JS控制逐个文件的读取。
最后就是整个过程的图形化界面显示,FusionCharts部分的代码如下:
FusionCharts设置了一个轮训间隔,不断地从后台查询数据。因为我的后台处理过程都是在领带的ajax请求中完成的,所以采取了一个折衷的办法,ajax请求完成后,将进度写入到cookie中,然后FusionCharts定时从cookie中读取进度来进行展示。
注:我使用的版本是Fusion Charts Suite XT
参考资料:
1、Fusion Charts Linear Gauge
2、AjaxFileUpload
3、实现jQuery的Ajax文件上传
4、jQuery Cookie
1、在ajax的数据交互中,如何获得后台的处理进度?
2、在前台界面中,如何使用图形化的方式展示后台处理进度?
关于第一个问题,不是本文的重点,简单说一下思路。因为HTTP协议实际上是无状态的协议,前台的请求提交给后台之后,一般情况下都是后台处理完成才会向前台返回处理结果。如果想前台展示处理进度,有三个方法:
一、使用flush()函数。PHP中提供了 flush() 和 ob_flush() 函数,允许用户将缓存的内容输出,但是如果在服务器端使用了gzip压缩,这种方法常常会失效。另外,这种办法实际上是一个流式的结果输出,在形式上很难有美观的展现。
二、使用JS控制任务进度。更好的办法我觉得应该是使用JS在前端来控制多个任务提交的顺序,从而在前端计算整体的进度来用图形化的方式展现。
三、后台实现进度记录,前台进行展现。也可以采用后端使用持久化数据来记录整体计划于当前进度,前端JS定时异步调用查询结果的方式来实现前端的展示。我在一个Zip文件包解压并处理的程序中采用了第二种方式,大家可以根据项目的具体情况来选用。
下面来说如何用 Fusion charts 实时展现后台进度,本文只实现简单的有一个任务进度展示的情况。实际上 Linear Gauge 非常强大,可以支持多个指示标志,本文就不做考虑,只考虑实现一个简单的进度指示标志的情况。
完成后的效果如下图,用户选择一个Zip文件包进行上传,JS完成后台上传、解压缩与文件处理的操作。使用FusionCharts进行图形化的进度显示。
其中文件上传使用了jQuery的AjaxUpload插件,文件上传部分的JS代码如下:
$('#userfile').AjaxFileUpload({ action: '/tool/uploadZip', onChange: function(filename){ //console.log("Change"); $('#tip_text').text("正在上传"); interval = window.setInterval(function() { var text = $("#tip_text").text(); if (text.length < 13) { $('#tip_text').text(text + "."); } else { $('#tip_text').text("正在上传"); } $.cookie('progress', 20); }, 200); //$("#tip_text").append("文件上传开始"); }, // secureuri: false, // fileElementId:'test', onSubmit: function(filename) { return true; }, onComplete: function(filename, response) { window.clearInterval(interval); $("#file_count").html( response.zip_info.file_list.length ); $("#tip_text").append("<br />文件上传完成,即将开始进行导入"); $.cookie('progress', 40); zip_import(response, 0, response.zip_info.file_list.length); } });
文件上传后,使用JS记录下上传的文件以及Zip包内文件的数量,然后开始使用JS控制逐个文件的提交。这一部分处理的难点主要在于Zip的解压和进度控制。Zip的解压有PHP的ZipArchive类,可以很方便的获取Zip内的文件列表,以及指定读取某个文件。当获取了Zip文件包的列表数量之后,我就可以在前台使用JS控制逐个文件的读取。
最后就是整个过程的图形化界面显示,FusionCharts部分的代码如下:
FusionCharts.ready(function(){ var fusioncharts = new FusionCharts({ type: 'hlineargauge', renderAt: 'realchart', id: 'realtime-chart', width: '400', height: '170', dataFormat: 'json', dataSource: { "chart": { "theme": "fint", "caption": "后台处理进度", "subcaption": "www.dcod.com", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0" }, "colorRange": { "color": [{ "minValue": "0", "maxValue": "35", "label": "文件上传", }, { "minValue": "35", "maxValue": "100", "label": "解压与保存", }] }, "pointers": { "pointer": [{ "value": "0" }] }, "trendPoints": { "point": [ //Trendpoint { "startValue": "70", "displayValue": " ", "dashed": "1", "showValues": "0" }, { "startValue": "85", "displayValue": " ", "dashed": "1", "showValues": "0" }, //Trendzone { "startValue": "70", "endValue": "85", "displayValue": " ", "alpha": "40" } ] } }, "events": { "rendered":function(evtObj, argObj){ evtObj.sender.intervalVar = setInterval(function(){ console.log("Txt x"); //定时获取服务端的数据 var prcnt = $.cookie('progress'); //将数据提交给图表 FusionCharts.items["realtime-chart"].feedData("value=" + prcnt); }, 5000); }, "disposed":function(evtObj, argObj){ console.log('disposed'); clearInterval(evtObj.sender.intervalVar); } } } ); fusioncharts.render(); });
FusionCharts设置了一个轮训间隔,不断地从后台查询数据。因为我的后台处理过程都是在领带的ajax请求中完成的,所以采取了一个折衷的办法,ajax请求完成后,将进度写入到cookie中,然后FusionCharts定时从cookie中读取进度来进行展示。
注:我使用的版本是Fusion Charts Suite XT
参考资料:
1、Fusion Charts Linear Gauge
2、AjaxFileUpload
3、实现jQuery的Ajax文件上传
4、jQuery Cookie
相关文章推荐
- 使用重写的$.ajax()实现后台处理进度显示(gif)
- 通过Handler实现先显示进度条,后台进行数据处理,处理结束后取消进度条
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- python pyqt4 PyQT实现了使用QThread后台处理数据
- JSP_strut2架构下前台使用canvas对接收到的后台数据画图的一种实现
- Web页面实现后台数据处理进度与剩余时间的显示
- Django在前台使用富文本model,实现后台能取得到页面富文本框中的值
- 关于使用JS前台加密、JAVA后台解密的RSA实现,RSA加密和签名
- EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互
- PHP实现前台同步显示后台任务进度
- 关于使用JS前台加密、JAVA后台解密的RSA实现,RSA加密和签名
- PHP实现前台同步显示后台任务进度
- 注册时候使用 RSA 实现前台对密码加密和后台解密
- ASP.NET中使用JSON方便实现前台与后台的数据交换
- CABasicAnimation 使用的细节(跳转,后台,前台)处理
- VS2005(C#)使用AjaxPro.2实现把前台页面的值传到后台代码中
- Rails中实现后台处理:Redis, Sidekiq 使用总结
- 通过Handler实现先显示进度条,后台进行数据处理,处理结束后取消进度条
- .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
- 使用struts2框架来实现前台与后台的交互