《asp.net ajax 在web开发中的应用_论文》由会员分享，可在线阅读，更多相关《asp.net ajax 在web开发中的应用_论文（10页珍藏版）》请在金锄头文库上搜索。
1、 ASP.NET AJAX 在Web开发中的应用 摘 要 AJAX 实现了Web页面丰富的部分刷新效果。本文通过介绍AJAX原理，引申到 AJAX原理，并总结了在Web开发应用中要注意的若干问题。合理地利用 AJAX技术，Web开发应用就能获得更好的交互效果。 关键词 AJAX Web开发 AJAX控件1 引言 当前，Web技术的不断发展使得B/S得以广泛地应用。但Web传统的开发技术使得网页的交互性能大打折扣。随着AJAX技术的兴起，Web开发技术超越了传统的开发模式，发生了质的飞跃。而微软公司推出的 AJAX框架与的结合，使得Web的开发方式在.NET环境下更加简单易用，页面交互性能也得到
2、很大提高。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
3、是AJAX技术的核心。 XMLHttpRequest XMLHttpRequest是AJAX引擎的核心技术，是AJAX引擎解决无需刷新整个页面即可从服务器获取所需数据问题的关键。在微软IE 平台下XMLHttpRequest 是XMLHTTP 组件的一个对象，它通过允许开发人员在Web 页面内部使用XMLHTTP ActiveX 组件扩展自身功能，开发人员不必从当前的Web 页面导航而直接与服务器上的数据库进行双向数据传输。该项功能相当重要，它弥补了无状态连接的缺点，排除下载冗余Web 数据的需要，从而提高了进程速度。 DOM ( Document object Model ) DOM 是给H
4、TML 和XML 文件使用的一组API。它提供了文件的结构表述，允许开发人员改变其中的内容，建立网页与程序语言沟通的桥梁。所有Web 开发人员操作及建立文件的属性、方法及事件都以对象方式来展现，这些对象均可由当今大多数浏览器以脚本取用。一个用HTML 或XHTML 构建的网页可看作是一组结构化数据，这些数据被封在DOM (Document Object Model）中，且DOM 提供对网页中各个对象的读写支持。 JavaScript JavaScript是一种在浏览器中大量使用的跨平台编程语言，常被用来制作网页特效或表单验证。在AJAX 中JavaScript 则是XMLHttpRequest
5、与DOM 交互的桥梁以及AJAX 引擎工作的主要推动力。JavaScript 通过调用XMLHttpRequest 的属性和方法获取服务器端数据，调用DOM 的API更新Web 页面内容，从而实现整个页面的无刷新更新页面的效果。3 AJAX架构 AJAX由客户端脚本库和服务端组件组成，这两者被集成在一起提供了一个功能强大的开发框架。客户端脚本库中包含两种最熟悉的动态网页技术，分别是跨浏览器使用的ECMAScript(JavaScript)技术和动态的HTML (DHTML)网页开发技术，并且将这两种技术集成到了 基于服务器端的开发平台中。图1解释说明了包含客户端脚本库和服务端组件的 AJAX的
6、功能。 服务器端架构 服务器端组件由控件和组件构成，用于管理UI和应用程序流，管理序列，验证和控件扩展性等。此外， Web服务也能用于访问应用服务，包括窗体验证和用户验证。 服务器控件 AJAX控件由服务器端和客户端代码构成在一起以产生类似于AJAX的行为。以下是最常用的 AJAX控件。 ScriptManager控件 UpdatePanel控件 UpdateProgress控件 Timer控件 AJAX客户端架构 AJAX客户端脚本库由JavaScript(.js)文件构件。这些.js文件提供了面向对象开发的特性。这一特性使得连续性和模块化在客户端脚本中达到一个新的层次。以下是 AJAX中客
7、户端的各个层次。 浏览器的兼容层。通过最常用的浏览器为 AJAX脚本提供兼容性。 AJAX 核心服务，这种核心服务已经扩展到了JavaScript。例如classes，namespaces，event handling，inheritance，data types，and object serialization。 AJAX基础类库，包括组件如string builders and extended error handling。 网络工作层。该层用于处理基于Web服务和应用之间的通信，管理异步式远程方法的调用。 图1 AJAX服务器和客户端架构4 AJAX在Web开发中的应用 AJAX开发环
8、境图2 AJAX服务器控件 在Web开发应用中，利用VS2017开发工具和 框架进行Web页面的开发是值得推荐的一种方法。VS2017开发工具本身并没有集成这一框架，因此，在做Web开发时就必须安装这一框架。可以从微软官方网站上下载（）。下载安装后，可在VS2017开发环境中看到 AJAX服务器控件。如图2所示。 要注意的是，安装 AJAX框架后，并不是VS2017开发环境中的所有页面模板都能支持AJAX技术。只有 AJAX提供的默认模板才能支持。对于其他模板，如果要想支持AJAX，就必须配置文件。具体配置可以参考微软官方文档。 AJAX控件在Web开发中的应用 ScriptManager控件
9、 用来处理页面上的所有组件以及页面局部更新，生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service，所有需要支持 AJAX的页面上有且只能有一个ScriptManager控件，并且，如果要使用其他 AJAX控件，就必须要有ScriptManager控件的支持。在ScriptManager控件中我们可以指定需要的脚本库，或者指定通过JS来调用的Web Service，还可以指定页面错误处理等。使用来定义一个ScriptManager，简单的ScriptManager定义形式是： 默认情况下，ScriptManager控件为页面中的微软脚本库注册脚本。以使客户端脚本库进
10、行各种系统扩展，并且支持局部页面刷新和Web Services回调的特性。在Web应用开发中，ScriptManager控件是必须的。要使用 AJAX控件，每个.aspx页面上必须有且只有一个ScriptMangeger控件。当.aspx页面与母版页结合作为内容页使用时，只须在母版页上放置一个ScriptManger控件，内容页上无须再放该控件。 值得注意的是，页面上任何用ScriptManger控件注册的脚本和所有事件处理脚本都必须在页面元素内。否则脚本将不会被注册或者被执行。 UpdatePanel控件 该控件可以用来创建丰富的局部更新Web应用程序，它是 AJAX Extensions中
11、很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。一个页面上可以放一个或者多个UpdatePanel控件，并且UpdatePanel控件还可以嵌套使用。UpdatePanel的工作依赖于ScriptManager服务端控件和客户端PageRequestManager类。当ScriptManager中允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务端返回HTML之后，PageRequestM
12、anager会通过操作DOM对象来替换需要更新的代码片段。UpdatePanel的工作原理如图3如示。图3 UpdatePanel的工作原理图简单的UpdatePanel定义如下： 标签用来定义UpdatePanel的内容，在它里面可以放任何元素。属性有两种：分别为AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件
13、，它所引发的回送不使用异步回送，而仍然是传统的整页回送。 UpdateProgress控件 在UpdatePanel控件中的内容进行局部刷新时，该控件可以提供刷新状态的信息。前文所述，一个页面上可以放一个或者多个UpdatePanel控件，但是，当其中一个UpdatePanel中更新的内容很缓慢，需要用户等待很长时间时，很容易让用户误以为应用程序处于“死机”状态。在这种情况下，UpdateProgress控件就发挥出它的特性，提供页面部分内容刷新时的状态信息。一个页面上，一个UpdateProgress控件可以和一个UpdataPanel控件关联，也可以和多个UpdatePanel控件关联。U
14、pdateProgress控件提供了AssociatedUpdate PanelID属性，可以指定UpdateProgress控件显示哪一个UpdatePanel控件。UpdateProgress控件的简单定义如下：数据正在读取中，请稍后 Timer控件 该控件用于在一个规定的时间内执行提交操作。使用Timer控件可以执行提交整个页面操作，也可以和UpdatePanel控件一起使用，在规定时间内执行页面的局部刷新操作。Timer控件作为服务器控件将JavaScript部件嵌入到了Web页面中，当Timer控件的Interval属性设置的间隔时间到达时，该部件便会激发来自于浏览器的提交操作。Ti
15、mer控件设置的属性操作在服务器端运行，并且将这些属性值传递给JavaScript部件。与其他控件一样，Timer控件也需要依赖于ScriptManager控件。Timer控件既可以放在UpdatePanel控件外，也可以放在UpdatePanel控件内。其简单的定义如下： 值得注意的是，如果把Timer控件的Interval属性值设置得过小，会对Web服务器造成严重的阻塞。所以，当页面上要刷新的内容部分是必要的而且是频繁的时候，才考虑使用Timer控件。5 VS2017开发环境中使用 AJAX控件要注意的问题 在利用VS2017进行Web开发的过程中，需要使用各种服务器控件。一般情况下，VS
16、2017的常用控件都是可以和 AJAX控件结合使用的。但是，以下控件与 AJAX控件有不相兼容的地方，是需要注意的。 与UpdatePanel控件不兼容的控件 TreeView和Menu控件； Web Parts 控件； Substitution控件。 登录控件，如Login，PasswordRecovery，Change Password和CreateUserWizard控件。在默认情况下，上述控件与UpdatePanel控件是不相兼容的。当上述控件转换为可编辑状态时，登录控件中的验证控件便可以与UpdatePanel控件兼容。 验证控件类。如BaseCompareValidator，BaseValidator，CompareValidator，customValidator，RangeValidator，Regular ExpressionValidator，RequiredFieldValidator和Validation Summary控件。这些控件在默认情况下也可以与UpdatePanel控件
