跟我学ajax技术——如何应用ajax技术实现实时任务进度条的web应用示例（第一部分）

《跟我学ajax技术——如何应用ajax技术实现实时任务进度条的web应用示例（第一部分）》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1跟我学AJAX技术——如何应用AJAX技术实现实时任务进度条的Web应用示例（第一部分）1.1.1Web实时任务进度条概述1、应用的技术背景许多Web应用、企业应用涉及到长时间的操作，例如复杂的数据库查询或繁重的XML处理等，虽然这些任务主要由数据库系统或中间件完成，但任务执行的结果仍旧要借助JSP才能发送给用户。当JSP调用一个必须长时间运行的操作，且该操作的结果不能（在服务器端）缓冲，用户每次请求该页面时都必须长时间等待。很多时候，用户会失去耐心，接着尝试点击浏览器的刷新按钮，最终失望地离开。（1

2、）应用进度条显示当前的工作状态为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。为了达到这个效果，通常做法有两大类：简单等待和真实的处理进度。1）简单等待这种做法之所以说简单，就是在用法发送了处理命令后，立即在页面的某个地方替换一个waiting的图片，比如一个转圈的GIF，一张Loading的图片等，这种不称之为进度条，顶多就是个等待条，但通常还是可以给用户带来那么点满足，在业务量不大的情况下，也够用了。2）实时显示服务器处理的进度，这在一些长时间的请求中尤其重要，比

3、如上传文件、发送邮件、批量处理数据。（2）要解决实现实时显示服务器处理的进度，需要解决下面几个问题1)服务器如何在处理一部分数据后传递部分response到浏览器2)浏览器如何能处理服务器传递过来部分数据，并保持HTTP连接直到处理完全完毕2、应用AJAX+JSP技术实现15杨教授工作室，版权所有，盗版必究，15/15页杨教授工作室精心创作的优秀程序员职业提升必读系列资料用户在前端浏览器页面中点击某个操作的按钮后，利用JavaScript并借助于AJAX技术提交JSP页面到后台服务器端进行处理，并同时应用AJAX定时调用显示一个百分比的实时进度条。比如在登陆

4、Gmail邮件系统时，Gmail系统会显示一个实时进度条，显示当前加载的进度。注意不是文件上传，而是单个文件下载的监控。通常加载html时，并不是一段接着一段下载并加载，而是，等整个文件下载完成后再加载执行，这样就没有实时监控下载进度的效果了。Gmail并没有使用静态资源供客户端下载，而是通过类似Servlet技术返回HTML页面。但这里应用到了一点服务器“推”的技术，就是在每个标签结束处调用PrintWriter.flush(),在该方法之后，服务器端输出流会马上推送至客服端，但并没有关闭输出流，下次还可以再次调用flush(),这样就可

5、实现一段接一段将资源推送至客户端，实现进度监控了，而不是像目前WebQQ一样模拟从0%，然后等待，然后突然升到100%完成。1.1.1任务进度条的客户端页面及JavaScript脚本1、延时页面载入进度条（非实时任务进度状态指示，而只是延时等待）（1）示例功能的实现代码示例

6、999/xhtml">