.NET2.0環境下的Ajax選型和應用（提供Demo源碼下載）_AJAX相關

主題：.NET2.0環境下的Ajax選型和應用

研究需要解決的問題：

1 Ajax 應用程式框架的選型及其效能對比

2 如何應用 Ajax

3 應用 Ajax 過程中應該著重注意的問題

研究者： Jimmy.Ke

時間： 2006-11-13

一 Demo說明

Ajax Demo Web Site 是一個完整的 .NET Website ，其中包含 5 個 ASPX 頁面及其對應的 CS 檔案。

為了方便對比， Demo 中使用了三種 Ajax 應用方式：

一是使用微軟提供的 Atlas 應用程式框架，二是使用 Ajax.NET Professional 開源架構，三是使用針對 Ajax 的單純的 Javascript 包 Prototype 。三者對應的關聯檔案如下表所示：

應用方式	檔案名稱	描述
	Default.aspx	首頁導航，列出四個 Demo 頁面的連結
Atlas	AtlasDemo.aspx	使用 Atlas 實現 Product 的 CRUD 功能，通過 UpdatePanel 完成無重新整理操作。
AjaxPro	AjaxProDemo.aspx	使用 Ajax.NET Pro 實現 Product 的 CRUD 功能，編輯、刪除操作返回 true/false 的結果，通過 .NET DataGrid 控制項實現頁面資料列表的呈現（ HTML ）。
	AjaxProDemoSecond.aspx	使用 Ajax.NET Pro 實現 Product 的 CRUD 功能，編輯、刪除操作返回所有的 Product 列表，通過 .NET DataGrid 控制項實現頁面資料列表的呈現（ HTML ）。
Prototype	PrototypeDemo.aspx	使用 Prototype 實現 Product 的 CRUD 功能，編輯、刪除操作返回所有的 Product 列表， Client 和 Server 的資料以 JSON 格式傳輸。
	Product.cs	Product 實體類

二 研究結論

1 Ajax 應用程式框架選型

Ajax 應用的核心是通過 XMLHttpRequest 對象向 Server 提交 Client 的請求，同步或者非同步擷取 Server 返回的 Response 資訊，而 Client 和 Server 之前資料傳遞的方式可以採用 Text 、 XML 或者 JSON 格式。

Demo 中使用到的 Prototype 、 Ajax.NET Pro 、 Atlas Beta2 代表了目前 Ajax 應用的三種主要方式：

Prototype 是目前應用比較廣泛的最底層的遠程調用工具包，其通常使用自己的 API 封裝 XMLHttpRequest 對象，使得調用 XMLHttpRequest 更加簡單直觀。在 XMLHttpRequest 之前，我們通常使用內嵌的 IFRAME 來實現無重新整理頁面發送 http 請求的效果。因此，這些遠程調用包必須支援那些不支援 XMLHttpRequest 的瀏覽器，以提高瀏覽器安全色性。類似的工具還比如 DOJO 。這類工具在應用過程中需要設定自己的 URL 和參數，並且編寫相應的 callback 函數來處理 Server 返回的 Response 結果。

在 PrototypeDemo.aspx 中，我們通過 Ajax.Request 向伺服器提交請求，在 callback 函數中實現對 Server 的 Response 結果的處理和顯示。當然，每個請求的 URL 參數是不同的。

Ajax.NET Pro 則是一種基於基於代理實現的 Ajax 架構，其允許 Client 的 Javascript 直接與 Server 的類實現一一映射，使 Client 的 Javascript 可以通過他們直接存取 Server 的類對象及其 API ，其訪問方式類似 RPC ，直接調用相應的 API 完成業務操作，仍然需要編寫相應的 callback 函數處理 Server 返回的 Response 結果。

在 AjaxProDemo.aspx.cs 中，我們通過在方法頭部添加 [AjaxPro.AjaxMethod] 標註，在 Page_Load 中將類以 AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxProDemo)) 的形式予以註冊， 這樣就可以在 Client 直接調用。

Atlas 則是基於組件的應用方式，其允許使用拖拉的方式在 IDE 的設計檢視中快速建立包含 Ajax 功能的組件，並且能夠最大程度的利用 .NET 本身提供的 DataGrid 、 Button 等 UI 控制項。這些組件提供了快速開發 Ajax 應用的另一捷徑，開發過程不需要編寫 callback 函數。

就目前而言， Atlas 能夠利用最多的是 UpdatePanel 控制項，通過其實現頁面的無重新整理或者部分重新整理。

2 Ajax 架構效能及開發效率對比

A 、資料流量

Demo 中的四個 Sample 都實現了針對 Product 的簡單 CRUD 功能。這裡我們使用 Fiddler HTTP Debugger 來測試整個操作過程中 Client 和 Server 互動的資料量。

載入 Product List ：

