淺析AJAX實例：動態進度條_AJAX教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      推薦：如何解決Ajax中文亂碼問題
      網上有很多解決這個問題的方法，試了一下都不好用，自己就對于這些方法測試了一下，然后逐個排除無用的設置，最后得到了最簡單的方案。 js代碼： 得到XmlHttpRequest的類 Code 1function HttpRequest() 2{ 3 //取得Request對象 4 this.Request=function(){ 5
      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代碼
      首先usingusing 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
      }
       
      分享：AJAX教程之AJAX的jQuery實現入門(一)
      Ajax在網上已經叫喊了好幾年了, 但是還是有很多像我這樣的新手沒掌握它, 像這樣能改善交互體驗的技術不會用真是很遺憾呢. 所以我就把我學到的記錄下來,供高手指正,新手共勉. 首先,稍微掃掃盲: AJAX = Asynchronous JavaScript And XML , 這里有三個關鍵詞: A
      


      

      


      來源：模板無憂//所屬分類：AJAX教程/更新時間：2010-02-03


      


      



      


      



      相關AJAX教程：