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

基于AJAX技术Web页面局部刷新 　　摘 要：由微软公司推出的 Visual Stdio 2008 及其以后的版本的开发环境集成了 AJAX 技术，该技术为解决Web页面局部刷新问题提供了非常方便的手段，为网站开发人员解决了一大难题。本文利用 AJAX 技术解决成绩录入中出现的局部刷新问题，实际应用 证明这种方法行之有效。 关键词：ASP.NET 3.5； ADO.NET； AJAX； SQL Server 2005； 局部刷新 目前开发 B/S 模式受到广大编程人员的青睐，B/S 模式的应用也非常广泛，原因在于和传统的 C/S 模式相比较，前者需要过多地考虑客户端的问题，对于后者，开发人员只需要把精力放在服务器端的开发和功能实现上，客户端的问题可以完全交给浏览器处理。但是在Web页面开发过程中，不可避免地会遇到页面刷新问题，这个问题如果不能很好地解决，会给用户带来麻烦，后果是可想而知的。这个问题在 Visual Stdio 2008 发布以前都是由开发人员编写大量代码来解决的，自 Visual Stdio 2008 发布以后，开发人员就不再使用以前的方法了。 由微软公司推出的 ASP.NET 3.5 不仅使得部署 B/S 模式的三层架构更加有利于实现显示、数据、逻辑的分开，减少了耦合度，便于维护。而且集成了AJAX技术，利用AJAX技术可以非常方便地解决页面刷新问题。 一、成绩录入系统设计与实现 本系统采用 ASP.NET 3.5，ADO.NET 和 SQL Server 2008 技术相结合的方式来开发。用 ASP.NET 3.5 开发前台的 Web 页面，SQL Server 2008 作为后台数据库保存数据，用 ADO.NET 作为联系两者之间的桥梁。初考成绩录入设计界面如图1 所示。其中包含已录入的成绩。 成绩的录入对于不同的用户可能有不同的需求，本系统中综合成绩由三部分经过加权得到：平时成绩、实验成绩、末考成绩。在录入成绩时要求录入平时成绩后，鼠标离开该文本框后，自动计算综合成绩并在综合成绩文本框中显示综合成绩。如果不能解决局部刷新问题，则光标不能停留在实验成绩文本框中，这给录入工作带来很大麻烦。同样的问题也会出现在录入实验成绩和末考成绩之后。 二、利用AJAX技术实现局部刷新 幸运地是，微软公司在 Visual Studio 2008 及其以后版本中集成了 AJAX（在 Visual Studio 2005 中需要另外安装 AJAX 组件），使用该项技术可以轻松解决这个问题。该技术的核心是利用 AJAX 的异步交互模式，减轻服务器负担，提高应用操作的执行效率。它是利用 JavaScript 和 XML 技术的无缝集合。用户通过浏览器发送指令给 AJAX 引擎，AJAX 引擎将指令传送给后台程序，后台程序将处理的结果回送给 AJAX 引擎，AJAX 引擎再将获得的结果给浏览器显示出来。 在 Visual Studio 2008 开发环境中 AJAX Extensions 选项卡共有 5 个控件，在本系统中只用到了其中的两个：ScriptManager 控件和 UpdatePanel 控件。下面分别介绍文中是如何利用这两个控件解决全屏刷新问题。 2.1 ScriptManager控件 在每个支持 ASP.NET AJAX 的页面中有且只能有一个 ScriptManager 控件，其他控件如 UpdatePanel、UpdateProgress 和 Timer 控件需要 ScriptManager 控件支持才能实现部分页呈现。因此必须确保 ScriptManager 控件在页面的 form 元素之中。同时需要设置 ScriptManager 控件的 EnablePartialRendering 属性为 true，只有这样才可以实现页面的异步局部更新，若为 false 则实现全页面的刷新，默认为 true。 2.2 UpdatePanel控件 通过使用 UpdatePanel 控件，可以使网页中元素参与到部分页更新中，而无需编写任何客户端脚本。当使用 UpdatePanel 控件时，页面行为是独立于浏览器的，并且会减少在客户端和服务器之间传输的数据量。 将 UpdatePanel 控件添加在页面中，设置页面中异步局部更新区域，通过点击 UpdatePanel 内的 ASP.NET 3.5 服务器控件，发出异步回传请求，服务器收到请求后返回的是局部更新的内容。根据需要，我们在界面上添加了一个 UpdatePanel 控件，用于控制页面上的“末考成绩”文本控件 txtTestScore。为了确保在文本控件 txtTestScore 中输入结