shaokun305的专栏

做J2EE一流架构师 E-Mail：shaokun305@gmail.com

用户操作
[即时聊天] [发私信] [加为好友]
陈少坤ID：shaokun305
共139530次访问，排名578好友0人，关注者1人
shaokun305的文章
原创 155 篇
翻译 0 篇
转载 23 篇
评论 227 篇
shaokun305的公告
留言板 New
这里是我一个温馨的港湾,记录下我的生活成长和技术成长的经历，随着岁月的流逝,这里将是我的一个最美丽的回忆.
最近评论
wangbin3961：果然有效！
jinxinzhang：应该加catalina.sh里面吧

你可以在页面打印出内存看看，效果
miracle9i：非常详细 谢谢
wadefelix：当被记者问及是不是现在房地产价格太贵，已经让老百姓买不起时，汪光焘解释说，如果现在房子没有销售了，“你这个结论是可以的”，但现在还有人买，所以这个结论“不好说”。(郭少峰）
///
这样的话都敢说，这就是在为房地产商撑腰嘛，恳请总理把他撤了。
guojingDua：炒股票。买基金这篇文章怎么打不开呀。。。
文章分类
收藏
相册
稿笑图库
美女
java相关站点
CSDN
java世界
java研究组织
java解道
与java共舞
中国java
深入struts1.1
朋友的友情连接
http://blog.csdn.net/asklxf/
lxgljj
同事老朱的博客
戈壁草的博客
老康得网站
存档
软件项目交易
订阅我的博客
XML聚合  FeedSky
订阅到鲜果
订阅到Google
订阅到抓虾
订阅到BlogLines
订阅到Yahoo
订阅到GouGou
订阅到飞鸽
订阅到Rojo
订阅到newsgator
订阅到netvibes

原创 BS网页中实现一个进度条progressBar收藏

新一篇: 股市心经 | 旧一篇: getOutputStream() has already been called for this response问题的解决

早上看到了Eclipse的帮助页面 有一个不错的进度条,所以很感兴趣.右键看了一下,原来就是用了个div的样式,然后异步请求进度处理信息.把处理的进度信息实时反应到页面上.

原理明白了.代码很简单.2个页面.一个负责显示,一个是异步处理页面.

1.progressBar.jsp

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script language="JavaScript">        

function refresh() 
{ 
   var nowNum=document.getElementById("nowNum").value;
    progress_request_post(nowNum);
    //window.location.replace("progressDo.jsp?nowNum="+nowNum);
    if(nowNum<100)
    setTimeout('refresh()', 500);
}

function progress_request_post(nowNum) {//初始化、指定处理函数、发送请求的函数
        http_request = false;
        var url='<%=basePath%>'+'progressDo.jsp?nowNum='+nowNum;
        //alert("wwwwwwwwww"+encodeURI(url));
        
        //开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest) { //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {//设置MiME类别
                http_request.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) { // IE浏览器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) { // 异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
        }
        http_request.onreadystatechange = processRequest_ok;
        // 
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("POST",encodeURI(url), true);
        http_request.send(null);
    }
   // 处理返回信息的函数

   // 处理返回信息的函数
    function processRequest_ok()
     {
        if (http_request.readyState == 4)
         { // 判断对象状态
         //alert("444444444!!");
        ///  popinfo(1);
            if (http_request.status == 200)
             { // 信息已经成功返回，开始处理信息
                 if((http_request.responseText)!=null&&(http_request.responseText).indexOf("false")>=0){        
                     alert("返回失败");     
                     //objimg.innerHTML=" ";
                  }
                  else if((http_request.responseText)!=null&&(http_request.responseText).indexOf("true")>=0){
                  //alert(http_request.responseText);
                 var index= http_request.responseText.indexOf("nowNum=");
                 var endIndex= http_request.responseText.indexOf("===");
                 if(index!=-1){
                     var nowNum=http_request.responseText.substring(index+7,endIndex);
                 //alert(nowNum);
                     document.getElementById("divProgress").style.width=nowNum+'px';
                     document.getElementById("progressValue").innerHTML=nowNum+'%  完成';
                    document.getElementById("nowNum").value=nowNum;
                   }
                  
                  
                    
                       
                  }
              // alert("200!!");
             }
            else 
             { //页面不正常
               // alert("服务器错误!!");
              //objimg.innerHTML=" ";
             }
        }
     }


</script>
</head>


<body dir="ltr">
<CENTER>
<input type=hidden  name="nowNum" id="nowNum" value=1 >
<TABLE BORDER='0' id="progressTable">
    <TR><TD>正在建立索引...</TD></TR>
    <TR><TD ALIGN='LEFT'>
        <DIV STYLE='width:100px;height:16px;border:1px solid ThreeDShadow;'>
            <DIV ID='divProgress' STYLE='width:0px;height:100%;background-color:Highlight'></DIV>
        </DIV>
    </TD></TR>
    <TR><TD><div id="progressValue">0% 完成</div></TD></TR>
    <TR><TD><br>对联机信息建立索引时请稍候。此过程将只发生一次。</TD></TR>
</TABLE>
</CENTER>
<script language='JavaScript'>
setTimeout('refresh()', 1000);
</script>
</body>
</html>

 

 2.progressDo.jsp

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:directive.page import="java.io.OutputStream"/>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";

    int nowNum = Integer.parseInt(request.getParameter("nowNum"));

    int count = 100;
    Random random=new Random();
    

    if (nowNum < 100)
        nowNum += random.nextInt(10);;
    if(nowNum>100)
        nowNum=100;
//System.out.println("nowNum="+result);
    OutputStream os=response.getOutputStream();
    os.write(new String("true   "+"nowNum=" + nowNum+"===").getBytes());
    os.flush();
    os.close();
    out.clear();
    out = pageContext.pushBody();
    //response.getOutputStream().close();
%>

 

在实际开发中可以根据需要修改第一个页面中的进度条颜色和样式.可以修改第2个页面中的对进度处理的百分比的算法返回.

发表于 @ 2007年11月16日 14:07:00|评论(loading...)|编辑

新一篇: 股市心经 | 旧一篇: getOutputStream() has already been called for this response问题的解决

评论：没有评论。
发表评论  


当前用户设置只有注册用户才能发表评论。如果你没有登录，请点击登录
Csdn Blog version 3.1a
Copyright © shaokun305