WEB应用程序中的进度条

翻译 2004年04月05日 23:34:00

WEB应用程序中的进度条

Julien Cheyssial 写作于2003/10/01

Joise.LI翻译并修改于2004-4-2

 

写在前面:

       原文是我在需要使用进度条时找到的一篇文章,讲解详细并附有实例。我在原文的基础上加上了自己的修改:增加了线程处理并且将进度条的使用放到了子线程中处理。这是我第一次翻译文章,敬请各位指正。原文见于http://www.myblogroll.com/Articles/progressbar/,请对照参考。

 

 

       谁说在WEB应用程序中不能使用进度条?我认为能。本文将介绍在服务端长时间的处理过程中通过使用进度条提高WEB应用程序的质量和界面友好度。事实上,如果一个WEB应用程序一直运行在无状态和无连接状态下,用户很容易认为事情已经结束了。但是本文介绍的不使用任何ActiveX控件和乱七八糟的Java Applets的进度条将有助于改善这点。

 

       在一个WEB应用程序中能够使用进度条的关键是浏览器有能力在所有页面加载完之前显示页面。我们将使用这点特性来有步骤的生成并且发送页面给客户端。首先,我们将使用HTML生成一个完美并且漂亮的进度条,然后我们动态的发送Javascript块以更新进度条。当然,以上的所有内容都是在断开用户请求之前实现的。在C#中,Response.Write允许我们加入自定义内容到缓存区并且Response.Fluse()允许我们把所有缓存区中的内容发送到用户的浏览器上。

 

第一步:

 

       第一步让我们来建立一个进度条页面,我们使用progressbar.aspx如上所述,我们逐步生成并发送页面到客户端。首先,我们将使用HTML生成一个完美并且漂亮的进度条。所需要的HTML代码我们可以从事先定义的progressbar.htm中获取,所以,第一件事情是装载它并且将数据流发送到客户端的浏览器,在progressbar.aspxPage_Load中加入如下几行:

            string strFileName = Path.Combine( Server.MapPath("./include"), "progressbar.htm" );

         StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default );

         string strHtml = sr.ReadToEnd();

         Response.Write( strHtml );

         sr.Close();

         Response.Flush();

     以下是progressbar.htmHTML代码,(译注:作者把脚本函数放在了另外一个js文件中,但我嫌麻烦就也放在了这个静态页面中了)

<script language="javascript">

function setPgb(pgbID, pgbValue)

{ 

     if ( pgbValue <= 100 )

     {

         if (lblObj = document.getElementById(pgbID+'_label'))

         {

              lblObj.innerHTML = pgbValue + '%'; // change the label value

         }

            

         if ( pgbObj = document.getElementById(pgbID) )

         {

              var divChild = pgbObj.children[0];

              pgbObj.children[0].style.width = pgbValue + "%";

         }

         window.status = "数据读取" + pgbValue + "%,请稍候...";

     }

    

     if ( pgbValue == 100 )

         window.status = "数据读取已经完成";

 

}

</script>

<html>

     <head>

         <link rel="stylesheet" type="text/css" href="style/common.css" />

     </head>

     <body bgColor="buttonface" topmargin="0" leftmargin="0">

          <table width="100%" height="100%" ID="Table1">

              <tr>

                   <td align="center" valign="middle">

                       <DIV class="bi-loading-status" id="proBar" style="DISPLAY: ; LEFT: 425px; TOP: 278px">

                            <DIV class="text" id="pgbMain_label" align="left"></DIV>

                            <DIV class="progress-bar" id="pgbMain" align="left">

                                 <DIV STYLE="WIDTH:10%"></DIV>

                            </DIV>

                       </DIV>

                   </td>

              </tr>

         </table>

     </body>

</html>

对应的CSS定义如下:

.bi-loading-status {

  /*position:   absolute;*/

  width:        150px;

  padding: 1px;

  overflow: hidden; 

}

 

.bi-loading-status .text {

  white-space:  nowrap;

  overflow:     hidden;

  width:             100%;

  text-overflow:     ellipsis;

  padding:      1px;

}

 

.bi-loading-status .progress-bar {

  border:       1px solid ThreeDShadow;

  background:   window;

  height:       10px;

  width:        100%;

  padding: 1px;

  overflow: hidden;

 

}

 

.bi-loading-status .progress-bar div {

  background:   Highlight;

  overflow: hidden;

  height:       100%;

  filter:       Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);

}

第二步:

 

