前端代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var xmlHttp;
var count = 1;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTp");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doStart() {
createXMLHttpRequest();
var queryString = "auto_refresh.php?task=reset";
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 5000);//5秒以后执行是pollServer()
refreshTime();
}
}
}
function pollServer() {
var queryString = "auto_refresh.php?task=foo&count="+count++;
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.nodeValue;
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);//实现从刷新字段往下插，first_row为null
// var first_row = table_body.getElementsByTagName("tr").item(0);//实现从刷新字段往上插
table_body.insertBefore(new_row, first_row);
if (message != "done") {
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
}
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) {
time_span.innerHTML = new_int_val;
setTimeout("refreshTime()", 1000);
}
else {
time_span.innerHTML = 5
}
}
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页面自动刷新</h1>
<input type="button" value="开始" onclick="doStart();" />页面将在<span id="time">5</span>秒后刷新<br>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0">
<td>
刷新
</td>
</tr>
</tbody>
</table>
</body>
</html>
后端代码：
<?php if($_GET){ $task = $_GET["task"]; $count = $_GET["count"]; $message = ""; $res = ""; if( $task == "reset" ){ $message = ‘重新开始！‘; }else{ switch ($count) { case 1: $message = ‘lixuan case 1‘; break; case 2: $message = ‘lixuan case 2‘; break; case 3: $message = ‘lixuan case 3‘; break; case 4: $message = ‘lixuan case 4‘; break; case 5: $message = ‘lixuan case 5‘; break; case 6: $message = ‘lixuan case 6‘; break; case 7: $message = ‘lixuan case 7‘; break; default: $message = ‘done‘; break; } // $count++; } $res = "<message>" .$message ."</message>"; header("Content-Type:text/xml"); header("cache-control:no-cache,must-revalidate"); print_r("<response>".$res."</response>"); exit; } include ‘/home/q/www/crmxuan.qunar.com/htdocs/buycar/auto_refresh_1.php‘; ?>
原文：http://www.cnblogs.com/lxxhad/p/4168144.html