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

最新推荐文章于 2023-04-04 19:43:19 发布

原创最新推荐文章于 2023-04-04 19:43:19 发布 · 635 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #function #xmlhttprequest #table #webform #string

asp.net 专栏收录该内容

135 篇文章

订阅专栏

本文介绍了一个使用ASP.NET实现的AJAX动态更新示例。通过两个WebForm页面进行交互，利用JavaScript发起异步请求并更新页面内容，展示了如何通过AJAX技术实现实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在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;