AJAX 進度條實現(xiàn)代碼

2024-09-01 08:29:27

字體：大中小

供稿：網(wǎng)友

效果如下：

代碼如下:
<!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()//創(chuàng)建XMLHttpRequest對象
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function go()
{
createXMLHttpRequest();//創(chuàng)建XMLHttpRequest對象
checkDiv();//顯示滾動條
xmlHttp.onreadystatechange = callBack;//設(shè)置回調(diào)函數(shù)
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//請求的地址
var button = document.getElementById("go");
button.disabled = true;//設(shè)置按鈕不可用
xmlHttp.open("get",url,true);//打開對服務(wù)器的連接
xmlHttp.send();//發(fā)送請求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",500);//定時調(diào)用
}
}
}
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;//從服務(wù)器端獲得響應(yīng)信息
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()

上一篇：一款經(jīng)典的ajax登錄頁面后臺asp.net

下一篇：ajax 數(shù)據(jù)庫中隨機讀取5條數(shù)據(jù)動態(tài)在頁面中刷新