WEB應(yīng)用程序中的進(jìn)度條

2024-07-21 02:25:22

字體：大中小

供稿：網(wǎng)友

web應(yīng)用程序中的進(jìn)度條

julien cheyssial 寫作于2003/10/01

joise.li翻譯并修改于2004-4-2

寫在前面：

原文是我在需要使用進(jìn)度條時找到的一篇文章，講解詳細(xì)并附有實(shí)例。我在原文的基礎(chǔ)上加上了自己的修改：增加了線程處理并且將進(jìn)度條的使用放到了子線程中處理。這是我第一次翻譯文章，敬請各位指正。原文見于http://www.myblogroll.com/articles/progressbar/，請對照參考。

誰說在web應(yīng)用程序中不能使用進(jìn)度條？我認(rèn)為能。本文將介紹在服務(wù)端長時間的處理過程中通過使用進(jìn)度條提高web應(yīng)用程序的質(zhì)量和界面友好度。事實(shí)上，如果一個web應(yīng)用程序一直運(yùn)行在無狀態(tài)和無連接狀態(tài)下，用戶很容易認(rèn)為事情已經(jīng)結(jié)束了。但是本文介紹的不使用任何activex控件和亂七八糟的java applets的進(jìn)度條將有助于改善這點(diǎn)。

在一個web應(yīng)用程序中能夠使用進(jìn)度條的關(guān)鍵是瀏覽器有能力在所有頁面加載完之前顯示頁面。我們將使用這點(diǎn)特性來有步驟的生成并且發(fā)送頁面給客戶端。首先，我們將使用html生成一個完美并且漂亮的進(jìn)度條，然后我們動態(tài)的發(fā)送javascript塊以更新進(jìn)度條。當(dāng)然，以上的所有內(nèi)容都是在斷開用戶請求之前實(shí)現(xiàn)的。在c#中，response.write允許我們加入自定義內(nèi)容到緩存區(qū)并且response.fluse()允許我們把所有緩存區(qū)中的內(nèi)容發(fā)送到用戶的瀏覽器上。

第一步：

第一步讓我們來建立一個進(jìn)度條頁面，我們使用progressbar.aspx。如上所述，我們逐步生成并發(fā)送頁面到客戶端。首先，我們將使用html生成一個完美并且漂亮的進(jìn)度條。所需要的html代碼我們可以從事先定義的progressbar.htm中獲取，所以，第一件事情是裝載它并且將數(shù)據(jù)流發(fā)送到客戶端的瀏覽器，在progressbar.aspx的page_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.htm的html代碼，（譯注：作者把腳本函數(shù)放在了另外一個js文件中，但我嫌麻煩就也放在了這個靜態(tài)頁面中了）

<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 = "數(shù)據(jù)讀取" + pgbvalue + "%，請稍候...";

}

if ( pgbvalue == 100 )

window.status = "數(shù)據(jù)讀取已經(jīng)完成";

}

</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>

對應(yīng)的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);

}

第二步：

現(xiàn)在我們可以開始更新進(jìn)度條了，這是十分重要的部分，因?yàn)檫@部分可以令你的進(jìn)度條活起來。（譯注，原來是使用隨機(jī)的增加15次直到加載完畢，本文僅使用從1-100的勻速增加，以下內(nèi)容非譯）

首先我們新開一個線程，在page_load 中加入以下代碼：

thread thread = new thread( new threadstart(threadproc) );

thread.start();

thread.join();

在類中增加以下函數(shù)：

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循環(huán)，在i每增加一次的情況下往客戶端發(fā)送一段腳本<script>setpgb('pgbmain','{0}');</script>，其中的{0}會被相應(yīng)的i替換，而該段腳本會調(diào)用預(yù)先寫好的javascript函數(shù)setpgb，更改頁面的進(jìn)度條狀態(tài)。

最大的網(wǎng)站源碼資源下載站，

上一篇：Developing An Image Upload Web Service

下一篇：探討一下分布式結(jié)構(gòu)在網(wǎng)絡(luò)應(yīng)用中的種種好處