现在我们可以开始更新进度条了,这是十分重要的部分,因为这部分可以令你的进度条活起来。(译注,原来是使用随机的增加15次直到加载完毕,本文仅使用从1-100的匀速增加,以下内容非译)

首先我们新开一个线程,在Page_Load   中加入以下代码:

         Thread thread = new Thread( new ThreadStart(ThreadProc) );

         thread.Start();

     thread.Join();

在类中增加以下函数:

         private void ThreadProc()

         {

              string strScript = "<script>setPgb('pgbMain','{0}');</script>";

              for ( int i = 0; i <= 100; i++ )

              {

                   System.Threading.Thread.Sleep(10);

                   Response.Write( string.Format( strScript, i ) );

                   Response.Flush();

              }

     }

注意,在以上代码中我们使用for循环,在i每增加一次的情况下往客户端发送一段脚本<script>setPgb('pgbMain','{0}');</script>其中的{0}会被相应的i替换,而该段脚本会调用预先写好的javascript函数setPgb更改页面的进度条状态。

 

总结:

       OK,以上就是实现WEB应用程序中的进度条的全部过程。有任何问题或者需要源码可以与我联系:joise@126.comhttp://joise.126.com/,谢谢阅读。

Java web 中实现 文件上传 进度条显示

请客官参考http://blog.itpub.net/30066956/viewspace-1775286/ 这一篇文章,来决定使用哪儿种,个人觉得使用uploadify更好更方便。感谢:http:/...
  • chengwangbaiko
  • chengwangbaiko
  • 2017年05月11日 14:43
  • 2235

Web应用程序和Web网站

在牛腩接近尾声调试代码时,有时调试半天也调不出个什么效果,无奈之举,先和源码对比一下,发现我的web层中每个网页下面多个aspx.designer.cs 文件(设计器文件),网上说有这个文件说明你这个...
  • u010097777
  • u010097777
  • 2014年10月30日 20:58
  • 5021

【web】js添加附件功能(显示进度条)——添加附件-demo01

使用input元素添加附件(显示进度条) 备注:此项目没有实现上传附件的功能...
  • michael_ouyang
  • michael_ouyang
  • 2016年09月20日 16:49
  • 1606

iOS 加载webView进度条

项目demo链接:https://github.com/MinLee6/WebViewLoadProgress 现在的app常常会嵌入不少的h5页面,这里参照微信显示web页面的方式,做了一个导航栏下...
  • Leemin_ios
  • Leemin_ios
  • 2017年01月16日 11:08
  • 1989

Java Web学习(1):Web应用程序与Web服务器

一Web应用程序         (1)什么是Web应用程序         应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序,也就是说这类程序一般独立运行。而B/S就是浏览 器端...
  • erlian1992
  • erlian1992
  • 2016年07月09日 21:45
  • 4743

Web应用程序开发原理

一、主机/终端模式(Mainframe/Terminal) 企业应用程序是围绕一个中心大型主机建立的,使用者一般通过只有一个屏幕、一个键盘和一根主机连接线的“哑终端”与主机的应用程序进行交互。例如:超...
  • yangtjh
  • yangtjh
  • 2015年07月27日 20:05
  • 1350

Web应用程序与Web网站及部署在IIS中

在Visual Studio可以创建 Web 应用程序项目或网站项目。通过选择 新建项目 或 打开项目 创建或打开一个 Web 应用程序项目在Visual Studio 文件 菜单。 通过选择 新建...
  • bigpudding24
  • bigpudding24
  • 2015年09月07日 22:19
  • 3603

Web应用程序与桌面应用程序的区别

webdelphi服务器网络internetaccess 如果都是用.net做的话,桌面程序需要开发服务器端和客户端两块程序,电脑都要安装.net framework,b/s形式的话,只用做服务...
  • zkn_CS_DN_2013
  • zkn_CS_DN_2013
  • 2014年01月06日 17:41
  • 3214

Java Web学习(4):徒手开发Web应用程序

一Tomcat服务器的目录结构        在开发Web应用程序之前有必要先来介绍一下Tomcat服务器的目录结构。        1)我们打开安装好的Tomcat服务器的安装目录,我的是:E:...
  • erlian1992
  • erlian1992
  • 2016年07月10日 18:03
  • 2383

11款常见的Web应用程序框架

11款常见的Web应用程序框架
  • YaoXTao
  • YaoXTao
  • 2014年09月13日 19:01
  • 1791
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WEB应用程序中的进度条
举报原因:
原因补充:

(最多只允许输入30个字)