主题：.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
posted on 2006-11-16 10:06
eamoi 阅读(6396)
评论(39) 编辑 收藏 所属分类:
AJAX