原理很简单,就是在针对某个操作可能很花时间的时候,能在浏览器有个提示
说是进度条,其实是个简单的数字显示,偷下懒了 ^_^
开工~~~~~~~~~~~~~
几个页面都写得很简单,能实现就好,:-)
三个页面:
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());
}
访问一下,貌似可以实现之前的要求,虽然确实是丑了一点
收工!!!!!