一個無刷新效果定時自動更新頁面的例子

2024-07-21 02:28:13

字體：大中小

來源：轉載

供稿：網友

　　一個無刷新效果定時自動更新頁面的例子(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" "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" />
    <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();
   }
}
}

，歡迎訪問網頁設計愛好者web開發。