Ajax基础教程学习(3)_创建自动刷新页面
时间：2010-08-31 来源：快乐的Tina
<!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 = "Handler.ashx?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 = "Handler.ashx?task=foo";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime(){
var time_span = document.getElementByIdx_x("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_r("message")[0].firstChild.data;
if (message != "done") {
var new_row = createRow(message);
var table = document.getElementByIdx_x("dynamicUpdateArea");
var table_body =table.getElementsByTagName_r("tbody").item(0);
var first_row =table_body.getElementsByTagName_r("tr").item(1);
table_body.insertBefore(new_row, first_row);
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
}
function createRow(message) {
var row = document.create_rElement("tr");
var cell = document.create_rElement("td");
var cell_data = document.create_rTextNode(message);
cell.appendChild_xss(cell_data);
row.appendChild_xss(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>
服务端页面
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
private static int counter = 1;
public void ProcessRequest (HttpContext context) {
string res = "";
string task = context.Request.QueryString["task"].ToString();
string message = "";
if (task == "reset")
{
counter = 1;
}
else
{
switch (counter) {
case 1: message = "Steve walks on stage1"; break;
case 2: message = "iPods rock2"; break;
case 3: message = "Steve says Macs rule3"; break;
case 4: message = "Change is coming4"; break;
case 5: message = "Yes, OS X runs on Intel - has for years5"; break;
case 6: message = "Macs will soon have Intel chips6"; break;
case 7: message = "done"; break;
}
counter++;
}
res = "<message>" + message + "</message>";
context.Response.ContentType = "text/xml";
context.Response.AddHeader("Cache-Control", "no-cache");
context.Response.Write("<response>"+res+"</response>");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
相关阅读 更多 +
