一個剖析AJAX原理的簡單範例

最後更新：2018-12-06 來源：互聯網

上載者：User

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

看了“坐斷東南笑煞之”的那篇 .net組件開發系列(二)之武林系列太極拳開發ajax控制項總有一種意猶味盡的感覺。沒有想到金色海洋（jyk）竟“暈了”，我感覺寫得挺不錯的，就是少了點鹽味，所以鬥膽補充以下。

聲明：本代碼是引用自奚江華的著作，但我沒有在網路找到相關地址，所以沒有添加相關引用。這個例子是我手動敲打進來的，一是為了自己練習一下，二來也方便大家學習和指教。

為了讓各為能夠瞭解什麼是AJAX，以下是一個AJAX的手工範例（即不引用任何的Library或AJAX framework），此範例頗為精要易懂，其作用主要是透過Client 端的Browser來即時監控Web 服務器資源或效能變化，各位只要做過一遍範例就能夠瞭解AJAX在網頁開發上是多麼具有威力了。

先來看看：

本範例是一個簡單的AJAX例子，但麻雀雖小五髒俱全，可由此窺見原始AJAX非同技術是如何運作。不需要安裝任何特殊的AJAX套件，步驟說明如下：

一　建立Web項目
首先在VS 2005（或VS.NET 2003）建立一個普通的WEB項目，或者您沒有VS開發工具，直接用記事本建立也行。

二　建立Client端頁面
在Web專案中加入一個Client端頁面Client.htm，並將此頁面設定為起始頁，這個頁面會向Web伺服器網頁發出非同步呼叫請求，並且將伺服器回傳資料更新到網頁元素中，代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
function sendAJAX()

{
XmlHttp.Open("POST","Server.aspx",true);

XmlHttp.send(null);

XmlHttp.onreadystatechange=ServerProcess;
}
function ServerProcess()

{
if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')

{

document.getElementById('nameList').innerHTML
=XmlHttp.responsetext;

}

}

setInterval('sendAJAX()',1000);
</script>
</head>
<body>
<div id="nameList"></div>
</body>
</html>

三　建立Server端處理程式
另外在專案中加入一個Server.aspx網頁（含.cs），Server.aspx 不需要添加任何代碼。
Server.aspx.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;
using System.Diagnostics;
public partial class Server : System.Web.UI.Page

{
    protected void Page_Load(object sender, EventArgs e)

    {

        PerformanceCounter myMemory = new PerformanceCounter();

        myMemory.CategoryName = "Memory";

        myMemory.CounterName = "Available KBytes";
        string txtResult = "-->伺服器可以用記憶體大小：" +

        myMemory.NextValue().ToString() + "KB";

        Response.Write(DateTime.Now.ToLongTimeString() + txtResult);

    }

}

說明：

首先記得引用 System.Diagnostics 命名空間，因為 PerformanceCounter 必須使用該命名空間，而 PerformanceCounter 類別可讓您監控 Windows作業系統的各種效能計數器，在此透過它取得伺服器每秒可用記憶體大小的變化情形。

執行 Client.htm 頁面,大約會花5秒啟始 Performance-Counter 物件，之後透過 AJAX 便可每秒獲得 Server 可用記憶

體變化情形。當然用 Server Side 的 Timer 也可以實現，但那種方式會造成 Server 的 Loading 爆增，人多的話還可能搞垮你的 Server，但 AJAX 就具有極佳的彈性與靈巧，透過 AJAX 您可以即時偵測到資料庫或事件的變化即時顯現在網頁上。

相關文章：讓ajax更加友好，即時顯示幕後處理進度

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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