.NET2.0环境下的Ajax选型和应用(提供Demo源码下载)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了.NET2.0环境下的Ajax选型和应用(提供Demo源码下载),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含7527字,纯文字阅读大概需要11分钟。
内容图文
![.NET2.0环境下的Ajax选型和应用(提供Demo源码下载)](/upload/InfoBanner/zyjiaocheng/383/814382fb95984cf6aeb3d69ea0d260cf.jpg)
主题:.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 数据源绑定呈现。 |
请求 | 数据流量 | 说明 |
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 整个页面。 |
请求 | 数据流量 | 说明 |
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 整个页面。 |
请求 | 数据流量 | 说明 |
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 整个页面。 |
请求 | 数据流量 | 说明 |
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 整个页面。 |
三 使用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
内容总结
以上是互联网集市为您收集整理的.NET2.0环境下的Ajax选型和应用(提供Demo源码下载)全部内容,希望文章能够帮你解决.NET2.0环境下的Ajax选型和应用(提供Demo源码下载)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。