当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 一个无刷新效果定时自动更新页面的例子

ASP.NET
使用函数传递参数来执行相应的数据库操作
如何实现在窗体和窗体之间进行传递数据
ASP.NET中文显示之两种解决方法
ASP.NET、JSP及PHP之间的抉择
ASP.NET 2.0发送电子邮件中存在的问题
谈谈HtmlControl与WebControl的区别与用途
从ASP.NET 1.1升级到ASP.NET 2.0要考虑的Cookie问题
通过系统配置来提高ASP.NET应用程序的稳定性
妙用ASP2.0中的URL映射改变网址
AJAX实现web页面中级联菜单的设计
ASP.NET跨页面传值技巧总结
再议ASP.NET DataGrid控件中的“添加新行”功能
Geometry 对象浅析
重构CollapsibleSplitter
如何利用.NET Framework使用RSS feed
ASP.NET获取IP与MAC地址的方法
在ASP.NET 2.0中使用样式、主题和皮肤
ASP.NET中为GridView添加删除提示框
ASP.NET 2.0，无刷新页面新境界
看看一个.net版对话框控件

No. « 3 4 5 6 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 81 ::
收藏到网摘: n/a

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

  }

}