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

最新推荐文章于 2024-09-04 22:20:02 发布

cqfeng

最新推荐文章于 2024-09-04 22:20:02 发布

阅读量2.4k

点赞数

文章标签： ajax xmlhttprequest session function object url

本文链接：https://blog.csdn.net/cqfeng/article/details/2511003

版权

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

开工~~~~~~~~~~~~~
几个页面都写得很简单，能实现就好，:-)
三个页面：
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);
        }

    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());
    }

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