基于ajax技术的web页面局部刷新

《基于ajax技术的web页面局部刷新》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

3、耦合度，便于维护。而且集成了AJAX技术，利用AJAX技术可以非常方便地解决页面刷新问题。　　一、成绩录入系统设计与实现　　本系统采用ASP.NET3.5，ADO.NET和SQLServer2008技术相结合的方式来开发。用ASP.NET3.5开发前台的Web页面，SQLServer2008作为后台数据库保存数据，用ADO.NET作为联系两者之间的桥梁。初考成绩录入设计界面如图1所示。其中包含已录入的成绩。　　成绩的录入对于不同的用户可能有不同的需求，本系统中综合成绩由三部分经过加权得到：平时成绩、实验成绩、末考

4、成绩。在录入成绩时要求录入平时成绩后，鼠标离开该文本框后，自动计算综合成绩并在综合成绩文本框中显示综合成绩。如果不能解决局部刷新问题，则光标不能停留在实验成绩文本框中，这给录入工作带来很大麻烦。同样的问题也会出现在录入实验成绩和末考成绩之后。　　二、利用AJAX技术实现局部刷新　　幸运地是，微软公司在VisualStudio2008及其以后版本中集成了AJAX（在VisualStudio2005中需要另外安装AJAX组件），使用该项技术可以轻松解决这个问题。该技术的核心是利用AJAX的异步交互模式，减轻服务器负担

5、，提高应用操作的执行效率。它是利用JavaScript和XML技术的无缝集合。用户通过浏览器发送指令给AJAX引擎，AJAX引擎将指令传送给后台程序，后台程序将处理的结果回送给AJAX引擎，AJAX引擎再将获得的结果给浏览器显示出来。　　在VisualStudio2008开发环境中AJAXExtensions选项卡共有5个控件，在本系统中只用到了其中的两个：ScriptManager控件和UpdatePanel控件。下面分别介绍文中是如何利用这两个控件解决全屏刷新问题。　　2.1ScriptManager控件　　

6、在每个支持ASP.NETAJAX的页面中有且只能有一个ScriptManager控件，其他控件如UpdatePanel、UpdateProgress和Timer控件需要ScriptManager控件支持才能实现部分页呈现。因此必须确保ScriptManager控件在页面的form元素之中。同时需要设置ScriptManager控件的EnablePartialRendering属性为true，只有这样才可以实现页面的异步局部更新，若为false则实现全页面的刷新，默认为true。　　2.2UpdatePanel控件

7、　　通过使用UpdatePanel控件，可以使网页中元素参与到部分页更新中，而无需编写任何客户端脚本。当使用UpdatePanel控件时，页面行为是独立于浏览器的，并且会减少在客户端和服务器之间传输的数据量。　　将UpdatePanel控件添加在页面中，设置页面中异步局部更新区域，通过点击UpdatePanel内的ASP.NET3.5服务器控件，发出异步回传请求，服务器收到请求后返回的是局部更新的内容。根据需要，我们在界面上添加了一个UpdatePanel控件，用于控制页面上的“末考成绩”文本控件txtTestS

8、core。为了确保在文本控件txtTestScore中输入结束鼠标离开后，UpdatePanel控件能够实现局部刷新，需要对UpdatePanel控件以下属性进行配置。　　（1）UpdateMode属性　　UpdatePanel控件的UpdateMode属性需要设置为conditional，这样UpdatePanel仅在其内部控件动作引发回送时更新（要求ChildrenA