zoukankan      html  css  js  c++  java
  • 用Ajax实现一个简单的进度条

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

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

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

  • 相关阅读:
    PAT (Advanced Level) 1086. Tree Traversals Again (25)
    PAT (Advanced Level) 1085. Perfect Sequence (25)
    PAT (Advanced Level) 1084. Broken Keyboard (20)
    PAT (Advanced Level) 1083. List Grades (25)
    PAT (Advanced Level) 1082. Read Number in Chinese (25)
    HDU 4513 吉哥系列故事――完美队形II
    POJ Oulipo KMP 模板题
    POJ 3376 Finding Palindromes
    扩展KMP
    HDU 2289 Cup
  • 原文地址:https://www.cnblogs.com/chinatefl/p/1214290.html
Copyright © 2011-2022 走看看