需要引入的js文件是：jquery.progressbar.min.js，当然，jquery是必须的，这里引入jquery.min.js，Ajax使用的是prototype，所以引入prototype_mini.js。

这里，假设有一个分析任务时间很长，需要在网页上用进度条来展示分析进度。实现上，web服务端需要唯一标识这个任务，这里使用生成的uuid来唯一标识任务。

 
  
  1. <% 
  2.     String uuid4analyze = java.util.UUID.randomUUID().toString();  
  3. %> 
  4.      
  5. <script> 
  6.             var progress_key_analyze = '<%= uuid4analyze %>'; 
  7.                      
  8.             // this sets up the progress bar 
  9.             jQuery(document).ready(function() { 
  10.                 jQuery("#analyzeprogressbar").progressBar();
  11.  // 一开始先隐藏进度条 
  12.                 jQuery("#analyzeprogressbar").hide(); 
  13.             }); 
  14.              
  15.   
  16.             // fades in the progress bar and starts polling the upload progress after 1.5seconds 
  17.             function beginAnalyze() { 
  18.                 // uses ajax to poll the uploadprogress.php page with the id 
  19.                 // deserializes the json string, and computes the percentage (integer) 
  20.                 // update the jQuery progress bar 
  21.                 // sets a timer for the next poll in 750ms 
  22.                 jQuery("#analyzeprogressbar").fadeIn();  
  23.                 
  24.  // 启动定时刷新进度任务 
  25.                 var i = setInterval(function() {  
  26.                  
  27.                     // 可恶啊，jQuery.ajax或者jQuery.getJSON在这里全部失灵了！！！ 
  28.                     new Ajax.Request("analyzeSrcStructure.action",  
  29.                     {  
  30.                         method:'POST', parameters: "uuid=" + progress_key_analyze + "&profileId=${fiBean.appProfile.id}", 
  31.                         onComplete: function(httpRequest){ 
  32.                             var jsonText = httpRequest.responseText; 
  33.                             var data = eval('(' + jsonText + ')'); 
  34.                              
  35.                             if (data == null) { 
  36.                                 clearInterval(i); 
  37.                                 
  38. // 触发其他任务，譬如刷新一棵树
  39.                                 //jQuery('#src_structure_tree').jstree('refresh',-1); 
  40.                                 return; 
  41.                             } 
  42.           
  43.                             var percentage = Math.floor(100 * parseInt(data.analyzed) / parseInt(data.total)); 
  44.                              
  45.                             if (parseInt(data.analyzed) == 100) 
  46.                             { 
  47.                                 jQuery("#analyzeprogressbar").progressBar(100); 
  48.                                 // 显示任务完成的提示信息
  49.  jQuery("#analyzeinfo").html(data.currCls); 
  50.                                 clearInterval(i); 
  51.                                 jQuery('#src_structure_tree').jstree('refresh',-1);  
  52.                                 return; 
  53.                             } 
  54.                             else 
  55.                             { 
  56.                                 jQuery("#analyzeprogressbar").progressBar(percentage); 
  57.                                 // 显示任务进度的提示信息
  58.  jQuery("#analyzeinfo").html(data.currCls); 
  59.                             } 
  60.                         } 
  61.                     }); 
  62.                 }, 1500); 
  63.             } 
 
  
核心代码就是如上所示的代码。当然，服务端需要传递带进度值的json格式的数据，还有，jquery的进度条其实是span:
 
  
<span class="progressbar" id="analyzeprogressbar"> 
 
  
这里有一个问题，挺蹊跷的。最初的实现尝试了采用jQuery.ajax和jQuery.getJSON来异步获取进度信息，实测发现，进度条在更新了十次左右，进度就不再发生变化，非常奇怪的事情，查阅很多网页无果。因为工程中有使用prototype.js，结果用它的ajax提交请求，发现没有问题。因为工程进度，这个问题没有深究，只是觉得有些蹊跷，在此特别记录一下，如有同行也遇到过类似的问题，欢迎指教。