返回首页
当前位置: 主页 > 网络编程 > Ajax实例教程 >

利用Ajax做进度条效果源代码

时间:2012-05-03 16:22来源:知行网www.zhixing123.cn 编辑:麦田守望者

<script type="text/javascript"language="javascript">
var xmlHttp;var count=0;
function createXMLHttpRequest()
{ }
function handleStateChange()
{ if(xmlHttp.readyState==4)
if(xmlHttp.status==200)
{
varbid=xmlHttp.responseXML.getElementsByTagName_r("id")[0].childNodes[0].nodeValue;
setTimeout("startRequest()",100); //每过0.1秒调用一次startRequest()函数
}
}
function startRequest()
{ var button=document.getElementById("ok");
count++;
var blockid=document.getElementById("block"+count);
blockid.style.backgroundColor="red";//把背景色设置为红色
varblocknext=document.getElementById("block"+(count+1));
blockid.innerHTML="&nbsp;&nbsp;&nbsp;";//设置数字的地方为空格,注意此处不能写作空,否则,相当于删除
blocknext.innerHTML=(count+1)+""+count+"%";
if(count==8)
{
blocknext.innerHTML="&nbsp;&nbsp;&nbsp;";
button.disabled=true;//button 设置为不可用
var comp=document.getElementById("complete");
comp.innerHTML="Complete!";
}
xmlHttp=createXMLHttpRequest();
varv="block"+count;
varqueryString="myservlet?id="+v;
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",queryString,true);
xmlHttp.send(null);
}
</script>
<table align="center">
<tbody>
<tr><td>
<div id="processorbar"style="padding:2px;border:solid black 2px;">
<span id="block1">&nbsp;&nbsp;&nbsp;</span>
<spanid="block2">&nbsp;&nbsp;&nbsp;</span>
<spanid="block3">&nbsp;&nbsp;&nbsp;</span>
<spanid="block4">&nbsp;&nbsp;&nbsp;</span>
<spanid="block5">&nbsp;&nbsp;&nbsp;</span>
<spanid="block6">&nbsp;&nbsp;&nbsp;</span>
<spanid="block7">&nbsp;&nbsp;&nbsp;</span>
<spanid="block8">&nbsp;&nbsp;&nbsp;</span>
<spanid="block9">&nbsp;&nbsp;&nbsp;</span>
</div>
</td></tr>
<tr><tdalign="center"id="complete"></td></tr>
</tbody>
</table>
<input type="button" name="ok" value="ok"onclick="startRequest();"/>
</body>
</html>

------分隔线----------------------------
标签(Tag):ajax Ajax实例教程 Ajax基础教程 Ajax源代码 Ajax技巧
------分隔线----------------------------
推荐内容
猜你感兴趣