<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Ajax Dynamic Update </title> <mce: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 = "DynamicUpdateService.php"; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = startCallback; xmlHttp.send(null); } function startCallback(){ if(xmlHttp.readyState ==4 && xmlHttp.status == 200){ setTimeout("pollServer()", 5000);/*隔5秒的发送到服务端*/ refreshTime(); /*不断地刷新*/ } } function pollServer(){ createXMLHttpRequest(); var url = "DynamicUpdateService.php"; 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 && 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(0); table_body.insertBefore(new_row, first_row); setTimeout("pollServer()", 5000);/*隔5秒的发送到服务端*/ 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; } // --></mce:script> </head> <body > <h1>Ajax Dynamic Update Example</h1> This page will automatically update itself: <input type="button" value="Launch" id="go" οnclick="doStart();" /> <p> Page will refresh in <span id="time">5</span> seconds. </p> <table id="dynamicUpdateArea" align="left" style="height: 200px; overflow:hidden;"> <tbody> <tr id="row0"><td>Online usa somethig here</td></tr> </tbody> </table> </body> </html>