白桦的天空

第一次的心动,永远的心痛!
  首页  :: 新随笔  :: 联系 :: 管理

用Ajax实现一个简单的进度条

Posted on 2008-06-05 13:26  白桦的天空  阅读(502)  评论(0编辑  收藏  举报

原理很简单,就是在针对某个操作可能很花时间的时候,能在浏览器有个提示
说是进度条,其实是个简单的数字显示,偷下懒了 ^_^

开工~~~~~~~~~~~~~
几个页面都写得很简单,能实现就好,:-)
三个页面:
P.htm 显示当前服务器进度的静态页面,提交ajax的页面
P.aspx 服务器操作页面,耗时比较长的页面
P1.aspx 获取当前(P.aspx)已完成进度结果的页面

P.htm
JS:
<script language="javascript" type="text/javascript">
        var _n = 0;
        var xmlHttp;
       function GetPercent(){
            if(_n == 0){
                if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = new XMLHttpRequest(); }
                _Url = "p.aspx?time="+new Date();
                xmlHttp.open("GET",_Url,true);
                xmlHttp.send(null);
            }
           
            if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = new XMLHttpRequest(); }
            _Url = "p1.aspx?time="+new Date();
            xmlHttp.onreadystatechange = GetComplete;
            xmlHttp.open("GET",_Url,true);
            xmlHttp.send(null);
        }

        function GetComplete(){
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                _p = parseInt(xmlHttp.responseText);
                if(_p <= _n) return;
                else{
                     _n = _p ;
                    document.getElementById("spanP").innerHTML = + _n;
                }
            }
        }
        function init(){
            if(_n < 50){
                GetPercent()
                setTimeout("init()",500);
            }
        }
    </script>
HTML:
<body onload="init();">
    <div>已完成: <span id="spanP"></span></div>
</body>

p.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="p.aspx.cs" Inherits="ProductManage_p" %>
p.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
    {
        Session["Num"] = 0;
        this.doSomething();
    }

    protected void doSomething()
    {
        System.Threading.Thread t = new System.Threading.Thread(new System.Threading.ThreadStart(ThreadProc));
        t.Start();
    }

    public void ThreadProc()
    {
        for (int i = 0; i <= 50; i++)
        {
            Session["Num"] = i;
            System.Threading.Thread.Sleep(500);
        }
    }
// 使用了线程来给Session["Num"] 赋值,实际运用的时候针对需要来改咯

p1.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="P1.aspx.cs" Inherits="ProductManage_P1" %>
P1.aspx.cs
protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write(Session["Num"].ToString());
    }

访问一下,貌似可以实现之前的要求,虽然确实是丑了一点
收工!!!!!