股票行情、天氣資料、標題新聞……這些都是經常改變的資料，但不值得為這些資料的修改手工地完全重新整理頁面。儘管CNN.com之類的網站確實會定期重新載入，但是，如果只是為了改變一兩個標題新聞和幾個圖就重繪整個頁面，這可能很讓人掃興。當然，如果重新整理整個頁面，可能很難發現到底哪些是新內容！
如果使用Ajax，使用者就不用反覆點擊refresh（重新整理）按鈕。技術新聞網站Digg (http：//digg.com/spy)就使用了這種技術。Digg採用自動重新整理方法不斷更新其頁面，並使用了很有協助的褪色技術，以可視化的方式讓使用者知道哪些新聞是新的（見圖4-7）。
圖4-7 Digg.com，自動重新整理頁面的例子
如果查看Apple的新聞，你可能已經看到Steve Jobs在Apple的2005世界開發人員大會上的主題演講，其中透露Apple將開始轉向Intel處理器。MacRumors.com (http://www. macrumors. com/)的小組使用Ajax技術相當及時地發布了這個資訊，而且減輕了其伺服器的壓力。最近，Apple的iTunes網站（http:// www.apple.com/itunes/）正在使用Ajax動態更新其下載數（目標是5億）（見圖4-8）。
自動重新整理頁面實際上相當簡單。對於代碼清單4-7所示的例子，使用一個按鈕開始“輪詢”，不過在實際應用中，可能會以onload事件代之。doStart()方法負責啟動，不過最有意思的地方是pollCallback()方法中的setTimeout()方法，它允許以固定的時間間隔（單位是毫秒）執行給定的方法。createRow()方法只是一個充分利用了DOM方法來動態建立內容的輔助函數，refreshTime()用於重新整理定時器值。
代碼清單4-7 dynamicUpdate.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doStart() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=reset";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=foo";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime(){
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_int_val = int_val - 1;
if (new_int_val > -1) {
setTimeout("refreshTime()", 1000);
time_span.innerHTML = new_int_val;
} else {
time_span.innerHTML = 5;
}
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("message")[0].firstChild.data;
if (message != "done") {
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body =
table.getElementsByTagName("tbody").item(0);
var first_row =
table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row, first_row);
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
}
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Launch" id="go" onclick="doStart();"/>
<p>
Page will refresh in <span id="time">5</span> seconds.
<p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
