天天看點

Ajax原理

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

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

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

先來看看效果圖:

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 您可以即時偵測到資料庫或事件的變化即時顯現在網頁上

繼續閱讀