請求 URL	資料流量	說明
Prototype
PrototypeServerResponse.aspx ?action=listProduct	Request Count:      1 Bytes Sent:     380 Bytes Received: 2,150	擷取 Product 列表，以 JSON 的格式返回，用戶端使用 Javascript 指令碼處理呈現。
Ajax.NET Pro （ Second ）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     493 Bytes Received: 1,392	擷取 Product 列表，以 HTML 的格式返回，用戶端直接呈現。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     827 Bytes Received: 6,391	擷取 Product 列表， Server 完成 DataGrid 資料來源綁定呈現。

刪除 Product ：

請求	資料流量	說明
Prototype
PrototypeServerResponse.aspx ?action=deleteProduct&productId=1	Request Count:      1 Bytes Sent:     446 Bytes Received: 1,891	傳送 ProductId ，完成刪除操作，並擷取 Product 列表到 Client 端呈現。
Ajax.NET Pro （ Second ）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     504 Bytes Received: 1,300	調用遠程 RPC 介面，完成刪除操作，並擷取 Product 列表的 HTML 在 Client 端呈現。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,287 Bytes Received: 5,913	觸發 Server 端的 Action 事件，完成刪除操作，需要 Postback 整個頁面。

擷取 Product Info ：

請求	資料流量	說明
Prototype
PrototypeServerResponse.aspx ?action=getProduct&productId=8	Request Count:      1 Bytes Sent:     443 Bytes Received: 403	傳送 ProductId ，擷取 JSON 格式的 Product 資訊， Client 端完成解析並呈現。
Ajax.NET Pro （ Second ）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     506 Bytes Received: 284	調用 RPC 介面，擷取 Text 格式的 Product 資訊， Client 端完成解析並呈現。
Altas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,185 Bytes Received: 6,275	觸發 Server 端的 Action 事件，擷取 Product 資訊，需要 Postback 整個頁面。

編輯 Product ：

請求	資料流量	說明
Prototype
PrototypeServerResponse.aspx ?action=updateProduct&productId=8 &productName=Sony&manufacturer=China	Request Count:      1 Bytes Sent:     482 Bytes Received: 1,877	傳送 ProductId 等參數，完成儲存操作，並擷取 Product 列表。
Ajax.NET Pro （ Second ）
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     549 Bytes Received: 1,284	調用遠程 PPC 介面，完成儲存操作，並擷取 HTML 格式的 Product 列表。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,218 Bytes Received: 5,913	觸發 Server 端的 Action 事件，完成儲存操作，需要 Postback 整個頁面。

增加 Product ：

請求	資料流量	說明
Prototype
PrototypeServerResponse.aspx ?action=addProduct&productName=Sony &manufacturer=China	Request Count:      1 Bytes Sent:     467 Bytes Received: 2,050	傳送 ProductName 等參數，完成增加操作，並擷取 JSON 格式的 Product 列表。
Ajax.NET Pro
ajaxpro/AjaxProDemoSecond, App_Web_qgwv3twq.ashx	Request Count:      1 Bytes Sent:     529 Bytes Received: 1,364	調用遠程 RPC 介面，完成增加操作，並擷取 HTML 格式的 Product 列表。
Atlas
AtlasDemo.aspx	Request Count:      1 Bytes Sent:     2,249 Bytes Received: 6,533	觸發 Server 端的 Action 事件，完成增加操作，需要 Postback 整個頁面。

結論：

從上述對比表中可以看到， Atlas 在實現無重新整理的顯示過程中，還是需要 Postback 整個頁面，只是這個過程是以非同步方式進行處理的；當 Server 端完成響應後， Atlas 用戶端根據頁面的時候完成 partial-page 的更新。所以對於任何局部頁面的操作，頁面的 Postback 還是需要的。如果頁面的資料量特別大， Atlas 將會導致效率的降低。

Prototype 和 Ajax.NET Pro 的資料量差別不大。

B 、開發效率

Atlas 緊密的和 .NET 的控制項結合在一起。如果使用 Atlas ，則可以最大程度的複用 .NET 的控制項，比如資料顯示控制項。

使用 Prototype ，需要在 Javascript 代碼中提交 Request 請求到 Server ，並且編寫相應的 callback 函數完成 Response 結果的解析和呈現。

使用 Ajax.NET Pro ，可以直接調用 Server 的類的方法（遠程 RPC ），不過還是需要編寫相應的 callback 函數完成 Response 結果的解析和呈現。

C 、 Server 端返回的資料格式

Ajax.NET Pro 中提供了序列化成 JSON 格式的介面和方法。

Server 端返回的資料格式，可以是簡單的 Text ，也可以是 XML 文檔，或者通過 Ajax.NET Pro 序列化成 JSON 格式。

三 使用Ajax需要注意的問題

暫緩。

四 參考材料

Micorsoft Fiddler HTTP Debugger ： http://www.fiddlertool.com/fiddler/

Prototype ： http://prototype.conio.net/

Ajax.NET Pro ： http://www.ajaxpro.info/

Atlas Beter 2 ： http://ajax.asp.net/default.aspx?tabid=47

點擊這裡下載Demo源碼
點擊這裡下載Demo Web Site