asp/ajax实现进度条方案

最新推荐文章于 2022-04-06 22:34:09 发布

zm2714

最新推荐文章于 2022-04-06 22:34:09 发布

阅读量5.6k

点赞数

分类专栏： asp 文章标签： function ajax parameters border xhtml prototype

本文链接：https://blog.csdn.net/zm2714/article/details/7935570

版权

asp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

由asp生成静态页面html的时候，如果内容较多，采用进度条的方式显示当前进度是一个很好的办法。当然，进度条的应用，一般是耗时较长的操作，如果不采用进度条显示当前状态，不管是对于前台应用的客户还是对于管理员在后台的应用来说，总是让人不太舒服的事情。

记得我在04年将租房网程序改版时，主要的目的就是将房源信息的动态页面生成纯静态HTML页面。当时是通过Form表单提交当前页面，通过参数值的变化来显示当前进度界面。

今天无意中看到网上一篇：巧用Response.Flush实时显示进度。内容也无非说明Response.Flush的功能，以及实现进度条的方案。我突然闪出一个想法，能否用ajax来实现进度条呢。对于我来说，如果能用ajax实现，我一般是不用form来提交表单处理的。因此有了下面的代码

test.asp代码内容如下

<%
Response.Expires=-1000
Response.Buffer=True
Response.ExpiresAbsolute=Now()-1
Response.CacheControl="no-cache"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-ctrol","no-cache"
Response.Charset="GB2312"
Server.ScriptTimeOut=60*60*24
CONST MM_BarWidth="250"'进度条总宽度
%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<META http-equiv="Content-Type" content="text/html; charset=GB2312" />
<script language="JavaScript" type="text/JavaScript" src="/js/prototype-1.3.1.js"></script>
<script>
function test(){mmAjaxUpdater('test1.asp','k='+$('k').value);}
function mmAjaxUpdater(url,pars,method,id,evalScript){
  url+=(url.indexOf("?")==-1)?"?":"&";
  url+='time='+new Date().getTime();
  method=method?method:'post';//method默认为post发送
  pars=pars?pars:'';//pars默认为空
  evalScript=evalScript?evalScript:true;//执行js,默认为执行
  id=id?id:'';//默认为不返回数据并插入DIV ID
  var myAjax=new Ajax.Updater(
  id,url,{
    method:method,
    parameters:pars,
    evalScripts:evalScript
    });
}
</script>
<style>
#wait{
visibility:hidden;
width:380px;font-size:14px;
padding:10px;
top:200px;left:expression(document.body.clientWidth/2-wait.offsetWidth/2);
position:absolute;
border:1px solid #ccc;background-color:#FAFAFA;}
</style>
</head>
<body>
<div style="width:930px;margin:0 auto;">
<input type=button id="go" class="bln" value="查看效果" οnclick="$('go').disabled=true;$('wait').style.visibility='visible';test();">
<input type=hidden id=k value=0>
</div>

<!-- 显示进度层 Start -->
<div id="wait">
<table>
<tr><td height=20 align=right><span>生成进度：</span></td>
<td>
<table width="<%=MM_BarWidth%>" border="0" cellspacing="0" cellpadding="1" style="border: 1px groove #333333;">
<tr><td height=9>
<img src="bar3.gif" width=0 height=16 id=img2 name=img2 align=absmiddle></td></tr>
</table>
</td></tr>
<tr><td height=20 align=right><span>生成信息：</span></td>
<td width=224 align=left><span id=txt2 name=txt2 style="font-size:9pt;color:#000000;">0%</span>
</td></tr>
</table>
</div>
<!-- 显示进度层 Over -->

test1.asp代码内容如下

<%
Response.Expires=-1000
Response.Buffer=True
Response.ExpiresAbsolute=Now()-1
Response.CacheControl="no-cache"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-ctrol","no-cache"
Response.Charset="GB2312"
Server.ScriptTimeOut=60*60*24
CONST MM_BarWidth="250"'进度条总宽度
'#######################################################################
Dim N,i,cardStr,CountNum
Dim k:k=Trim(Request.Form("k"))
CountNum=999'要处理的数据总数
For N=k To CountNum
  For i=0 To 100
    cardStr="MM"&makeRnd(20) '为了测试效果，延时用。
  Next
  k=k+1
  IF k mod 1=0 Then'1为处理多少数据显示。可以是任意整数 比如IF k mod 10=0 Then等等
  Response.Write "<script>$('k').value=" & k & ";$('img2').width=" & Fix((k/CountNum) * MM_BarWidth) & ";$('txt2').innerHTML=""当前进度：" & FormatNumber(k/CountNum*100,4,-1) & "%"";test();</script>"
  response.end
  End IF
Next
Response.Write "<script>$('img2').width=" & MM_BarWidth & ";$('txt2').innerHTML=""总体完成度：100%，生成数据结束！"";</script>"
Response.End

Function makeRnd(n)
  ReDim tmpArr(n-1)
  For j=0 to n-1
    Do
      Randomize
      asciicode=Int((122-48+1)*Rnd+48)
      Loop Until asciicode<=57 OR (65<=asciicode AND asciicode<=90) OR 97<=asciicode
      tmpArr(j)=Chr(asciicode)
    Next
  makeRnd=Join(tmpArr,"")
End Function
%>

可以将以上内容保存文件执行查看效果。

在上面实现进度条方案之前，我是在test.asp文件中通过
function test(){
mmAjaxUpdater('test1.asp','');//注意，这里没有加上参数k
}
执行test1.asp文件时是在test1.asp循环中，通过Response.Flush来达到这个效果。

<%
Response.Expires=-1000
Response.Buffer=True
Response.ExpiresAbsolute=Now()-1
Response.CacheControl="no-cache"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-ctrol","no-cache"
Response.Charset="GB2312"
Server.ScriptTimeOut=60*60*24
CONST MM_BarWidth="250"'进度条总宽度
'#######################################################################
Dim N,cardStr,CountNum
dim i,k
CountNum=999'要处理的数据总数
For N=k To CountNum
  For i=0 To 100
    cardStr="MM"&makeRnd(20) '为了测试效果，延时用。
  Next
  k=k+1
  IF k mod 10=0 Then
    Response.Write "$('img2').width=" & Fix((k/CountNum) * MM_BarWidth) & ";$('txt2').innerHTML=""当前进度：" & FormatNumber(k/CountNum*100,4,-1) & "%"";test();</script>"
    Response.Flush
  End IF
Next
Response.Write "<script>$('img2').width=" & MM_BarWidth & ";$('txt2').innerHTML=""总体完成度：100%，生成数据结束！"";</script>"
Response.Flush
%>

遗憾的是，结果它并不实时显示，而只显示最终的结果，这对于进度条来说，一个意义没有。所以我加上参数k，来控制进度条的显示。

这是今天想到的通过ajax实现进度条的处理方案，另外在说明一下：采用本方案，可以实时终止程序，不像以前，如果采用form提交，由于后台是一次性处理，所以你无法在程序执行后终止它，这一点，在有些场合尤为重要。本程序仅提供思路，没有深入从程序质量上过多考虑，欢迎交流并完善。

以上代码涉及的prototype文件下载：http://download.csdn.net/detail/zm2714/4543744