当前位置：首页 > 网络编程 > WEB编程 > ASP.net > 一个无刷新效果定时自动更新页面的例子

一个无刷新效果定时自动更新页面的例子

点击次数：23 次发布日期：2008-11-21 22:24:53 作者：源代码网

源代码网推荐

源代码网整理以下首先在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();
}

源代码网整理以下 }

源代码网整理以下}

源代码网供稿.

上一篇: AJAX：如何处理书签和后退按钮下一篇: 看看一个.net版对话框控件

网友评论 (0)

我也要写评论

一个无刷新效果定时自动更新页面的例子的相关新闻

会员中心

网络编程

本站推荐

网络编程之精华