在后台进行批量生成静态HTML时，您可能有这样的需求，需要实时显示整个过程的进度和滚动进度条。您当然可以利用ASP、PHP、Aspx等动态脚本语言实现这样的需求，但是这么做是有缺陷的，在循环生成的过程中，CPU将会一直被占用，而且可能同时产生大量的数据请求。
下面飘易设计一种利用js+ajax的方式实现无刷新的批量生成并显示进度条和百分数的方式。飘易以实例说明，本项目共有2个文件：1.html和1.asp(模拟动态生成页面)。
在批量生成的过程中，我们不能简单用循环的方式比如 for 、while来实现。因为javascript是单线程，如果使用了循环，那么在生成的过程中，就不会逐条地实时显示进度，而是等全部生成html后，才会一次性显示。这样，就背离了我们的设计初衷。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>后台 test</title>
<style type="text/css">
body{
font-size:12px;
font-family:"Verdana","宋体","Arial";
color:#222;
text-decoration:none;
margin:8px;
}
#process1{
width:500px;
height:20px;
border:1px solid #333;
background-color:#CCCCCC;
}
#process2{
width:1px;
height:20px;
text-align:center;
background-color:#33FF00;
}
</style>
</head>
<body>
<div id="process1"><div id="process2"></div></div>
<div id='show'></div>
<script type="text/javascript">
//创建XMLHttpRequest
var xmlhttp;
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = null;
alert("您的浏览器不支持XMLHTTP，无法完成此操作！");
}
}
}
//利用AJAX的无刷新调用
function subhtml(id){
xmlhttp.open("GET", "1.asp?id="+id+"&rnd="+Math.random(), false);
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=gb2312");
xmlhttp.send(null);
var strText="";
if(xmlhttp.status==200){
strText = xmlhttp.responseText;
}
return strText;
}
//设置最小id和最大id
var idmin=2;
var idmax=11;
var isrun=false;
var myi=idmin;
//定时器
var intervalId =setInterval(showfun,500);
function showfun(){
if(isrun) return false;
isrun=true;
var res=subhtml(myi);
var para=document.createElement("div");
para.innerHTML = res;
document.getElementById("show").appendChild(para);
document.getElementById('process2').innerText=(100*(myi-idmin+1)/(idmax-idmin+1)).toFixed(2)+"%";
document.getElementById('process2').style.width=500*((myi-idmin+1)/(idmax-idmin+1))+"px";
myi++;
if(myi>idmax) window.clearInterval(intervalId);
isrun=false;
}
</script>
</body></html>
