一个无刷新效果定时自动更新页面的例子_.Net教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:看看一个.net版对话框控件
一直不太喜欢默认的对话框样式,网上看到个比较好看的对话框,自己修改了下做成了.net版,只在IE下测试过,其他的还没有来得及测试,具体还三个问题没有解决: 1、我没办法像微软ajax-script

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

<html Xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>

<script type="text/javascript">

var XmlHttp;

function createXmlHttpRequest()
{

if (window.XmlHttpRequest)
{
XmlHttp = new XmlHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
XmlHttp = new ActiveXObject("MsXml2.XmlHTTP");
}
catch (e1)
{
try
{
XmlHttp = new ActiveXObject("Microsoft.XmlHTTP");
}
catch (e2)
{}
}
}
return 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:

<input type="button" value="Launch" id="go" onclick="doStart();"/>

<p/>

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

<p/>

<table id="dynamicUpdateArea" align="left">

<tbody>

<tr id="row0"><td></td></tr>

</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;

case 6: message = "Macs will soon have Intel chips"; break;

case 7: message = "done"; break;

}

counter ;

}
res = "<message>" message "</message>";


Response.ContentType = "text/Xml";

Response.AppendHeader("Cache-Control", "no-cache");

Response.Write("<response>");

Response.Write(res);

Response.Write("</response>");

Response.End();
}

}

}

分享:ASP.NET 2.0,无刷新页面新境界
“无刷新页面”,只是一种不确切的效果描述(其实还有其他各种方法来实现这个效果),更确切的说法是:在页面上用JavaScript调用服务器端的一个方法,然后处理返回的数据。实现它最标

来源:模板无忧//所属分类:.Net教程/更新时间:2008-08-22
相关.Net教程