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

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

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