您的位置：首页 > 其它

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

2008-06-04 15:13 507 查看

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航