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

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

  • 相关阅读:
    kafka server.properties配置文件详解
    kafa单机版环境搭建
    zookeeper单机版安装
    Java中的String,StringBuilder,StringBuffer三者的区别
    单行溢出和多行溢出显示省略号
    SEO之网站内链优化策略
    第十三周学习笔记
    第十二周LINUX学习笔记
    第十一周LINUX 学习笔记
    第十周LINUX 学习笔记
  • 原文地址:https://www.cnblogs.com/chinatefl/p/1214290.html
Copyright © 2011-2022 走看看