AJAX progress bar 實際執行畫面

AJAX progress bar 程式進度條結合伺服器端傳回的 XML 資料加上客戶端的 JavaScript 和 CSS 實現 AJAX 程式進度條功能，JavaScript 將定期詢問進度值，服務器將回復 XML。進度值應該從XML中提取和顯示的DIV元素的寬度。

使用方法：
第一步 先設計檔案的 CSS 設計
body {
font-family: arial;
}
.green {
color: white;
background-color: #41A128;
border-width: 1px;
}
.blue {
color: white;
background-color: #6A93D4;
border-width: 1px;
}
div#progress_container {
border: 6px double #ccc;
width: 200px;
margin: 0px;
padding: 0px;
text-align: left;
}
div#progress {
color: white;
background-color: #FF8D40;
height: 12px;
padding-bottom: 2px;
font-size: 12px;
text-align: center;
overflow: hidden;
}

第二步 設計HTML的部分
<center>
<h2>AJAX progress bar</h2>
<br/>
<br/>
<div id="progress_container">
<div id="progress" style="width: 0%"></div>
</div>
<br/>
<input type="button" value="Start" onclick="javascript:polling_start()" class="green" /><!--啟動進度條-->
<input type="button" value="Stop" onclick="javascript:polling_stop()" class="blue" /><!--停止進度條-->
</center>

第三步 製作PHP的進度回傳
<?php
// no cache
header('Pragma: no-cache');
// HTTP/1.1
header('Cache-Control: no-cache, must-revalidate');
// date in the past
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
// define XML content type
header('Content-type: text/xml');
// print XML header
print '<?xml version="1.0"?>';
// prepare demo progress value
$progress = (mktime() % 50) * 2;
?>
<DOCUMENT><PROGRESS><?php print $progress ?></PROGRESS></DOCUMENT>

第四步 寫入 JavaScript 的程式碼片段
"use strict";
//全域變數
var progress, // 程式的物件
request, // 回傳的物件
intervalID = false, // 計時器的ID
number_max = 20, // 多長時間根伺服器比對資料
number, // 當前的請求數字
initXMLHttpClient, // 創建 XMLHttp 的物件
send_request, // 送一個資料到伺服器
request_handler, // 回傳的擋頭
polling_start, // 開始的動作
polling_stop; // 停止的動作
window.onload = function () {
progress = document.getElementById('progress');
request = initXMLHttpClient();
};
initXMLHttpClient = function () {
var XMLHTTP_IDS,
xmlhttp,
success = false,
i;
try {
xmlhttp = new XMLHttpRequest();
}
catch (e1) {
XMLHTTP_IDS = [ 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ];
for (i = 0; i < XMLHTTP_IDS.length && !success; i++) {
try {
success = true;
xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
}
catch (e2) {}
}
if (!success) {
throw new Error('Unable to create XMLHttpRequest!');
}
}
return xmlhttp;
};

send_request = function () {
if (number < number_max) {
request.open('GET', 'ajax-progress-bar.php', true);
request.onreadystatechange = request_handler;
request.send(null);
number++;
}
else {
polling_stop();
}
};
request_handler = function () {
var level;
if (request.readyState === 4) {
if (request.status === 200) {
level = request.responseXML.getElementsByTagName('PROGRESS')[0].firstChild;
progress.style.width = progress.innerHTML = level.nodeValue + '%';
}
else {
progress.style.width = '100%';
progress.innerHTML = 'Error:[' + request.status + ']' + request.statusText;
}
}
};
polling_start = function () {
if (!intervalID) {
number = 0;
intervalID = window.setInterval('send_request()', 1000);
}
};
polling_stop = function () {
if (0 < request.readyState && request.readyState < 4) {
request.abort();
}
window.clearInterval(intervalID);
intervalID = false;
progress.style.width = '100%';
progress.innerHTML = 'Demo stopped';
};

作者網站：http://www.redips.net/javascript/ajax-progress-bar/
檔案大小：2.58 KB(包含範例)
檔案下載：http://www.redips.net/my/tar/redips6.tar.gz
檔案備份：下載