<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></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 queryString = "WS.asmx/DynamicUpdate?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); refreshTime(); } } } function pollServer() { var queryString = "WS.asmx/DynamicUpdate?task=foo"; xmlHttp.onreadystatechange = pollCallback; xmlHttp.open("GET", queryString, true); 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); return row; } </script> </head> <body> <h1> Ajax页面自动刷新</h1> <input type="button" value="开始" onclick="doStart();" /> 页面将在<span id="time">5</span>秒后刷新 <table id="dynamicUpdateArea" align="left"> <tbody> <tr id="row0"> <td> </td> </tr> </tbody> </table> </body> </html>
Webservice内容：
private int counter = 1; [WebMethod] public void DynamicUpdate() { var task = Context.Request.QueryString["task"]; string message = ""; string res = ""; if (task.Equals("reset")) { counter = 1; } else { switch (counter) { case 1: break; case 2: break; case 3: break; case 4: break; case 5: break; case 6: break; case 7: break; default: break; } counter++; } res = "<message>" + message + "</message>"; Context.Response.ContentType = "text/xml"; Context.Response.Write("<response>"); Context.Response.Write(res); Context.Response.Write("</response>"); }
运行效果是动态的，这里也就不贴图了