為了讓各為能夠了解什么是AJAX,以下是一個AJAX的手工范例(即不引用任何的Library或AJAX framework),此范例頗為精要易懂,其作用主要是透過Client 端的Browser來即時監(jiān)控Web 服務(wù)器資源或效能變化,各位只要做過一遍范例就能夠了解AJAX在網(wǎng)頁開發(fā)上是多么具有威力了。 先來看看效果圖:
本范例是一個簡單的AJAX例子,但麻雀雖小五臟俱全,可由此窺見原始AJAX非同技術(shù)是如何運(yùn)作。不需要安裝任何特殊的AJAX套件,步驟說明如下:
一 建立Web項(xiàng)目 首先在VS 2005(或VS.NET 2003)建立一個普通的WEB項(xiàng)目,或者您沒有VS開發(fā)工具,直接用記事本建立也行。
二 建立Client端頁面 在Web專案中加入一個Client端頁面Client.htm,并將此頁面設(shè)定為起始頁,這個頁面會向Web伺服器網(wǎng)頁發(fā)出非同步呼叫請求,并且將伺服器回傳資料更新到網(wǎng)頁元素中,代碼如下:
<!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網(wǎng)頁(含.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 = "-->服務(wù)器可以用記憶體大。" + myMemory.NextValue().ToString() + "KB"; Response.Write(DateTime.Now.ToLongTimeString() + txtResult); } }
說明: 首先記得引用System.Diagnostics 命名空間,因?yàn)镻erformanceCounter 必須使用該命名空間, 而PerformanceCounter類別可讓您監(jiān)控Windows 作業(yè)系統(tǒng)的各種效能計(jì)數(shù)器,在此透過它取得服務(wù)器每秒可用記憶體大小的變化情形。
執(zhí)行Client.htm頁面,大約會花5秒啟始Performance-Counter物件,之后透過AJAX便可每秒獲得Server可用記憶 體變化情形。當(dāng)然用Server Side的Timer也可以實(shí)現(xiàn),但那種方式會造成Server的Loading爆增,人多的話還可能搞垮你的Server,但AJAX 就具有極佳的彈性與靈巧,透過AJAX您可以即時偵測到資料庫或事件的變化即時顯現(xiàn)在網(wǎng)頁上。
|