Ajax.NET (後更名 AjaxPro) 是 2005-2010 年 ASP.NET WebForms 專案實現「無刷新局部更新」的主流庫。它通過 **JavaScript Proxy 自動生成**、**伺服端方法標記 `[AjaxMethod]`**、**HTTP Handler 處理 `ajaxpro/*.ashx`** 三大機制,讓開發者像呼叫本地方法一樣在前端調用後端 C# 方法。雖然現代專案已轉向 ASP.NET Core + Web API + 前端框架,但維護舊系統時仍需理解其運作原理。
AjaxPro.2.dll (或 AjaxPro.dll) 並加入專案參考。web.config 註冊 HTTP Handler:<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx"
type="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
</httpHandlers>
</system.web>
<!-- IIS 7+ 整合管線需額外加入 -->
<system.webServer>
<handlers>
<add name="AjaxPro" verb="POST,GET" path="ajaxpro/*.ashx"
type="AjaxPro.AjaxHandlerFactory, AjaxPro.2" preCondition="integratedMode" />
</handlers>
</system.webServer>
namespace MyDemo {
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
// 必須註冊當前類型,生成 JavaScript Proxy
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
[AjaxPro.AjaxMethod] // 關鍵屬性:暴露給客戶端
public DateTime GetServerTime() {
return DateTime.Now;
}
[AjaxPro.AjaxMethod]
public int AddTwo(int firstInt, int secondInt) {
return firstInt + secondInt;
}
// 可回傳複雜物件 (自動 JSON 序列化)
[AjaxPro.AjaxMethod]
public UserInfo GetUser(int id) {
return userService.GetById(id);
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MyDemo._Default" %>
<html>
<head>
<title>AjaxPro Demo</title>
<!-- 關鍵:引用自動生成的 Proxy JS,路徑為 /ajaxpro/類全名.ashx -->
<script src="ajaxpro/MyDemo._Default.ashx" type="text/javascript"></script>
</head>
<body>
<input type="button" value="獲取伺服器時間" onclick="getServerTime()" />
<input type="text" id="txt1" /> + <input type="text" id="txt2" />
<input type="button" value="計算和" onclick="add()" />
<script type="text/javascript">
function getServerTime() {
// 調用 Proxy 方法:命名空間.類名.方法名(參數..., callback)
MyDemo._Default.GetServerTime(function(result) {
// result.value 為伺服端回傳值
alert('伺服器時間: ' + result.value);
});
}
function add() {
var a = parseInt($get('txt1').value);
var b = parseInt($get('txt2').value);
MyDemo._Default.AddTwo(a, b, function(result) {
alert('計算結果: ' + result.value);
});
}
</script>
</body>
</html>
| 機制 | 說明 |
|---|---|
| JavaScript Proxy 生成 | 請求 ajaxpro/Namespace.Class.ashx 時,AjaxHandlerFactory 反射掃描類別上標記 [AjaxMethod] 的 public 方法,動態生成同名 JS 函數,參數對應、回調約定。 |
| 參數序列化 | 客戶端 JS 物件 → JSON 字串 → HTTP POST Body。伺服端反序列化為方法參數類型 (基本類型、陣列、自訂類別需無參建構子)。 |
| 回傳值封裝 | 伺服端回傳值包裝為 { value: ..., error: null, ... } JSON 物件,客戶端回調接收 result.value。 |
| Session/Context 存取 | Proxy 方法內可直接用 HttpContext.Current.Session、Request、Response,因執行於 ASP.NET Pipeline 內。 |
| 錯誤處理 | 伺服端拋出異常 → 封裝為 { error: { message, stackTrace } },客戶端回調可檢查 result.error。 |
Inherits="Namespace.ClassName" 必須與代碼後置檔 namespace Namespace { class ClassName } 完全一致,否則 Proxy 生成 404。web.config `結語:AjaxPro 曾是經典,承載了無數 .NET 開發者的青春。理解其原理,是為了優雅地送它退休,擁抱現代雲原生架構。