AJAX进度条的研究


Posted on October 12, 2007


 

两个小时的时间,在昨天的基础上设计了一个进度条的显示,自我感觉还不错,相信自己离精通AJAX不远了

  <div id="all" style="width:600px; height:20px; border : 1px solid blue;">
   <div id="change" style="background:blue; width:0; text-align:center;">0%</div>
  </div>
  <div id="result">Result Here</div>
  <input id="add" type="button"  onclick="add()" value="添加记录"/>
  <input id="Button1" type="button"  onclick="timeout()" value="删除所有记录"/>

  <script type="text/javascript"> 
        var XmlHttp=new ActiveXObject("Microsoft.XMLhttp"); 
        var i = 0;
        var allcount=0;
        function add()
        {       
   XmlHttp.Open("POST","jd.aspx?op=add");
   XmlHttp.send(null);
   XmlHttp.onreadystatechange=ServerProcess_first;
        }
       
  function ServerProcess_first()
  {
   if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
   {
    document.getElementById("result").innerHTML=XmlHttp.responsetext;
   }
  }
  
  function del()
  {
            var filename="jd.aspx?op=del";
   XmlHttp.Open("POST",filename);
   XmlHttp.send(null);
   XmlHttp.onreadystatechange=ServerProcess;
  }
  
  function ServerProcess()
  {
   if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
   {
               if(i<=allcount)
               {
    view(XmlHttp.responsetext);
    }
   }
  }
  
  function count()
  {
            var filename="jd.aspx?op=count";
   XmlHttp.Open("POST",filename);
   XmlHttp.send(null);
   XmlHttp.onreadystatechange=ServerProcess_count;
  }
  
  function ServerProcess_count()
  {
   if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
   {
    allcount = parseInt(XmlHttp.responsetext.substring(0,XmlHttp.responsetext.indexOf(" ")));    
   }
  }
  
  function timeout()
  {
          count();
          window.setInterval(del,200);
  }

  function view(text)
  {
  if(text.substring(0,1)=="1"&&i<=allcount)
  {
  i++;
  document.getElementById("change").style.width=parseInt(i/allcount*100)+'%';
  document.getElementById("change").innerHTML=parseInt(i/allcount*100)+'%';
  document.getElementById("result").innerHTML=i+"/"+allcount;
  }
  }
  </script>

 

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;

public partial class jd : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["op"] != null)
        {
            string op = Request.QueryString["op"].ToString();
            if (op == "add")
            {
                string strSql;
                //连接数据库的语句
                string strConnection = "Provider=Microsoft.Jet.OleDb.4.0;Data Source=";
                strConnection += Server.MapPath("jd.mdb");
                OleDbConnection conn = new OleDbConnection(strConnection);
                conn.Open();
                //选择数据
                strSql = "INSERT INTO test ([blog_title]) VALUES ('这是一个用来测试AJAX程序的数据!')";//sql语句
                for (int i = 0; i < 100; i++)
                {
                    OleDbCommand cmd = new OleDbCommand(strSql, conn);
                    cmd.ExecuteNonQuery();
                    cmd.Dispose();
                }
                conn.Close();
                Response.Write("已增加1000条记录!");
            }
            else if (op == "del")
            {
                string strSql;
                //连接数据库的语句
                string strConnection = "Provider=Microsoft.Jet.OleDb.4.0;Data Source=";
                strConnection += Server.MapPath("jd.mdb");
                OleDbConnection conn = new OleDbConnection(strConnection);
                conn.Open();
                //选择数据
                strSql = "delete from test where (id in (select top 1 id from test order by id))";
                OleDbCommand cmd = new OleDbCommand(strSql, conn);
                cmd.ExecuteNonQuery();
                cmd.Dispose();
                conn.Close();
                Response.Write("1");
            }else if (op == "count")
            {
                string strSql;
                //连接数据库的语句
                string strConnection = "Provider=Microsoft.Jet.OleDb.4.0;Data Source=";
                strConnection += Server.MapPath("jd.mdb");
                OleDbConnection conn = new OleDbConnection(strConnection);
                conn.Open();
                //选择数据
                strSql = "select count(*) from test";
                OleDbCommand cmd = new OleDbCommand(strSql, conn);
                string result = cmd.ExecuteScalar().ToString();
                cmd.Dispose();
                conn.Close();
                Response.Write(result);
            }
        }
    }
}

 

 

 


标签:N/A

 

在线学习答案查询入口
微信扫码联系
微信扫码联系