AJAX技术在ASP.NET开发中的应用

2022-09-11

传统Web传输一直采用同步交互方式, 用户提交请求然后等待服务器返回结果, 当页面负载较大时, 等待时间会很长;另一方面, 有时候我们请求的页面只是做了很少的改变, 但是仍要进行整个页面的刷新, 这么做显然是浪费了宝贵的带宽资源。现在我们可以采用Ajax来解决这个问题。

微软在1997年发明了Ajax中的关键技术, 但在2005年之前只有少数的页面应用程序采用这个技术。2005年Google引擎应用Ajax技术推出了“自动完成输入”功能即Google suggest, 接下来Google earth以及gmail等广泛应用了该技术, 正是在Google的大力推广下, Ajax开始流行。

1 Ajax介绍

AJAX全称为“Asynchronous Java Script and XML” (异步Java Script和XML) , 是一种创建交互式网页应用的网页开发技术[1]。Ajax是由Adaptive Path咨询顾问Jesse James Garrett首先提出来的。它是Web 2.0技术的核心, 由多种技术组合而成[2]。

Ajax的主要特点是异步交互, 更新Web页面的局部信息。Ajax使Web站点看起来是即时响应的。

Ajax应用程序的优势在于:通过异步模式, 提升用户体验;优化浏览器和服务器之间的传输, 减少不必要的数据往返, 减少了带宽占用;Ajax引擎在客户端运行, 承担了一部分本来由服务器承担的工作, 从而减少了大用户量下的服务器负载[3]。

1.1 Ajax技术原理

Ajax不一种新技术, 而是几种原有技术的结合体。它的组合技术包括:使用CSS和XHTML来表示、使用DOM模型来交互和动态显示、使用XMLHttp Request来和服务器进行异步通信、使用Java Script来绑定和调用[4]。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层, 使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端, 利于客户端闲置的处理能力来处理, 减轻服务器和带宽的负担。

1.2 Ajax核心技术

A j a x的核心是J a v a S c r i p t对象Xml Http Request。它是一种支持异步请求的技术。Xml Http Request使我们可以使用Java Script向服务器提出请求并处理响应, 而不阻塞用户, 达到无刷新的效果。

不同的浏览器创建XMLHttp Request对象的方法是有差异的。IE浏览器使用Act ive XObject, 而其他的浏览器使用名为XML Http Request的Java Script内建对象。

X M LH t t p R e q u es t对象的三个重要属性:onreadystatechange每次状态改变所触发事件的事件处理程序;response Text从服务器进程返回数据的字符串形式;ready State存有服务器响应的状态信息。ready State对象状态值有五个:0对象已建立但未初始化;1对象已建立并初始化;2发送数据;3数据传送中;4数据接收完毕。

XMLHttp Request对象的两个的方法:要把请求发送到服务器, 就需要使用对象的open () 和send () 方法。

Aja x完全是一种客户端的技术, 有发出请求和响应请求两个过程, 正是XMLHttp Request处理了服务器端和客户端通信的问题, 所以说XMLHttp Request是整个Ajax实现的关键。

1.3 Ajax框架

通过手动编写代码来创建Ajax页面时, 要多次用到重复代码, 例如每个Ajax页面都需要创建XMLHttp Request对象, 而创建该对象时要首先进行浏览器测试, 根据不同的浏览器创建不同的实例;在与服务器交互时要发送请求以及处理服务器端返回信息等。为了节省开发Ajax的时间和精力, 减少需要编写的代码数量, 提高开发效率, 将重复性的Ajax代码封装成可以在不同项目中重用的库, 便形成了Ajax框架。

常用的Ajax框架, 有dojo、prototype、DWR、Bu ffal o、openr ico、qoox doo、YU L、M a g i c A j a x.N E T、A j a x.N E T和A t la s等。每个框架都有它自己的一些特点, 都有一些创新的方面。这里简要介绍Atlas框架。A t l a s现在叫做A S P.N E T A j a x框架, 是Microsoft为在.NE T环境中应用Aja x开发框架的简称。ASP.NET Ajax可分为服务器和客户端两部分, 其中服务器端和ASP.N ET 2.0实现了无缝衔接, 使A SP.N ET开发人员几乎不用额外学习就可以开发出自己的Ajax程序;ASP.NET Ajax客户端有极大的灵活性和可扩展性[2]。在下面应用实例中介绍ASP.NET Ajax (Atlas) 框架安装和简单使用。

2 Ajax应用实例

介绍两个应用实例, 一个手动编写代码创建Xml Http Request对象, 利用js来实现异步发送请求。另一个例子是直接在ASP.N E T A j a x框架下, 使用该框架的控件与ASP.NET 2.0相结合做出具有良好用户体验的Ajax页面。

2.1 使用Xml Http Request创建登陆界面

制作管理员登陆界面, 不用提交表单实现对用户名是否为空和是否存在的判断。该实例包括两个aspx页 (Default.aspx与Check Name.aspx) 和一个js文件 (JAjax.js) 。

D e f a u l t.a s p x页面包括两个H T M L的TEXT控件, 用来输入管理员名和密码, ID分别为m Name和m Pwd;在输入名字的TEXT控件右面使用span标记用来显示验证提示信息, 将其ID命名为Message。关键代码如下所示。

on Blur事件是当光标离开文本框时发生的事件, 其响应事件Check Name () 写在js文件中。

在该项目head标签中添加对JAjax.js引用。

J A j ax.j s伪代码如下:

{…处理返回信息。若返回值为1, 则等待用户输入密码, 若返回值为2, 则出现‘该姓名不存在!’的提示, 并把焦点重新置于姓名的文本框内。}

function Check Name () {…onblur触发函数。获取文本框中的输入, 进行是否为空判断, 为空就输出提示, 姓名不能为空, 否则使用send Request将得到的姓名传给Check Name.aspx处理。}

C h ec k N am e.a sp x页的.c s要实现对数据库的管理员信息表遍历查询, 若表中找到相同的名子, 返回‘1’, 否则返回‘2’, 返回值由js文件中的处理返回信息函数Request () 处理。

至此登陆页面设计完成, 如果没有输入姓名而试图输入密码时, 姓名文本框右侧会出现‘姓名不能为空’的提示;如果输入的姓名在库中没有记录, 则会出现‘该姓名不存在’的提示, 这个过程没有提交动作, 但实际完成提交请求, 网页进行局部刷新。图1所示输入了不存在的管理员名时的显示。

2.2 使用Asp.net Ajax框架实现无刷新页面

2.2.1 Asp.net Aj ax安装和配置

Asp.net Aj ax主要由3个部分组成, 分别是客户端部分Microsoft Ajax Library、服务器端部分Asp.net 2.0 Ajax Extensions和控件包部分Asp.net Ajax Control Toolkit。这三个部分可在ASP.NE T Ajax官方网站下载。

本机相关配置为Windows XP、VS.NET 2005、Microsoft.Net Framework 2.0、IE 6.0、IIS。将对应安装程序释放执行后, V S.N E T 2 0 0 5的工具箱中便出现A J A X E xt e ns i o ns选项卡及其选项, 然后再添加A j a x C o n t ro l T o o lk i t。先重新生成A j a x Control Toolkit, 运行vs.2005, 右键点击工具箱添加新选项卡, 右击该卡加载A j a x C o n t r o l T o o l k i t.d l l, 这时A S P.N E T Ajax框架下自带的控件就加载到工具箱中。

2.2.2 As p.n et Aja x简单使用

使用AJAX环境模板建立的网站默认页中已自己加入了Script Manager控件, 这个控件的作用是负责管理页面中的所有脚本资源, 使ASP.NET Ajax的客户端部分能正常工作。Script Manager必须存在于Web Form中, 并且存在于其它Ajax控件之前。

在S c r i p t M a n a g e r控件下加入Update Panel控件, 该控件是用来创建局部更新的Web程序, 可以减少客户端脚本的编写工作量。然后我们从工具箱中拖曳Acc o r di o n控件到窗体中。可折叠面板控件Accordion又被称为手风琴控件, 使用它可以轻松实现自由折叠效果。如图2所示。

这个效果可作为页面导航, 在同一页面的右侧位置放置不同的对应内容, 同时将这些内容放置在ASP.NET 2.0的普通panel控件容器中, 点击导航部分时实现不同的panel间切换, 但不会出现整个页面刷新现象。

3 结语

在使用XMLHttp Request对象和ASP.N E T A j a x框架开发的过程中, 体会到了Ajax的“按需取数据”的优点, 它以异步方式与服务器通信, 而不需要打断用户的操作, 使网页具有更加迅速的响应能力, 页面无刷新, 提升了用户体验。

基于Ajax技术的这些优点, 越来越多的Web应用会更多地采用Ajax来实现, 应用前景广阔。Ajax技术是对传统Web技术的一种改良和发展, 与现有的动态页面技术互补融合, 我们相信Ajax将在Web应用的舞台上扮演重要的角色。

摘要：传统的Web应用采用同步交互方式, 提交请求后要等待服务器处理, 并且无论请求后的页面改变多少, 整个屏幕都要进行刷新, 造成网络带宽浪费, 用户体验很差, 然而, 本文引入Ajax技术有效解决这个问题, 并通过两个网页开发实例, 详细阐述了Ajax技术, 探讨了Ajax技术和Asp.net Ajax框架在Asp.net2.0网页开发中的应用, 在网页开发过程中使用Ajax技术, 不仅提高了系统性能, 而且优化了用户界面。

关键词：Ajax,XMLHttpRequest,Ajax,框架,ASP.NET,Ajax