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

2022-07-15 80酷酷网 80kuku.com

　　定时|刷新|无刷新|页面

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

　　首先在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" "">
<html Xmlns="" >
<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" />
    <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();
   }
}
}