一个剖析AJAX原理的简单范例[转]
声明:本代码是引用自奚江华的著作,但我没有在网络找到相关地址,所以没有添加相关引用。这个例子是我手动敲打进来的,一是为了自己练习一下,二来也方便大家学习和指教。
为了让各为能够了解什么是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>
<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);
}
}
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您可以即时侦测到资料库或事件的变化即时显现在网页上。
分类:
ASP.NET技术
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述