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

ASP.NET + Atlas 建立客戶端 Web 應用程式:AJAX 框架前身深度解析

     編輯:關於ASP.NET

什麼是 Atlas?

Atlas 是微軟在 ASP.NET 2.0 時期推出的 AJAX 框架代號,後整合為 ASP.NET AJAX(原名 Atlas,正式版更名)。它提供完整的客戶端程式庫(JavaScript 命名空間、元件模型、DOM 封裝、網路層)與伺服器端整合(ScriptManager、UpdatePanel、WebService 呼叫、JSON 序列化),讓開發者能用類似伺服器端的方式撰寫豐富客戶端邏輯。

架構概覽

瀏覽器 (客戶端)
├── MicrosoftAjax.js (核心:類別系統、命名空間、事件、Enum、Type)
├── MicrosoftAjaxWebForms.js (WebForm 整合:PageRequestManager、UpdatePanel、表單驗證)
├── MicrosoftAjaxTimer.js (計時器)
└── 自訂腳本 (繼承 Sys.UI.Control、Sys.Component)

伺服器端
├── ScriptManager (腳本管理、合併、壓縮、地域化、WebService 參考)
├── UpdatePanel (部分頁面更新、觸發器、ChildrenAsTriggers)
├── WebService / PageMethod (JSON 序列化、自動產生 Proxy)
└── 控制項擴充器 (Extender Controls:ModalPopup、AutoComplete、Calendar 等)

關鍵程式設計模型

1. 客戶端類別系統

Type.registerNamespace('MyApp');
MyApp.Customer = function() { MyApp.Customer.initializeBase(this); }
MyApp.Customer.prototype = {
    _name: null,
    get_name: function() { return this._name; },
    set_name: function(value) { this._name = value; this.raisePropertyChanged('name'); }
}
MyApp.Customer.registerClass('MyApp.Customer', Sys.Component);
  • 支援繼承、介面、屬性變更通知(INotifyPropertyChanged)、事件、Dispose 模式。

2. 元件與控制項

  • Sys.Component:非視覺元件(計時器、資料來源、WebService Proxy)。
  • Sys.UI.Control:綁定 DOM 元素的視覺控制項,生命週期:initialize → dispose。
  • Sys.UI.Behavior:附加於 DOM 元素的行為(拖曳、自動完成、彈出)。

3. 網頁服務呼叫

<asp:ScriptManager ID="sm" runat="server">
    <Services>
        <asp:ServiceReference Path="~/Services/CustomerService.asmx" />
    </Services>
</asp:ScriptManager>

// 客戶端呼叫
MyApp.Services.CustomerService.GetCustomer(id, onSuccess, onFailed, userContext);

function onSuccess(result) { /* result 為 JSON 反序列化物件 */ }
function onFailed(error) { alert(error.get_message()); }

4. UpdatePanel 部分更新

<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Label ID="lblTime" runat="server" />
        <asp:Button ID="btnRefresh" runat="server" Text="更新時間" OnClick="btnRefresh_Click" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

伺服器端 btnRefresh_Click 只更新 lblTime.Text,瀏覽器無整頁重新整理,體驗流暢。

Atlas/ASP.NET AJAX 核心優勢

特性說明
跨瀏覽器相容統一 DOM 事件、XMLHttpRequest、CSS 選取器差異
類別導向 JavaScript命名空間、繼承、介面、屬性、事件,結構化開發
伺服器端無縫整合ScriptManager 自動產生 Proxy、JSON 序列化、部分更新
擴充器模式不修改現有控制項即可附加豐富行為(Control Toolkit)
除錯支援Visual Studio 客戶端腳本除錯、ScriptManager ScriptMode=Debug

從 Atlas 遷移到現代架構

Atlas 為 ASP.NET AJAX 奠基,但現代開發建議:

  • ASP.NET Core + Blazor:C# 全端、WebAssembly、元件化。
  • ASP.NET Core + JavaScript 框架:React/Vue/Angular + ASP.NET Core Web API。
  • 維護舊專案:仍可使用 Microsoft.AspNet.ScriptManager.Ajax NuGet 套件,功能相容。

結語

Atlas 是微軟將 AJAX 引入 ASP.NET 主流的關鍵里程碑。它引入的客戶端類別系統、ScriptManager、UpdatePanel、WebService Proxy、擴充器模式,深刻影響後續 ASP.NET AJAX、ASP.NET Core 與 Blazor 的設計哲學。理解 Atlas 架構,有助於維護舊系統、領會現代框架演進脈絡,並欣賞「伺服器端開發體驗延伸至客戶端」的工程智慧。

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