jquery.progressbar的使用

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

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

<%
    String uuid4analyze = java.util.UUID.randomUUID().toString();
%>

<script>
            var progress_key_analyze = '<%= uuid4analyze %>';

            // this sets up the progress bar
            jQuery(document).ready(function() {
                jQuery("#analyzeprogressbar").progressBar();
 // 一开始先隐藏进度条
                jQuery("#analyzeprogressbar").hide();
            });


            // fades in the progress bar and starts polling the upload progress after 1.5seconds
            function beginAnalyze() {
                // uses ajax to poll the uploadprogress.php page with the id
                // deserializes the json string, and computes the percentage (integer)
                // update the jQuery progress bar
                // sets a timer for the next poll in 750ms
                jQuery("#analyzeprogressbar").fadeIn();

 // 启动定时刷新进度任务
                var i = setInterval(function() {

                    // 可恶啊，jQuery.ajax或者jQuery.getJSON在这里全部失灵了！！！
                    new Ajax.Request("analyzeSrcStructure.action",
                    {
                        method:'POST', parameters: "uuid=" + progress_key_analyze + "&profileId=${fiBean.appProfile.id}",
                        onComplete: function(httpRequest){
                            var jsonText = httpRequest.responseText;
                            var data = eval('(' + jsonText + ')');

                            if (data == null) {
                                clearInterval(i);

// 触发其他任务，譬如刷新一棵树
                                //jQuery('#src_structure_tree').jstree('refresh',-1);
                                return;
                            }

                            var percentage = Math.floor(100 * parseInt(data.analyzed) / parseInt(data.total));

                            if (parseInt(data.analyzed) == 100)
                            {
                                jQuery("#analyzeprogressbar").progressBar(100);
                                // 显示任务完成的提示信息
 jQuery("#analyzeinfo").html(data.currCls);
                                clearInterval(i);
                                jQuery('#src_structure_tree').jstree('refresh',-1);
                                return;
                            }
                            else
                            {
                                jQuery("#analyzeprogressbar").progressBar(percentage);
                                // 显示任务进度的提示信息
 jQuery("#analyzeinfo").html(data.currCls);
                            }
                        }
                    });
                }, 1500);
            }

核心代码就是如上所示的代码。当然，服务端需要传递带进度值的json格式的数据，还有，jquery的进度条其实是span:

<span class="progressbar" id="analyzeprogressbar"> 

这里有一个问题，挺蹊跷的。最初的实现尝试了采用jQuery.ajax和jQuery.getJSON来异步获取进度信息，实测发现，进度条在更新了十次左右，进度就不再发生变化，非常奇怪的事情，查阅很多网页无果。因为工程中有使用prototype.js，结果用它的ajax提交请求，发现没有问题。因为工程进度，这个问题没有深究，只是觉得有些蹊跷，在此特别记录一下，如有同行也遇到过类似的问题，欢迎指教。