淺析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教程