ASP.NET AJAX 在Web开发中的应用
摘 要 ASP.NET AJAX 实现了Web页面丰富的部分刷新效果。本文通过介绍AJAX原理,引申到ASP.NET AJAX原理,并总结了在Web 开发应用中要注意的若干问题。合理地利用ASP.NET AJAX技术,Web开发应用就能获得更好的交互效果。
关键词 ASP.NET AJAX Web开发 ASP.NET AJAX控件
1 引言
当前,Web技术的不断发展使得B/S得以广泛地应用。但Web传统的开发技术使得网页的交互性能大打折扣。随着AJAX技术的兴起,Web开发技术超越了传统的开发模式,发生了质的飞跃。而微软公司推出的ASP.NET AJAX框架与ASP.NET的结合,使得Web的开发方式在.NET环境下更加简单易用,页面交互性能也得到很大提高。
2 Ajax引擎的原理
AJAX(Asynchronous JavaScript and XML)是现有多种技术的综合,包括JavaScript、XHTML、CSS、DOM、XML、XSTL和XMLHttpRequest。AJAX使用XHTML和CSS标准化呈现数据,使用DOM实现动态显示和交互数据,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用JavaScript绑定和处理所有数据。AJAX为交互操作较多、数据读写频繁和数据分类良好的Web应用提供了一个很好的解决方案。其中XMLHttpRequest、JavaScript和DOM是AJAX技术的核心。
2.1 XMLHttpRequest XMLHttpRequest是AJAX引擎的核心技术,是AJAX引擎解决无需刷新整个页面即可从服务器获取所需数据问题的关键。在微软IE 平台下XMLHttpRequest 是XMLHTTP 组件的一个对象,它通过允许开发人员在Web 页面内部使用XMLHTTP ActiveX 组件扩展自身功能,开发人员不必从当前的Web 页面导航而直接与服务器上的数据库进行双向数据传输。该项功能相当重要,它弥补了无状态连接的缺点,排除下载冗余Web 数据的需要,从而提高了进程速度。
2.2 DOM ( Document object Model ) DOM 是给HTML 和XML 文件使用的一组API。它提供了文件的结构表述,允许开发人员改变其中的内容,建立网页与程序语言沟通的桥梁。所有Web 开发人员操作及建立文件的属性、方法及事件都以对象方式来展现,这些对象均可由当今大多数浏览器以脚本取用。一个用HTML 或XHTML 构建的网页可看作是一组结构化数据,这些数据被封在DOM (Document Object Model)中,且DOM 提供对网页中各个对象的读写支持。
2.3 JavaScript JavaScript是一种在浏览器中大量使用的跨平台编程语言,常被用来制作网页特效或表单验证。在AJAX 中JavaScript 则是XMLHttpRequest与DOM 交互的桥梁以及AJAX 引擎工作的主要推动力。JavaScript 通过调用XMLHttpRequest 的属性和方法获取服务器端数据,调用DOM 的API更新Web 页面内容,从而实现整个页面的无刷新更新页面的效果。
3 ASP.NET AJAX架构
ASP.NET AJAX由客户端脚本库和服务端组件组成,这两者被集成在一起提供了一个功能强大的开发框架。客户端脚本库中包含两种最熟悉的动态网页技术,分别是跨浏览器使用的ECMAScript(JavaScript)技术和动态的HTML (DHTML)网页开发技术,并且将这两种技术集成到了ASP.NET 2.0 基于服务器端的开发平台中。图1解释说明了包含客户端脚本库和服务端组件的ASP.NET AJAX的功能。
3.1 ASP.NET服务器端架构 ASP.NET服务器端组件由ASP.NET控件和组件构成,用于管理UI和应用程序流,管理序列,验证和控件扩展性等。此外,ASP.NET Web服务也能用于访问ASP.NET应用服务,包括窗体验证和用户验证。
3.2 ASP.NET服务器控件 ASP.NET AJAX控件由服务器端和客户端代码构成在一起以产生类似于AJAX的行为。以下是最常用的ASP.NET AJAX控件。 ●ScriptManager控件 ●UpdatePanel控件 ●UpdateProgress控件 ●Timer控件
3.3 ASP.NET AJAX客户端架构 ASP.NET AJAX客户端脚本库由JavaScript(.js)文件构件。这些.js文件提供了面向对象开发的特性。这一特性使得连续性和模块化在客户端脚本中达到一个新的层次。以下是ASP.NET AJAX中客户端的各个层次。 ⑴浏览器的兼容层。通过最常用的浏览器为ASP.NET AJAX脚本提供兼容性。 ⑵ASP.NET AJAX 核心服务,这种核心服务已经扩展到了JavaScript。例如classes,namespaces,event handling,inheritance,data types,and object serialization。 ⑶ASP.NET AJAX基础类库,包括组件如string builders and extended error handling。 ⑷网络工作层。该层用于处理基于Web服务和应用之间的通信,管理异步式远程方法的调用。
图1 ASP.NET AJAX服务器和客户端架构
4 ASP.NET AJAX在Web开发中的应用
4.1 ASP.NET AJAX开发环境 图2 ASP.NET AJAX服务器控件 在Web开发应用中,利用VS2005开发工具和ASP.NET AJAX1.0框架进行Web页面的开发是值得推荐的一种方法。VS2005开发工具本身并没有集成这一框架,因此,在做Web开发时就必须安装这一框架。可以从微软官方网站上下载(www.asp.net)。下载安装后,可在VS2005开发环境中看到ASP.NET AJAX服务器控件。如图2所示。 要注意的是,安装ASP.NET AJAX框架后,并不是VS2005开发环境中的所有页面模板都能支持AJAX技术。只有ASP.NET AJAX提供的默认模板才能支持。对于其他ASP.NET模板,如果要想支持AJAX,就必须配置Web.config文件。具体配置可以参考微软官方文档。
4.2 ASP.NET AJAX控件在Web开发中的应用
4.2.1 ScriptManager控件 用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service,所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件,并且,如果要使用其他ASP.NET AJAX控件,就必须要有ScriptManager控件的支持。在ScriptManager控件中我们可以指定需要的脚本库,或者指定通过JS来调用的Web Service,还可以指定页面错误处理等。使用<asp:ScriptManager/>来定义一个ScriptManager,简单的ScriptManager定义形式是: <asp:ScriptManager ID="ScriptManager1" runat="server"> <AuthenticationService Path="" /> <ProfileService LoadProperties="" Path="" /> <Scripts> <asp:ScriptReference/> </Scripts> <Services> <asp:ServiceReference /> </Services> </asp:ScriptManager>
默认情况下,ScriptManager控件为页面中的微软脚本库注册脚本。以使客户端脚本库进行各种系统扩展,并且支持局部页面刷新和Web Services回调的特性。在Web应用开发中,ScriptManager控件是必须的。要使用ASP.NET AJAX控件,每个.aspx页面上必须有且只有一个ScriptMangeger控件。当.aspx页面与母版页结合作为内容页使用时,只须在母版页上放置一个ScriptManger控件,内容页上无须再放该控件。 值得注意的是,页面上任何用ScriptManger控件注册的脚本和所有事件处理脚本都必须在页面<form>元素内。否则脚本将不会被注册或者被执行。
4.2.2 UpdatePanel控件 该控件可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。一个页面上可以放一个或者多个UpdatePanel控件,并且UpdatePanel控件还可以嵌套使用。UpdatePanel的工作依赖于ScriptManager服务端控件和客户端PageRequestManager类。当ScriptManager中允许页面局部更新时,它会以异步的方式回传给服务器,与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新,在从服务端返回HTML之后,PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。UpdatePanel的工作原理如图3如示。
图3 UpdatePanel的工作原理图
简单的UpdatePanel定义如下: <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers> </asp:UpdatePanel> <ContentTemplate>标签用来定义UpdatePanel的内容,在它里面可以放任何ASP.NET元素。<Triggers>属性有两种:分别为AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器,它需要设置的属性有控件ID和服务端控件的事件;PostBackTrigger用来指定在UpdatePanel中的某个服务端控件,它所引发的回送不使用异步回送,而仍然是传统的整页回送。
4.2.3 UpdateProgress控件 在UpdatePanel控件中的内容进行局部刷新时,该控件可以提供刷新状态的信息。前文所述,一个页面上可以放一个或者多个UpdatePanel控件,但是,当其中一个UpdatePanel中更新的内容很缓慢,需要用户等待很长时间时,很容易让用户误以为应用程序处于“死机”状态。在这种情况下,UpdateProgress控件就发挥出它的特性,提供页面部分内容刷新时的状态信息。一个页面上,一个UpdateProgress控件可以和一个UpdataPanel控件关联,也可以和多个UpdatePanel控件关联。UpdateProgress控件提供了AssociatedUpdate PanelID属性,可以指定UpdateProgress控件显示哪一个UpdatePanel控件。 UpdateProgress控件的简单定义如下: <asp:UpdateProgressID=”UpdateProgress1” runat=”server” AssociatedUpdatePanelID= UpdatePanel1"> <ProgressTemplate> 数据正在读取中,请稍后…… </ProgressTemplate> </asp:UpdateProgress>
4.2.4 Timer控件 该控件用于在一个规定的时间内执行提交操作。使用Timer控件可以执行提交整个页面操作,也可以和UpdatePanel控件一起使用,在规定时间内执行页面的局部刷新操作。Timer控件作为服务器控件将JavaScript部件嵌入到了Web页面中,当Timer控件的Interval属性设置的间隔时间到达时,该部件便会激发来自于浏览器的提交操作。Timer控件设置的属性操作在服务器端运行,并且将这些属性值传递给JavaScript部件。与其他控件一样,Timer控件也需要依赖于ScriptManager控件。Timer控件既可以放在UpdatePanel控件外,也可以放在UpdatePanel控件内。其简单的定义如下: <asp:Timer ID="Timer1" runat="server"> </asp:Timer> 值得注意的是,如果把Timer控件的Interval属性值设置得过小,会对Web服务器造成严重的阻塞。所以,当页面上要刷新的内容部分是必要的而且是频繁的时候,才考虑使用Timer控件。
5 VS2005开发环境中使用ASP.NET AJAX控件要注意的问题
在利用VS2005进行Web开发的过程中,需要使用各种服务器控件。一般情况下,VS2005的常用控件都是可以和ASP.NET AJAX控件结合使用的。但是,以下控件与ASP.NET AJAX控件有不相兼容的地方,是需要注意的。
5.1 与UpdatePanel控件不兼容的控件 ⑴TreeView和Menu控件; Web Parts 控件; Substitution控件。 ⑵登录控件,如Login,PasswordRecovery,Change Password和CreateUserWizard控件。在默认情况下,上述控件与UpdatePanel控件是不相兼容的。当上述控件转换为可编辑状态时,登录控件中的验证控件便可以与UpdatePanel控件兼容。 ⑶验证控件类。如BaseCompareValidator,BaseValidator,CompareValidator,customValidator,RangeValidator,Regular ExpressionValidator,RequiredFieldValidator和Validation Summary控件。这些控件在默认情况下也可以与UpdatePanel控件结合使用,但是在Web应用程序发布之后,上述验证功能可能会出现失效情形。要使得这些验证控件能与UpdatePanel控件兼容,需要把上述验证类控件的Enable ClientScript属性设置为false。这样,就不允许客户端脚本被用于在浏览器端执行验证操作。在异步式提交操作中,验证控件就会在服务器端执行验证操作。 ⑷GridView和DetailsView控件。在默认情况下,GridView和DetailsView控件与UpdatePanel控件可正常兼容使用。但是,如果把它们的EnableSortingAndPagingCallbacks属性设置为True的时候(默认值为False),在UpdatePanle中的GridView和DetailsView控件的排序和分页功能将失效。⑸FileUpload控件。FileUpload控件在默认情况下,放在UpdatePanel中并且有控件触发时,不能发挥上传作用。但是当UpdatePanel的Triggers属性中,设置触发控件(例如Button,)为PostBack时,FileUpload可以发挥上传功能,只是整个页面不能局部刷新。
5.2 页面跳转要注意的问题 通常情况下,开发Web应用程序就必然会有页面之间的传值与跳转。如果UpdatePanel内有触发页面跳转的控件(如Button),那么该控件的事件中就不能用如下的语句,否则会弹出异常的对话框。 ⑴ 调用Response.Write(): ⑵ 调用Response filters: ⑶ HttpModules: ⑷ 调用Server.Transfer()。 5.3 利用ASP.NET AJAX控件后,弹出对话框的问题 在使用ASP.NET AJAX控件后,如果想利用Js脚本来输出一些提示对话框,往往会想到利用 Page.Register ClientScriptBlock或者 Page.RegisterStartupScript注册,但是,页面上仍然没有提示信息。利用如下语句即可以解决这个问题: ScriptManager.RegisterClientScriptBlock(UpdatePanel1,this.GetType(),"click","alert('提示信息')",true); 就可以正常的弹出alert对话框了。 需要注意的是,如果在页面中有多个UpdatePanel,如果每个UpdatePanel的UpdateMode的属性值都是“always”(默认值),则可以使用那个UpdatePanel的实例作为参数;如果每个UpdaePanel的UpdateMode属性值为conditional,那么就必须使用正在更新的那个UpdatePanel作为参数,这样脚本才能起作用。
6 小结
AJAX因具有独特的优势,迅速成为Web研究热点,并在实际开发得到广泛应用,使网页开发的效能得到了很大的扩展。本文从AJAX的理论出发,引申到ASP.NET AJAX的原理,总结了利用VS2005开发工具和ASP.NET AJAX框架开发WEB应用程序中的若干问题,为Web应用的开发提供了很好的借鉴作用。ASP.NET AJAX将会是Web开发中重要的利器,应用也将会越来越广泛。
参考文献
[1]奚江华. ASP.NET 2.0 开发详解—使用C#[M].北京: 清化大学出版社,2006
[2]谢小魁. Ajax技术及其在WebGIS中的应用.计算机与信息技术[J].2007,第3期
[3]微软官方网站:http://www.asp.net/ajax
[4]陈冠军.征服ASP.NET 2.0 Ajax——Web开发技术详解[M].北京:人民教育出版社,2007 [5]
ASP.NET AJAX 在Web开发中的应用相关推荐
- 探讨微软ASP.NET AJAX控件开发技术(服务器端)
一.简介 到目前为止,我们已经讨论了开发Ajax控件所涉及的客户端相关技术.现在,让我们来讨论此过程中与服务器端相关的一些技术. 需要说明的是,在[客户端]篇中我们的举例本质上仅是使用ASP.NET ...
- java sessionstate_在Java Web开发中自定义Session
Session在存储安全性要求较高的会话信息方面是必不可少的,对于分布式Web应用自定义Session支持独立的状态服务器或集群是必须的.本文就来教大家如何在Java Web开发中自定义Session ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- web开发中常用的概念
Tomcat服务器 Web开发中的常见概念 B/S系统和C/S系统 Brower/Server:浏览器 服务器 系统 ----- 网站 Client/Server:客户端 服务器 系统 ----- Q ...
- 浅谈Web开发中的6种技术
CSDN博客不再经常更新,更多优质文章请来 粉丝联盟网 FansUnion.cn! (FansUnion) Web开发中的6种技术 1.html 超文本标记语言,即HTML(Hypertext Mar ...
- 无闪烁刷新页面 php,AJAX_Ajax实现无闪烁定时刷新页面实例代码,在Web开发中我们经常需要实现 - phpStudy...
Ajax实现无闪烁定时刷新页面实例代码 在Web开发中我们经常需要实现定时刷新某个页面: 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录): 2.实现实时站 ...
- WEB开发中合理选择图片格式
从某种程度上说,判断一个网页设计师是否优秀,可以从其在WEB开发(或网页设计)中是否合理的采用各种图片格式得出结论.事实上,或许所有人都知道图片存在GIF,JPG和PNG等格式,但并非所有人都知道它们 ...
- 【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录 课程名 备注 入门必学 nodejs入门到企业web开发中的应用 框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...
- WEB开发中,使用JSON-RPC好,还是RESTful API好?
看到知乎上有这样一个问题 WEB开发中,使用JSON-RPC好,还是RESTful API好? 还有其他优秀的推荐方案吗? -------------------------------------- ...
最新文章
- 解决 WIndows,Linux 以及 MacOS 终端无法使用代理的问题
- condest--1-范数的条件数估计
- VS 调试断点命中了,程序无法再断点处中断
- 生产者和消费者代码———操作系统_kafka如何保证高并发(从生产者、消费者角度)...
- 同步现象 心理学_非心理专业背景的人,如何成为心理学家或心理咨询师?
- Python3基本数据类型快速入门
- 记一次尴尬的git reset丢失分支故障
- Xiaomi Civi即将发布 雷军:宽度仅71.5mm 刚刚好的握持感
- 气缸标识上vr什么意思_汽车VR传感器是什么意思?
- OpenAI对强化学习环境的汇总
- 关于jvm的OutOfMemory:PermGen space异常的解决
- 系统架构设计师之备考攻略(2022年修订版)——一篇就够
- 51单片机之串口通信详解及代码示例
- vFORUM 2018,开启多云未来
- 07-figma-钢笔工具
- 基于大疆dij_irp.exe进行红外测温
- leetcode695岛屿的最大面积
- 华为认证的含金量高吗?
- Spring Boot DAY03 配置文件的注入
- Python将numpy(.npy文件)存储为.ply文件