AJAX做一个动态进度条

1.建立进度条html页面progressbar.htm

< script  language ="javascript" >  

function  setPgb(pgbID, pgbValue) 
{ 
if  ( pgbValue  <=   100  ) 
{ 
// debugger;
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  =   " 数据读取已经完成 " ; 
proBar.style.display = " none " ;
Table1.style.display = " none " ;
}
} 

</ script >
< html >
< head >
< link  rel ="stylesheet"  type ="text/css"  href ="common.css"   />
</ head >
< body  topmargin ="0"  leftmargin ="0" >
< table  width ="100%"  height ="100%"  ID ="Table1"  runat =server >
< 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 >

2.建立样式common.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) ;  
}

3.建立测试页面
3.1html代码

< HTML >
< HEAD >
< title > progressbar </ title >
< meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
< meta  name ="CODE_LANGUAGE"  Content ="C#" >
< meta  name ="vs_defaultClientScript"  content ="JavaScript" >
< meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
</ HEAD >
< body  MS_POSITIONING ="GridLayout" >
< form  id ="Form1"  method ="post"  runat ="server" >  
<% = fixedHeader() %>
</ form >
</ body >
</ HTML >

3.2cs代码
首先using

using  System.Threading;
using  System.IO;
using  System.Text;然后添加代码
public   class  progressbar : System.Web.UI.Page
{
Page_Load #region  Page_Load
private   void  Page_Load( object  sender, System.EventArgs e)
{
if ( ! Page.IsPostBack)
{
string  strFileName  = Server.MapPath( " progressbar.htm "  ); 
StreamReader sr  =   new  StreamReader( strFileName, System.Text.Encoding.Default ); 
string  strHtml  =  sr.ReadToEnd(); 
Response.Write( strHtml ); 
sr.Close(); 
Response.Flush(); 
Thread thread  =   new  Thread( new  ThreadStart(ThreadProc)); 
thread.Start(); 
LoadData(); // load数据 
thread.Join();
}
}
#endregion

fixedHeader #region  fixedHeader
protected   string  fixedHeader()
{ 
StringBuilder s = new  StringBuilder();
s.Append( @" <table width='100%' border='1' cellspacing='0' style='MARGIN-TOP:-2px'> " );
s.Append( @" <TR class='fixedHeaderTr' style='BACKGROUND:navy;COLOR:white'> " );
s.Append( @" <TD nowrap>Header A</TD> " );
s.Append( @" <TD nowrap>Header B</TD> " );
s.Append( @" <TD nowrap>Header C</TD> " );
s.Append( @" </TR> " );
for ( int  m = 0 ;m < 100 ;m ++ )
{
s.Append( @" <TR> " );
s.Append( @" <TD>A " ).Append(m).Append( " </TD> " );
s.Append( @" <TD>B " ).Append(m).Append( " </TD> " );
s.Append( @" <TD>C " ).Append(m).Append( " </TD> " );
s.Append( @" </TR> " );
} 
s.Append( @" </table> " ); 
return  s.ToString(); 
}
#endregion

ThreadProc #region  ThreadProc
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(); 
} 
}
#endregion

LoadData #region  LoadData
private   void  LoadData()
{
for ( int  m = 0 ;m < 90000 ;m ++ )
{
for ( int  i = 0 ;i < 90000 ;i ++ )
{

} 
} 
}
#endregion

Web Form Designer generated code #region  Web Form Designer generated code
override   protected   void  OnInit(EventArgs e)
{
//
//  CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base .OnInit(e);
}

/**/ ///   <summary>
///  Required method for Designer support - do not modify
///  the contents of this method with the code editor.
///   </summary>
private   void  InitializeComponent()
{ 
this .Load  +=   new  System.EventHandler( this .Page_Load);
}
#endregion
}