随笔-86  评论-767  文章-3  trackbacks-3

 

主题:.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 阅读(6051) 评论(39)  编辑  收藏 所属分类: AJAX

评论:
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2006-11-16 16:00 | 一滴水
收下,辛苦了!  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2006-12-24 13:52 | dfasdf
榕城社区、http://www.0591ok.com">http://www.0591ok.com,福州、城市生活、生活社区、福州城市平台、福州网友的网上家园、二手买卖,房屋出租,房屋出售,求租,福州旅游信息,福州时尚前沿,吃喝玩乐,城市运动,电脑问题求助,数码广场,便民生活,今日特价,福州小鱼,福州信息平台,亲子,交通,读书,运动,网络,数码,电脑,旅游,理财,家居,求职,考试,电信,爱心,房屋,吃喝,健康,工作,福州家园,谈天,游戏,美容,消费,礼仪婚姻,福州团购,服饰宠物,马上注册自己的社区--http://www.0591ok.com">http://www.0591ok.com   回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-01-05 09:31 | 过路人
看完了,下载下去了,辛苦了,先去体验一下了。谢谢了。  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-03-10 12:21 | 吕梁

[url=http://www.angel86.com/products1.html]纯净水设备[/url]  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-03-10 12:22 | 吕梁



航晨打折<a href="http://www.hangchenair.com">机票</a>网">http://www.hangchenair.com">机票</a>网,,主营世界各地的国际机票,新移民<a href="http://www.hangchenair.com">机票</a>,留学生机票,飞机票,打折机票,特价机票。常年为各企事业单位,国家机关部委,外企商社,大专院校,科研院所,民间组织,出入境及留学服务中介机构及个人免费订票,送票!我们将热情的为您服务!友情提示:由于<a href="http://www.hangchenair.com">机票</a>信息具有及时性,网上数据也许不能及时更新,了解更多机票信息,请拨打预订热线『010-51665355 62199600』,我们免费为您咨询!
  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载)[未登录] 2007-03-13 23:11 | king
辛苦了!先侃侃  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-10-16 10:41 | 传奇世界私服
NET2.0环境下的Ajax选型和应用  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-10-22 12:00 | 新开传世私服
.0环境下的Ajax选型和应用  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-11-07 23:35 | 新开传世私服
[sdgsgdsg  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-11-07 23:36 | 传世私服一条龙
fwetwet  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-12-03 13:56 | 机票预订
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-12-07 19:59 | 传世私服
Ajax选型和应用  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2007-12-07 19:59 | 征途私服
6544  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:29 | 魔兽世界私服
魔兽世界99cssf  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:29 | 魔兽世界私服
魔兽世界wool999  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:30 | 魔兽私服
魔兽bncssf  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:30 | 魔兽世界私服
魔兽世界bncssf  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:30 | 魔兽私服
魔兽99cssf  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:31 | 魔兽私服
魔兽wool999  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:31 | 魔兽私服
魔兽woooldos  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:31 | 魔兽世界私服
魔兽世界woooldos  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:32 | 魔兽世界私服
魔兽世界150823  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:32 | 魔兽世界私服
魔兽世界760066  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:33 | 魔兽世界私服
魔兽世界798691  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:33 | 魔兽世界私服
魔兽世界648174  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:33 | 魔兽世界私服
魔兽世界715812  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:36 | 魔兽世界私服
魔兽世界500684  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:36 | 魔兽世界私服
魔兽世界978779  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:36 | 魔兽世界私服
魔兽世界168575  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:37 | 魔兽私服
魔兽168575  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:38 | 魔兽私服
魔兽150823  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:39 | 魔兽私服
魔兽500684  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:39 | 魔兽私服
魔兽648174  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:39 | 魔兽私服
魔兽760066  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:40 | 魔兽私服
魔兽798691  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-04-01 10:40 | 魔兽私服
魔兽978779  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2008-07-20 12:46 | 滑滑公子
总结的不错,download
  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2009-04-08 10:34 | 谢谢
谢谢  回复  更多评论
  
# re: [原创].NET2.0环境下的Ajax选型和应用(提供Demo源码下载) 2011-05-28 15:58 | hotion
已下载。。不错  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: