主題：.NET2.0環(huán)境下的Ajax選型和應(yīng)用
研究需要解決的問題：
1 Ajax
應(yīng)用框架的選型及其性能對(duì)比
2
如何應(yīng)用
Ajax
3
應(yīng)用
Ajax
過程中應(yīng)該著重注意的問題
研究者：
Jimmy.Ke
時(shí)間：
2006-11-13
一 Demo說明
Ajax Demo Web Site
是一個(gè)完整的
.NET Website
，其中包含
5
個(gè)
ASPX
頁(yè)面及其對(duì)應(yīng)的
CS
文件。
為了方便對(duì)比，
Demo
中使用了三種
Ajax
應(yīng)用方式：
一是使用微軟提供的
Atlas
應(yīng)用框架，二是使用
Ajax.NET Professional
開源框架，三是使用針對(duì)
Ajax
的單純的
Javascript
包
Prototype
。三者對(duì)應(yīng)的關(guān)聯(lián)文件如下表所示：
|
應(yīng)用方式
|
文件名稱
|
描述
|
|
|
Default.aspx
|
首頁(yè)導(dǎo)航，列出四個(gè)
Demo
頁(yè)面的鏈接
|
|
Atlas
|
AtlasDemo.aspx
|
使用
Atlas
實(shí)現(xiàn)
Product
的
CRUD
功能，通過
UpdatePanel
完成無刷新操作。
|
|
|
|
|
|
AjaxPro
|
AjaxProDemo.aspx
|
使用
Ajax.NET Pro
實(shí)現(xiàn)
Product
的
CRUD
功能，編輯、刪除操作返回
true/false
的結(jié)果，通過
.NET DataGrid
控件實(shí)現(xiàn)頁(yè)面數(shù)據(jù)列表的呈現(xiàn)（
HTML
）。
|
|
|
|
|
|
AjaxProDemoSecond.aspx
|
使用
Ajax.NET Pro
實(shí)現(xiàn)
Product
的
CRUD
功能，編輯、刪除操作返回所有的
Product
列表，通過
.NET DataGrid
控件實(shí)現(xiàn)頁(yè)面數(shù)據(jù)列表的呈現(xiàn)（
HTML
）。
|
|
|
|
|
Prototype
|
PrototypeDemo.aspx
|
使用
Prototype
實(shí)現(xiàn)
Product
的
CRUD
功能，編輯、刪除操作返回所有的
Product
列表，
Client
和
Server
的數(shù)據(jù)以
JSON
格式傳輸。
|
|
|
|
|
|
|
|
|
Product.cs
|
Product
實(shí)體類
|
二 研究結(jié)論
1 Ajax
應(yīng)用框架選型
Ajax
應(yīng)用的核心是通過
XMLHttpRequest
對(duì)象向
Server
提交
Client
的請(qǐng)求，同步或者異步的獲取
Server
返回的
Response
信息，而
Client
和
Server
之前數(shù)據(jù)傳遞的方式可以采用
Text
、
XML
或者
JSON
格式。
Demo
中使用到的
Prototype
、
Ajax.NET Pro
、
Atlas Beta2
代表了目前
Ajax
應(yīng)用的三種主要方式：
Prototype
是目前應(yīng)用比較廣泛的最底層的遠(yuǎn)程調(diào)用工具包，其通常使用自己的
API
封裝
XMLHttpRequest
對(duì)象，使得調(diào)用
XMLHttpRequest
更加簡(jiǎn)單直觀。在
XMLHttpRequest
之前，我們通常使用內(nèi)嵌的
IFRAME
來實(shí)現(xiàn)無刷新頁(yè)面發(fā)送
http
請(qǐng)求的效果。因此，這些遠(yuǎn)程調(diào)用包必須支持那些不支持
XMLHttpRequest
的瀏覽器，以提高瀏覽器兼容性。類似的工具還比如
DOJO
。這類工具在應(yīng)用過程中需要設(shè)定自己的
URL
和參數(shù)，并且編寫相應(yīng)的
callback
函數(shù)來處理
Server
返回的
Response
結(jié)果。
在
PrototypeDemo.aspx
中，我們通過
Ajax.Request
向服務(wù)器提交請(qǐng)求，在
callback
函數(shù)中實(shí)現(xiàn)對(duì)
Server
的
Response
結(jié)果的處理和顯示。當(dāng)然，每個(gè)請(qǐng)求的
URL
參數(shù)是不同的。
Ajax.NET Pro
則是一種基于基于代理實(shí)現(xiàn)的
Ajax
框架，其允許
Client
的
Javascript
直接與
Server
的類實(shí)現(xiàn)一一映射，使
Client
的
Javascript
可以通過他們直接訪問
Server
的類對(duì)象及其
API
，其訪問方式類似
RPC
，直接調(diào)用相應(yīng)的
API
完成業(yè)務(wù)操作，仍然需要編寫相應(yīng)的
callback
函數(shù)處理
Server
返回的
Response
結(jié)果。
在
AjaxProDemo.aspx.cs
中，我們通過在方法頭部添加
[AjaxPro.AjaxMethod]
標(biāo)注，在
Page_Load
中將類以
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxProDemo))
的形式予以注冊(cè)，
這樣就可以在
Client
直接調(diào)用。
Atlas
則是基于組件的應(yīng)用方式，其允許使用拖拉的方式在
IDE
的設(shè)計(jì)視圖中快速創(chuàng)建包含
Ajax
功能的組件，并且能夠最大程度的利用
.NET
本身提供的
DataGrid
、
Button
等
UI
控件。這些組件提供了快速開發(fā)
Ajax
應(yīng)用的另一捷徑，開發(fā)過程不需要編寫
callback
函數(shù)。
就目前而言，
Atlas
能夠利用最多的是
UpdatePanel
控件，通過其實(shí)現(xiàn)頁(yè)面的無刷新或者部分刷新。
2 Ajax
框架性能及開發(fā)效率對(duì)比
A
、數(shù)據(jù)流量
Demo
中的四個(gè)
Sample
都實(shí)現(xiàn)了針對(duì)
Product
的簡(jiǎn)單
CRUD
功能。這里我們使用
Fiddler HTTP Debugger
來測(cè)試整個(gè)操作過程中
Client
和
Server
交互的數(shù)據(jù)量。
加載
Product List
：
|
請(qǐng)求
URL
|
數(shù)據(jù)流量
|
說明
|
|
Prototype
|
|
PrototypeServerResponse.aspx
?action=listProduct
|
Request Count: 1
Bytes Sent: 380
Bytes Received: 2,150
|
獲取
Product
列表，以
JSON
的格式返回，客戶端使用
Javascript
腳本處理呈現(xiàn)。
|
|
Ajax.NET Pro
（
Second
）
|
|
ajaxpro/AjaxProDemoSecond,
App_Web_qgwv3twq.ashx
|
Request Count: 1
Bytes Sent: 493
Bytes Received: 1,392
|
獲取
Product
列表，以
HTML
的格式返回，客戶端直接呈現(xiàn)。
|
|
Atlas
|
|
AtlasDemo.aspx
|
Request Count: 1
Bytes Sent: 827
Bytes Received: 6,391
|
獲取
Product
列表，
Server
完成
DataGrid
數(shù)據(jù)源綁定呈現(xiàn)。
|
刪除
Product
：
|
請(qǐng)求
|
數(shù)據(jù)流量
|
說明
|
|
Prototype
|
|
PrototypeServerResponse.aspx
?action=deleteProduct&productId=1
|
Request Count: 1
Bytes Sent: 446
Bytes Received: 1,891
|
傳送
ProductId
，完成刪除操作，并獲取
Product
列表到
Client
端呈現(xiàn)。
|
|
Ajax.NET Pro
（
Second
）
|
|
ajaxpro/AjaxProDemoSecond,
App_Web_qgwv3twq.ashx
|
Request Count: 1
Bytes Sent: 504
Bytes Received: 1,300
|
調(diào)用遠(yuǎn)程
RPC
接口，完成刪除操作，并獲取
Product
列表的
HTML
在
Client
端呈現(xiàn)。
|
|
Atlas
|
|
AtlasDemo.aspx
|
Request Count: 1
Bytes Sent: 2,287
Bytes Received: 5,913
|
觸發(fā)
Server
端的
Action
事件，完成刪除操作，需要
Postback
整個(gè)頁(yè)面。
|
獲取
Product Info
：
|
請(qǐng)求
|
數(shù)據(jù)流量
|
說明
|
|
Prototype
|
|
PrototypeServerResponse.aspx
?action=getProduct&productId=8
|
Request Count: 1
Bytes Sent: 443
Bytes Received: 403
|
傳送
ProductId
，獲取
JSON
格式的
Product
信息，
Client
端完成解析并呈現(xiàn)。
|
|
Ajax.NET Pro
（
Second
）
|
|
ajaxpro/AjaxProDemoSecond,
App_Web_qgwv3twq.ashx
|
Request Count: 1
Bytes Sent: 506
Bytes Received: 284
|
調(diào)用
RPC
接口，獲取
Text
格式的
Product
信息，
Client
端完成解析并呈現(xiàn)。
|
|
Altas
|
|
AtlasDemo.aspx
|
Request Count: 1
Bytes Sent: 2,185
Bytes Received: 6,275
|
觸發(fā)
Server
端的
Action
事件，獲取
Product
信息，需要
Postback
整個(gè)頁(yè)面。
|
編輯
Product
：
|
請(qǐng)求
|
數(shù)據(jù)流量
|
說明
|
|
Prototype
|
|
PrototypeServerResponse.aspx
?action=updateProduct&productId=8
&productName=Sony&manufacturer=China
|
Request Count: 1
Bytes Sent: 482
Bytes Received: 1,877
|
傳送
ProductId
等參數(shù)，完成保存操作，并獲取
Product
列表。
|
|
Ajax.NET Pro
（
Second
）
|
|
ajaxpro/AjaxProDemoSecond,
App_Web_qgwv3twq.ashx
|
Request Count: 1
Bytes Sent: 549
Bytes Received: 1,284
|
調(diào)用遠(yuǎn)程
PPC
接口，完成保存操作，并獲取
HTML
格式的
Product
列表。
|
|
Atlas
|
|
AtlasDemo.aspx
|
Request Count: 1
Bytes Sent: 2,218
Bytes Received: 5,913
|
觸發(fā)
Server
端的
Action
事件，完成保存操作，需要
Postback
整個(gè)頁(yè)面。
|
增加
Product
：
|
請(qǐng)求
|
數(shù)據(jù)流量
|
說明
|
|
Prototype
|
|
PrototypeServerResponse.aspx
?action=addProduct&productName=Sony
&manufacturer=China
|
Request Count: 1
Bytes Sent: 467
Bytes Received: 2,050
|
傳送
ProductName
等參數(shù)，完成增加操作，并獲取
JSON
格式的
Product
列表。
|
|
Ajax.NET Pro
|
|
ajaxpro/AjaxProDemoSecond,
App_Web_qgwv3twq.ashx
|
Request Count: 1
Bytes Sent: 529
Bytes Received: 1,364
|
調(diào)用遠(yuǎn)程
RPC
接口，完成增加操作，并獲取
HTML
格式的
Product
列表。
|
|
Atlas
|
|
AtlasDemo.aspx
|
Request Count: 1
Bytes Sent: 2,249
Bytes Received: 6,533
|
觸發(fā)
Server
端的
Action
事件，完成增加操作，需要
Postback
整個(gè)頁(yè)面。
|
結(jié)論：
從上述對(duì)比表中可以看到，
Atlas
在實(shí)現(xiàn)無刷新的顯示過程中，還是需要
Postback
整個(gè)頁(yè)面，只是這個(gè)過程是以異步方式進(jìn)行處理的；當(dāng)
Server
端完成響應(yīng)后，
Atlas
客戶端根據(jù)頁(yè)面的時(shí)候完成
partial-page
的更新。所以對(duì)于任何局部頁(yè)面的操作，頁(yè)面的
Postback
還是需要的。如果頁(yè)面的數(shù)據(jù)量特別大，
Atlas
將會(huì)導(dǎo)致效率的降低。
Prototype
和
Ajax.NET Pro
的數(shù)據(jù)量差別不大。
B
、開發(fā)效率
Atlas
緊密的和
.NET
的控件結(jié)合在一起。如果使用
Atlas
，則可以最大程度的復(fù)用
.NET
的控件，比如數(shù)據(jù)顯示控件。
使用
Prototype
，需要在
Javascript
代碼中提交
Request
請(qǐng)求到
Server
，并且編寫相應(yīng)的
callback
函數(shù)完成
Response
結(jié)果的解析和呈現(xiàn)。
使用
Ajax.NET Pro
，可以直接調(diào)用
Server
的類的方法（遠(yuǎn)程
RPC
），不過還是需要編寫相應(yīng)的
callback
函數(shù)完成
Response
結(jié)果的解析和呈現(xiàn)。
C
、
Server
端返回的數(shù)據(jù)格式
Ajax.NET Pro
中提供了序列化成
JSON
格式的接口和方法。
Server
端返回的數(shù)據(jù)格式，可以是簡(jiǎn)單的
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
點(diǎn)擊這里下載Demo源碼
點(diǎn)擊這里下載Demo Web Site
posted on 2006-11-16 10:06
eamoi 閱讀(6375)
評(píng)論(39) 編輯 收藏 所屬分類:
AJAX