AJAX 进度条实现代码

2024-09-01 08:29:27

字体：大中小

来源：转载

供稿：网友

效果如下：

代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';//进度条的颜色
var span_id = "block";
var clear = " ";
function createXMLHttpRequest()//创建XMLHttpRequest对象
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function go()
{
createXMLHttpRequest();//创建XMLHttpRequest对象
checkDiv();//显示滚动条
xmlHttp.onreadystatechange = callBack;//设置回调函数
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址
var button = document.getElementById("go");
button.disabled = true;//设置按钮不可用
xmlHttp.open("get",url,true);//打开对服务器的连接
xmlHttp.send();//发送请求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",500);//定时调用
}
}
}
function pollServer()
{
createXMLHttpRequest();
var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;
xmlHttp.onreadystatechange = pollCallBack;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function pollCallBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0]
.firstChild.data;//从服务器端获得响应信息
var index = processResult(percent_complete);
for(var i = 1; i<=index; i++)
{
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i+1;
if(next_cell > index && next_cell <= 9)
{
document.getElementById("block"+next_cell).innerHTML = percent_complete + "%";
}
}
if(index <9 )
{
setTimeout("pollServer()",500);
}
else
{
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent_complete)
{
var ind;
if(percent_complete.length == 1)
{
ind = 1;
}
else if(percent_complete.length == 2)
{
ind = percent_complete.substring(0,1);
}
else
{
ind = 9;
}
return ind;
}
function checkDiv()
{
var progress_bar = document.getElementById("progressBar");
if(progress_bar.style.visibility == "visible")
{
clearBar();
document.getElementById("complete").innerHTML = "";
}
else
{
progress_bar.style.visibility = "visible";
}
}
function clearBar()

上一篇：一款经典的ajax登录页面后台asp.net

下一篇：ajax 数据库中随机读取5条数据动态在页面中刷新

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注