首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> Java 相關知識

Ajax.NET (AjaxPro) 快速入門:ASP.NET WebForms 時代的異步回調方案

     編輯:Java 相關知識

歷史定位:WebForms 年代的「前後端分離」先驅

Ajax.NET (後更名 AjaxPro) 是 2005-2010 年 ASP.NET WebForms 專案實現「無刷新局部更新」的主流庫。它通過 **JavaScript Proxy 自動生成**、**伺服端方法標記 `[AjaxMethod]`**、**HTTP Handler 處理 `ajaxpro/*.ashx`** 三大機制,讓開發者像呼叫本地方法一樣在前端調用後端 C# 方法。雖然現代專案已轉向 ASP.NET Core + Web API + 前端框架,但維護舊系統時仍需理解其運作原理。

環境建置 (VS 2005/2008/2010 + .NET 2.0/3.5/4.0)

  1. 下載 AjaxPro.2.dll (或 AjaxPro.dll) 並加入專案參考。
  2. 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>

核心開發步驟

1. 後端:標記公開方法

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);
        }
    }
}

2. 前端:引用自動生成的 JS Proxy

<%@ 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。

常見坑與避雷指南

  1. 命名空間不匹配:Inherits="Namespace.ClassName" 必須與代碼後置檔 namespace Namespace { class ClassName } 完全一致,否則 Proxy 生成 404。
  2. 靜態方法無法註冊:`RegisterTypeForAjax` 僅支援實例方法 (需 Page 實例)。靜態方法需包裝在實例方法中或改用 WebMethod/PageMethod。
  3. 複雜類型序列化失敗:實體類必須標記 `[Serializable]`、公共屬性可讀寫、無循環引用、無介面類型屬性 (用具體類)。
  4. 衝突與效能:每個頁面註冊會生成獨立 JS,大量頁面導致腳本膨脹。建議抽離公共服務類,單獨頁面註冊或用 `AjaxPro.Utility.RegisterTypeForAjax(typeof(CommonService))` 在 `Global.asax` 統一註冊。
  5. IIS 部署 404:確認 Handler Mapping 包含 `.ashx`、應用程式池 .NET 版本正確、web.config `` 避免整合管線報錯。

現代替代方案:為什麼不再推薦 AjaxPro?

  • **架構落後**:WebForms ViewState/PostBack 模式與前端框架 (React/Vue/Angular) 衝突,難以單元測試、SEO 差、狀態管理混亂。
  • **維護停滯**:AjaxPro 最後更新 2010 年,無 .NET Core/.NET 5+ 支援,安全漏洞無人修補。
  • **替代路徑**:
    1. 漸進式遷移:新功能用 ASP.NET Core Web API + 前端獨立專案,舊功能逐步重寫。
    2. 頁面級替代:WebForms 頁面引入 jQuery `$.ajax()` 直接呼叫 `<%= ResolveUrl("~/api/...") %>` (需加裝 ASP.NET Core 或 Web API 於同方案)。
    3. 整站重構:採用 Blazor (WebAssembly/Server) 復用 C# 模型、邏輯、驗證,獲得現代 SPA 體驗。

結語:AjaxPro 曾是經典,承載了無數 .NET 開發者的青春。理解其原理,是為了優雅地送它退休,擁抱現代雲原生架構。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved