基于AJAX技术的Web页面局部刷新.doc

1、基于 AJAX 技术的 Web 页面局部刷新摘 要：由微软公司推出的 Visual Stdio 2008 及其以后的版本的开发环境集成了 AJAX 技术，该技术为解决 Web 页面局部刷新问题提供了非常方便的手段，为网站开发人员解决了一大难题。本文利用 AJAX 技术解决成绩录入中出现的局部刷新问题，实际应用 证明这种方法行之有效。 关键词：ASP.NET 3.5； ADO.NET； AJAX； SQL Server 2005； 局部刷新 目前开发 B/S 模式受到广大编程人员的青睐，B/S 模式的应用也非常广泛，原因在于和传统的 C/S 模式相比较，前者需要过多地考虑客户端的问题，对于后者，

2、开发人员只需要把精力放在服务器端的开发和功能实现上，客户端的问题可以完全交给浏览器处理。但是在 Web 页面开发过程中，不可避免地会遇到页面刷新问题，这个问题如果不能很好地解决，会给用户带来麻烦，后果是可想而知的。这个问题在 Visual Stdio 2008 发布以前都是由开发人员编写大量代码来解决的，自 Visual Stdio 2008 发布以后，开发人员就不再使用以前的方法了。 由微软公司推出的 ASP.NET 3.5 不仅使得部署 B/S 模式的三层架构更加有利于实现显示、数据、逻辑的分开，减少了耦合度，便于维护。而且集成了 AJAX 技术，利用 AJAX 技术可以非常方便地解决页面

3、刷新问题。 一、成绩录入系统设计与实现 本系统采用 ASP.NET 3.5，ADO.NET 和 SQL Server 2008 技术相结合的方式来开发。用 ASP.NET 3.5 开发前台的 Web 页面，SQL Server 2008 作为后台数据库保存数据，用 ADO.NET 作为联系两者之间的桥梁。初考成绩录入设计界面如图 1 所示。其中包含已录入的成绩。 成绩的录入对于不同的用户可能有不同的需求，本系统中综合成绩由三部分经过加权得到：平时成绩、实验成绩、末考成绩。在录入成绩时要求录入平时成绩后，鼠标离开该文本框后，自动计算综合成绩并在综合成绩文本框中显示综合成绩。如果不能解决局部刷新问

4、题，则光标不能停留在实验成绩文本框中，这给录入工作带来很大麻烦。同样的问题也会出现在录入实验成绩和末考成绩之后。 二、利用 AJAX 技术实现局部刷新 幸运地是，微软公司在 Visual Studio 2008 及其以后版本中集成了 AJAX（在 Visual Studio 2005 中需要另外安装 AJAX 组件） ，使用该项技术可以轻松解决这个问题。该技术的核心是利用 AJAX 的异步交互模式，减轻服务器负担，提高应用操作的执行效率。它是利用 JavaScript 和 XML 技术的无缝集合。用户通过浏览器发送指令给 AJAX 引擎，AJAX 引擎将指令传送给后台程序，后台程序将处理的结果

5、回送给 AJAX 引擎，AJAX 引擎再将获得的结果给浏览器显示出来。 在 Visual Studio 2008 开发环境中 AJAX Extensions 选项卡共有 5 个控件，在本系统中只用到了其中的两个：ScriptManager 控件和 UpdatePanel 控件。下面分别介绍文中是如何利用这两个控件解决全屏刷新问题。 2.1 ScriptManager 控件 在每个支持 ASP.NET AJAX 的页面中有且只能有一个 ScriptManager 控件，其他控件如 UpdatePanel、UpdateProgress 和 Timer 控件需要 ScriptManager 控件支持

