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

跟我学AJAX技术——如何应用AJAX技术实现实时任务进度条的Web应用示例（第一部分） Web实时任务进度条概述 1、应用的技术背景 许多Web应用、企业应用涉及到长时间的操作，例如复杂的数据库查询或繁重的XML处理等，虽然这些任务主要由数据库系统或中间件完成，但任务执行的结果仍旧要借助JSP才能发送给用户。 当JSP调用一个必须长时间运行的操作，且该操作的结果不能（在服务器端）缓冲，用户每次请求该页面时都必须长时间等待。很多时候，用户会失去耐心，接着尝试点击浏览器的刷新按钮，最终失望地离开。 （1）应用进度条显示当前的工作状态 为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。为了达到这个效果，通常做法有两大类：简单等待和真实的处理进度。 1）简单等待这种做法之所以说简单，就是在用法发送了处理命令后，立即在页面的某个地方替换一个waiting的图片，比如一个转圈的GIF，一张Loading的图片等，这种不称之为进度条，顶多就是个等待条，但通常还是可以给用户带来那么点满足，在业务量不大的情况下，也够用了。 2）实时显示服务器处理的进度，这在一些长时间的请求中尤其重要，比如上传文件、发送邮件、批量处理数据。 （2）要解决实现实时显示服务器处理的进度，需要解决下面几个问题 服务器如何在处理一部分数据后传递部分response到浏览器 浏览器如何能处理服务器传递过来部分数据，并保持HTTP连接直到处理完全完毕 2、应用AJAX + JSP 技术实现 用户在前端浏览器页面中点击某个操作的按钮后，利用JavaScript并借助于AJAX技术提交JSP页面到后台服务器端进行处理，并同时应用AJAX定时调用显示一个百分比的实时进度条。 比如在登陆Gmail邮件系统时，Gmail系统会显示一个实时进度条，显示当前加载的进度。注意不是文件上传，而是单个文件下载的监控。 通常加载html时，并不是一段接着一段下载并加载，而是，等整个文件下载完成后再加载执行，这样就没有实时监控下载进度的效果了。 Gmail并没有使用静态资源供客户端下载，而是通过类似Servlet技术返回HTML页面。但这里应用到了一点服务器“推”的技术，就是在每个/script标签结束处调用PrintWriter.flush(), 在该方法之后，服务器端输出流会马上推送至客服端，但并没有关闭输出流，下次还可以再次调用flush(), 这样就可实现一段接一段将资源推送至客户端，实现进度监控了，而不是像目前WebQQ一样模拟从0% ，然后等待，然后突然升到100%完成。 任务进度条的客户端页面及JavaScript脚本 1、延时页面载入进度条（非实时任务进度状态指示，而只是延时等待） （1）示例功能的实现代码示例 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb18030 / title页面载入进度条（进度条效果实现代码,有助于缓解页面显示慢的页面，给用户一个等待时间的效果）/title style #displayLoadingChartTextID{ font-family:Arial; font-weight:bolder; color:black; background-color:#EAEAEA; padding:0px; border-style:none; } #displayPercentValueTextID{ font-family:Arial; color:black; text-align:center; border-width:medium; border-style:none; } /style /head body div span id=displayLoadingChartTextID /span span id=displayPercentValueTextID/span /div /body script type=text/javascript language=javascript var barConterValue = 0 var currentTotalBarAmount =; function loadin