开发学院 WEB开发 ASP.NET 一个无刷新效果定时自动更新页面的例子(ASP.NET2.... 阅读

一个无刷新效果定时自动更新页面的例子(ASP.NET2.0-应用xmlhttp)

　2007-05-13 17:21:40　来源：WEB开发网　　　

核心提示：首先在asp.net创建两个WebForm页，分别命名为Default1，一个无刷新效果定时自动更新页面的例子(ASP.NET2.0-应用xmlhttp)，Default2，下面给出代码清单：//Default1.aspx<%@ Page Language="C#" Debug="t

首先在asp.net创建两个WebForm页，分别命名为Default1，Default2。下面给出代码清单：

//Default1.aspx

<%@ Page Language="C#" Debug="true" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　 var xmlhttp;

　 function doStart() {
　
　　　 createXmlHttpRequest();

　 var url = "Default2.aspx?task=reset";

　 XmlHttp.open("POST", url, true);

　 XmlHttp.onreadystatechange = startCallback;

　 XmlHttp.send(null);

　 }

　 function startCallback() {

　 if (XmlHttp.readyState == 4) {

　　 if (XmlHttp.status == 200) {

　　　 setTimeout("pollServer()", 1000);

　　　 refreshTime();

　　 }
　　　　 else {
　　　
　　　　　 alert("HTTP error: "+XmlHttp.status);
　　　　 }

　 }
　　　
　 }

　 function pollServer() {

　 createXmlHttpRequest();

　 var url = "Default2.aspx?task=foo";

　 XmlHttp.open("POST", 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 = 1;

　 }

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()", 1000);

　　　 refreshTime();

　　 }

　 }
　　　 else {
　　
　　　　 alert("HTTP error: "+XmlHttp.status);
　　　 }

　 }

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>
<form id="form1" runat="server" >

　 <h1>Ajax Dynamic Update Example</h1>

　 This page will automatically update itself:

　 <p/>

　 Page will refresh in <span id="time">1</span> seconds.

　 <p/>

　 <tbody>

　 </tbody>

</table>
</form>
</body>
</html>

//Default2.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2: System.Web.UI.Page
{
private static int counter = 1;

protected void Page_Load(object sender, EventArgs e)
{

　 String res = "";

　 String task = this.Request.Params["task"];

　 String message = "";

　 if (!string.IsNullOrEmpty(task))
　 {
　　　 if (task.Equals("reset"))
　　　 {
　　　　 counter = 1;
　　　 }
　　　 else
　　　 {

　　 switch (counter)
　　　　 {

　　　 case 1: message = "Steve walks on stage"; break;

　　　 case 2: message = "iPods rock"; break;

　　　 case 3: message = "Steve says Macs rule"; break;

　　　 case 4: message = "Change is coming"; break;

　　　 case 5: message = "Yes, OS X runs on Intel - has for years"; break;