首页 > 代码库 > Ajax+php实现自动刷新页面
Ajax+php实现自动刷新页面
前端代码：
<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 = http://www.mamicode.com/document.createTextNode(message); cell.appendChild(cell_data); row.appendChild(cell); return row; } </script></head><body> <h1>Ajax页面自动刷新</h1> <input type="button" value="http://www.mamicode.com/开始" 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‘;?>
Ajax+php实现自动刷新页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。