首頁 > 開發者 > Ajax

Ajax基礎教程學習(3)_建立自動重新整理頁面

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head>    <title>Ajax Dynamic Update</title>   
<script type="text/javascript">       
var xmlHttp;       
function createXMLHttpRequest() {           
    if (window.ActiveXObject) {              
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");          
    }else if (window.XMLHttpRequest) {              
        xmlHttp = new XMLHttpRequest();           
   }       
}       
function doStart() {           
    createXMLHttpRequest();           
    var url = "Handler.ashx?task=reset";           
    xmlHttp.open("GET", url, true);           
    xmlHttp.onreadystatechange = startCallback;           
    xmlHttp.send(null);       
}          

function startCallback() {           
    if (xmlHttp.readyState == 4) {              
         if (xmlHttp.status == 200) {                  
            setTimeout("pollServer()", 5000);                   
            refreshTime();               
          }           
    }       
}          
function pollServer() {           
    createXMLHttpRequest();           
    var url = "Handler.ashx?task=foo";          
    xmlHttp.open("GET", url, true);           
    xmlHttp.onreadystatechange = pollCallback;          
    xmlHttp.send(null);       
  }   
 
function refreshTime(){       
    var time_span = document.getElementByIdx_x("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 = 5;       
    }   
}   

function pollCallback() {       
    if (xmlHttp.readyState == 4) {          
     if (xmlHttp.status == 200) {             
        var message =xmlHttp.responseXML.getElementsByTagName_r("message")[0].firstChild.data;               
        if (message != "done") {                   
             var new_row = createRow(message);                   
             var table = document.getElementByIdx_x("dynamicUpdateArea");                   
             var table_body =table.getElementsByTagName_r("tbody").item(0);                   
             var first_row =table_body.getElementsByTagName_r("tr").item(1);                   
             table_body.insertBefore(new_row, first_row);                   
             setTimeout("pollServer()", 5000);                  
             refreshTime();               
         }           
      }       
    }   
}   
 
  function createRow(message) {       
      var row = document.create_rElement("tr");       
      var cell = document.create_rElement("td");       
      var cell_data = document.create_rTextNode(message);       
      cell.appendChild_xss(cell_data);       
      row.appendChild_xss(cell);       
      return row;   
  }
 
  </script>

</head>

<body> <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">5</span> seconds. </p>
<table id="dynamicUpdateArea" align="left"><tbody>          <tr id="row0"><td></td></tr>      </tbody>    </table> </body>

</html>

 

 

服務端頁面

 

<%@ WebHandler Language="C#" class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    private static int counter = 1;
    public void ProcessRequest (HttpContext context) {

        string res = "";
        string task = context.Request.QueryString["task"].ToString();
        string message = "";
        if (task == "reset")
        {
         
            counter = 1;
        }
        else
        {      
            switch (counter) {
                case 1: message = "Steve walks on stage1"; break;
                case 2: message = "iPods rock2"; break;
                case 3: message = "Steve says Macs rule3"; break;
                case 4: message = "Change is coming4"; break;
                case 5: message = "Yes, OS X runs on Intel - has for years5"; break;
                case 6: message = "Macs will soon have Intel chips6"; break;
                case 7: message = "done"; break;           
            }           
            counter++;           
        }
        res = "<message>" + message + "</message>";       
        context.Response.ContentType = "text/xml";
        context.Response.AddHeader("Cache-Control", "no-cache");
        context.Response.Write("<response>"+res+"</response>");
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More