Web 实时进度条,真正的实时的代码执行进度条

有时候我们的web程序要在后台运行一个比较费时的任务,以往我们都是在天台弄个假的gif图片在哪里转转,骗骗用户。一般很少人做成实时的进度条。最近我又收到一个在后台生成文件的任务,后台生成文件,查询数据库N次,比较费时,所以我就想做一个实时的进度条给用户展示但前文件生成到哪一步了。这个是我项目的需求,根据这个需求,我自己先写了一个实时进度条的demo。思路如下:
  1.首先,我用一个ajax发往后台(异步的),去执行一个耗时比较大的任务,比如我的需求,去查询n次数据库然后将结果写成一个word或者是excel等文件。然后将这个大任务我们手动给它分段,分成多少段这个可以自定义,同时有一个变量用来保存代码执行到哪一段了,每执行一段,这个变量的值相应的增加。(这个里面的增加逻辑,可以自己控制),我这个demo里面使用了随机数,以至于前台进度条看起来不那么假(每次冲的进度可能会不一样)。这个变量值保存在一个全局的Dictionary里面(我暂时还木有找到更好的保存方法,希望有高手给出更好的存储方案),用一个guid来作为键值,这个guid是页面一加载就生成了的,一直保存在前台js变量里面。

      2.用循环 想后台发送一个ajax异步请求,不断去请求 那个保存进度条值的变量。然后回来改变div的宽度(这里我做进度条是用的两个div一个是外面的带边框的,另一个是里面的带背景色的)。

基本就是这个思路。代码附上(我用的asp.net MVC 3),请高手给出更好的建议。

  Demo:/Files/joey0210/WebProgress.rar

posted on 2013-03-27 15:49  Joey_zy0210  阅读(5797)  评论(4编辑  收藏  举报

导航