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條數據動態在頁面中刷新

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注