6、才能实现部分页呈现。因此必须确保 ScriptManager 控件在页面的 form 元素之中。同时需要设置 ScriptManager 控件的 EnablePartialRendering 属性为 true，只有这样才可以实现页面的异步局部更新，若为 false 则实现全页面的刷新，默认为 true。 2.2 UpdatePanel 控件 通过使用 UpdatePanel 控件，可以使网页中元素参与到部分页更新中，而无需编写任何客户端脚本。当使用 UpdatePanel 控件时，页面行为是独立于浏览器的，并且会减少在客户端和服务器之间传输的数据量。将 UpdatePanel 控件添加在页面中

7、，设置页面中异步局部更新区域，通过点击 UpdatePanel 内的 ASP.NET 3.5 服务器控件，发出异步回传请求，服务器收到请求后返回的是局部更新的内容。根据需要，我们在界面上添加了一个 UpdatePanel 控件，用于控制页面上的“末考成绩”文本控件 txtTestScore。为了确保在文本控件 txtTestScore 中输入结束鼠标离开后，UpdatePanel 控件能够实现局部刷新，需要对 UpdatePanel 控件以下属性进行配置。 （1） UpdateMode 属性 UpdatePanel 控件的 UpdateMode 属性需要设置为 conditional，这样 U

8、pdatePanel 仅在其内部控件动作引发回送时更新（要求 ChildrenAsTriggers 属性为 true ） ，或者在启动了已定义的触发器时更新。该属性表示 UpdatePanel 的更新模式，默认为 Always，意味着页面上任何一个 UpdatePanel 控件内的 ASP.NET 控件动作，其他 UpdatePanel 控件管辖区域也随之更新。 （2） Triggers 属性 在 ASP.NET 3.5 AJAX 中有两种 Triggers：分别为AsyncPostBackTrigger 和 PostBackTrigger。其中 PostBackTrigger 用来指定在 U

9、pdatePanel 中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送。AsyncPostBackTrigger 用来指定某个服务器端控件以及其将触发的服务器端事件作为该 UpdatePanel 的异步更新触发器，它需要设置的属性有控件 ID 和服务端控件的事件；控件ID 的值为引起回送的控件，服务端控件的事件的值为该控件引起回送的事件。 当分别录入完平时成绩、实验成绩、末考成绩，都会自动计算综合成绩，并在综合成绩文本框中显示综合成绩，因此需要为 UpdatePanel 控件的 Triggers 属性添加三个 AsyncPostBackTrigger 属性值，对应的控件

10、 ID 分别为 txtOrdScore、txtExpScore、txtTestScore，对应的事件名称均为TextChanged。具体代码如下： （3） ChildrenAsTriggers 属性 当 UpdatePanel 属性设置为 conditional 时，只有将 ChildrenAsTriggers 属性设置为 True，其内部子控件导致的回发才可以引起局部更新。属性配置完成后，成绩录入页面即实现了异步局部更新，当鼠标离开“末考成绩”文本框之后不再出现整个页面刷新现象，有效减轻了服务器负担，方便了录入工作。 三、结束语 微软推出的 Visual Studio 2008 是一款开发

11、Web 应用程序的优秀工具，它使得开发 Web 应用程序变得非常简单，将开发 Web 应用程序提升到一个新的里程碑。文中阐述了如何利用 Visual Studio 2008 中集成的 AJAX 技术实现了局部刷新，使得系统更加人性化，极大地方便了教师完成成绩录入工作。 参考文献： 1 金建刚，朱凯. 基于 ASP.NET3.5 成绩录入系统的设计与实现J.河南师范大学学报（自然科学版） ， 2012，6：154-157. 2 范振钧. 基于 ASP.NET 的三层结构实现方法研究J. 计算机科学，2007，34（4）：289-291. 3 金灿，陈绪君，朱绍文等. .NET 框架中三种数据访问技术及效率比较J.计算机应用研究，2003，20（4）：155-157. 作者简介：金建刚（1972） ，男，河南固始人，讲师，硕士研究生，主要研究方向：软件工程和计算机网络。 *河南省科学技术厅项目（编号：092400430119） 。