用户织梦建站教程

第一篇Ajax基础篇第1章Ajax概述Ajax全称AsynchronousJavaScriptandXML,中文含义为"异步JavaScript和XML".
它是Web2.
0技术的核心,由多种技术组合而成.
使用Ajax技术不必刷新整个页面,只需对页面的局部进行更新,可以节省网络带宽,提高网页加载速度,从而缩短用户等待时间,改善用户操作体验.
本章将对Ajax进行全面介绍,使读者对传统Web应用解决方案、Ajax的开发模式、Ajax的运行机制有一个概要的了解,为以后章节的学习打下基础.
本章最后将引导读者开发一个简单的Ajax案例.

理解传统Web应用解决方案理解Ajax技术理解Ajax开发模式掌握理解Ajax的运行机制理解会员验证方法熟悉Ajax应用开发过程1.
1传统Web应用解决方案在传统Web应用解决方案中,如果用户使用浏览器浏览网页,当页面刷新很慢的时候,用户的浏览器在干什么屏幕显示什么内容通常情况下,用户的浏览器在等待刷新,而屏幕上则是一片空白,用户只能在屏幕前苦苦地等待浏览器的响应.
开发人员为了克服这种尴尬的局面,不得不在每一个可能需要长时间等待响应的页面上增加一个DIV标记,在需要时显示类似"系统正在处理您的请求……"等信息以提示用户,从而改善用户的操作体验.

为什么会出现上述情况因为传统的Web应用采用同步交互方式.
这种方式下用户首先向HTTP服务器发送一个请求,服务器接到请求后开始执行用户请求的操作,最后将执行结果返回给用户浏览器,如返回一个HTML页面.
这是一种不连贯的用户体验,服务器在处理请求的时候,用户多数时间处于等待状态,屏幕上通常一片空白.
图1-1和图1-2所示分别为传统Web应用程序的结构和模型.

图1-1传统Web应用程序的结构图1-2传统Web应用程序的模型自从采用超文本作为Web传输和显示方式之后,Web开发人员就一直使用这样的方式.
当负载比较小的时候,这种方式并没有体现出任何问题.
可是当负载比较大时,响应时间可能要很长,一分钟、两分钟,甚至数分钟的等待是用户不可忍受的.
而且,如果响应时间过长,超过了页面响应时间,那么服务器会返回页面不可用的信息.
另外,有时,用户只是想改变页面中某一部分的数据,而并非要重新加载整个页面.
当软件设计越来越讲究人性化的时候,这么糟糕的用户体验与这种原则背道而驰.
为何总是要让用户等待服务器返回数据至少,应该通过一定的方法来减少用户等待的时间.
现在,除了程序设计、编码优化和服务器调优之外,还可以采用Ajax技术.

1.
2新的Web开发模式——AjaxAjax用来描述一组技术,主要包括:客户端脚本语言JavaScript、异步数据获取技术XMLHTTPRequest、数据互换和操作技术XML和XSLT、动态显示和交互技术DOM及基于标准的表示技术XHTML和CSS等.
Ajax极大地发掘了Web浏览器的潜力,开启了大量新的可能性,从而有效地改善了用户操作体验.

1.
2.
1初识Ajax在Ajax之前,Web站点强制用户进入提交、等待、重新显示返回结果的过程.
用户的动作总是与服务器的处理同步.
Ajax提供与服务器异步通信的能力,从而使用户从请求-响应的循环中解脱出来.
借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新用户页面,并向服务器发出异步请求执行更新或查询数据库操作.
当请求返回时,就可以使用JavaScript和CSS来相应地更新页面中的某一部分,而不是刷新整个页面.
最重要的是,用户甚至不知道浏览器正在与服务器通信,Web站点看起来像是即时作出响应的.

1.
Ajax介绍传统的Web应用允许用户填写表单(Form),当提交表单时就向Web服务器发送一个请求.
服务器接收并处理传来的表单,然后返回一个新的网页.
这种做法浪费了许多带宽,因为前后两个页面中的大部分HTML代码往往是相同的.
由于每次应用的交互都需要向服务器发送请求,应用的响应时间就取决于服务器的响应时间.
这导致用户界面的响应比本地应用要慢得多.

与此不同,Ajax应用可以仅向服务器发送并取回必需的数据.
它使用SOAP或其他一些基于XML的WebService接口,并在客户端采用JavaScript处理来自服务器的响应.
因为服务器和浏览器之间交换的数据大量减少,从而使得Web应用响应更快.
同时,很多处理工作可以在发出请求的客户端机器上完成,Web服务器的处理量减少了,这样能够大大缩短Web服务器的响应时间.
总的来说,Ajax应用程序具有以下特点.

通过异步模式,提升用户体验.
优化浏览器和服务器之间的数据传输,减少不必要的往返数据,减少了带宽占用量.
Ajax引擎在客户端运行,承担了一部分原本由服务器承担的工作,从而减少了大用户量下的服务器负载.
Ajax技术应用是受制于浏览器的.
如果大量用户还在使用比较旧的浏览器,如IE5、Mozilla1.
0或Safari1.
2之前的版本,Ajax技术的使用就失去了效果.
另外,不同浏览器上的JavaScript和DOM实现存在差异.
开发人员在创建XMLHTTPRequest对象的实例时一定要注意这一点.
这些内容将在后面进行详细介绍.

2.
Ajax与传统Web应用的区别Ajax技术是Web2.
0技术的重要组成部分.
Ajax技术不同于传统的Web技术,是对传统Web技术的一种改良和发展.
引入Ajax技术后,不仅改进了Web应用的性能,也改善了用户的体验.
下面就从几个方面介绍一下Ajax与传统Web应用之间的不同.

用户体验这是Ajax技术最大的改善之处.
对于传统的Web应用,用户只能发送独占式请求,一旦请求发送出去,页面就处于等待状态,等待服务器完成响应.
在服务器响应完成之前,客户端的浏览器只能是一片空白.
而Ajax技术则完全不同.
它允许客户端采用异步的方法发送请求,请求的发送完全不会阻塞当前的浏览器线程,浏览器可以继续下一步操作,如继续浏览,甚至再次发送异步请求.
对于用户体验,Ajax带来了重大的改善,它让用户不会处于等待状态,用户会感觉自己一直与应用处于交互状态.

响应速度就响应速度而言,大多数人会认为Ajax应用的速度比传统Web应用要快,实际上这种说法并不完全正确.
基于Ajax的应用需要增加大量JavaScript代码,增加大量JavaScript代码后的Web页面在第一次加载时速度将比传统Web页面慢(必须下载大量的JavaScript代码).
一旦进入该页后,响应速度便会明显提高,无须频繁地在各页面之间跳转,从服务器获得的仅是必须改变的数据,减少了冗余数据的下载,从而大幅度提高响应速度.
也许有人会认为Ajax包含的大量JavaScript代码会占用用户的大量带宽,这是不正确的,因为Ajax应用下载一次页面后,便可以多次重复使用.
一次下载的JavaScript代码量虽然增大,但从长时间来看,传统Web应用需要多次下载Web页面,需要的带宽更大.

应用架构传统Web应用主要由3层组成,而增加Ajax技术的Web应用将在传统的Web应用上额外增加一个Ajax引擎,其实质就是一层JavaScript代码.
这些JavaScript代码可以在客户端保存用户状态而无须使用Session,能将控制器的部分功能转移到客户端页面,但这必然会导致安全性等方面的问题,需要开发者认真对待.

开发的代码量Ajax技术的大部分功能都依赖于JavaScript语言实现,大量的JavaScript代码严重降低了程序员的开发效率.
JavaScript本身不是面向对象的编程语言,这严重限制了JavaScript代码的可重用性.
JavaScript代码并没有一个完善的调试工具,这无形中也加重了程序员的负担.

服务器的负担传统的观点认为Ajax技术减轻了服务器的负担,因为服务器只需要生成客户端必须更新的数据.
这种说法在某些场合下也许正确,但实际的情形则是:大量使用Ajax技术的Web应用将导致服务器的负担大大加重,而绝不是减轻.
因为Ajax技术往往比传统Web应用需要发送更多的请求,如用户注册时的用户名验证.
传统Web应用无需发送任何请求,只要等待用户输入即可,而Ajax技术则是用户每输入一个字符,应用都将向服务器发送一次请求.

Ajax技术的优势是相当明显的,但是应该在什么时候使用Ajax技术这是一个很重要的问题.
如果过度使用Ajax,那么就会有数千行JavaScript代码在客户端的浏览器上运行,可能会让用户感觉速度很慢.
如果这些脚本编写不当,就会很快失去控制,特别是在通信量很大的情况下.
所以,Ajax技术的使用有一定的范围,比如在改善用户操作体验等方面.

3.
Ajax的应用Ajax的主要特点在于异步交互,更新Web页面的局部信息.
因此,它比较适用于交互较多、读取数据频繁,而数据传输量又比较小的Web应用.
表1-1所示为Ajax的几种应用情况.
表1-1Ajax的应用情况应用情况说明基于表单的简单用户交互如用户注册验证、数据格式验证等.
如果采取整页回发(PostBack)到服务器做法,不仅传输数据量大、服务器负担重、响应时间长,而且会导致用户体验很差.
在验证结束后,由于某些数据错误返回注册页面时,先前输入的数据都已不存在了,必须重新填写.
而采用Ajax技术后,这些任务在用户填写其他信息时,已有XMLHTTPRequest对象异步完成,极大地改善用户操作体验时时更新的页面信息如聊天室信息、在线统计、股票的涨跌等.
这类系统都需要实时地反映数据的变化.
采用Ajax技术能定时异步访问服务器,可以获得最新信息并将其显示给用户,而且可以避免整个页面的刷新菜单导航如多级联动菜单、树状导航等.
可以采用Ajax技术来实现按需读取数据的功能,这可以避免每次变动都需要整页回发(PostBack)到服务器,从而节省带宽资源,提高响应速度,也减少显示所有数据时所要消耗的带宽资源评论、选择投票这几种情况传输的数据量非常小,因而没有必要将整个页面回发(PostBack)到服务器.
采用Ajax技术,用户在执行完相关操作后,将异步与服务器进行自动交互,而用户同时可以继续执行其他操作大家或多或少使用过Google搜索服务,它就是使用Ajax技术实现交互的一个很好的示例.
当用户键入字符时,GoogleSuggest可以为用户提供与输入字符相符的提示,帮助用户完成想要输入的搜索字符串.
图1-3所示为输入字符串"科技"后的效果.
图1-3GoogleSuggest的Ajax使用从图1-3所示可知,GoogleSuggest已经显示了建议性的内容,极大地方便了用户的搜索,从而改善了用户的搜索体验.
1.
2.
2Ajax开发模式国内使用Ajax技术进行Web开发还是最近刚流行起来的,Ajax技术还处于发展阶段,并没有形成一个非常统一的开发模式.
这些开发模式,针对不同的Ajax项目,在具体实现上的差别是比较大的.
下面介绍几种常见的Ajax开发模式.

XMLHTTP+WebFormXMLHTTP+WebForm是使用Ajax技术进行Web应用开发的最基本方法.
首先,开发人员使用JavaScript语言编写代码操作XMLHTTP对象,向服务器端的某个ASP.
NET页面发出异步请求.
服务器端的ASP.
NET页面接收请求,并根据请求进行相应的处理,处理完成后返回相应的执行结果给XMLHTTP对象.
最后,开发人员再使用JavaScript语言编写代码把返回的结果显示在客户端的浏览器上.

XMLHTTP+HttpHandlerXMLHTTP+HttpHandler与XMLHTTP+WebForm相比在客户端的实现上并没有太大变化,也是使用JavaScript语言编写代码操作XMLHTTP对象,但是服务器端改用HttpHandler来接收和处理异步请求.

HttpHandler是HTTP请求的真正处理中心.
正是在这个HttpHandler容器中,ASP.
NETFramework才真正对客户端请求的服务器页面进行编译和执行,并将处理后的信息附加在HTTP请求信息流中再次返回到HttpModule中.
HttpModule是ASP.
NET中包含的一组可由应用程序使用的模块.

当一个HTTP请求经过HttpModule容器传递到HttpHandler容器中时,ASP.
NETFramework会调用HttpHandler的相关方法来对这个HTTP请求进行真正的处理,即对ASP.
NET页面进行处理解析.
处理完成后将结果继续经由HttpModule传递下去,直至到达客户端.
通过使用HttpHandler可以有效地降低服务器端资源的消耗,减轻服务器的负担,从而加快服务器端的响应速度.

CallBackCallBack是ASP.
NET2.
0新增的开发方式.
它要求页面实现ICallbackEventHandler接口.
这样,客户端页面中的脚本就可以采用CallBack机制调用服务器端方法,从而避免开发人员直接操纵XMLHTTP对象,在一定程度上简化了Ajax的开发.
它是微软公司最早的Ajax策略,目的是让用户像使用PostBack一样来使用它,以达到异步更新数据的目的.
但由于相对其他Ajax框架很难扩展,所以应用受到了限制.

ICallbackEventHandler接口用于指示该控件可以作为服务器的回调事件的目标.
该接口在.
NETFramework2.
0版中是新增的.
它包括两个方法.
RasieCallbackEvent方法执行对异步请求的服务器端处理,GetCallBackResult方法返回异步请求的处理结果.
Ajax框架Ajax框架现在已有很多.
通常情况下,将基于浏览器的应用框架称为客户端框架,如Prototype、DOJO、qooxdoo、Bindows等.
将基于服务器端的框架称为服务器端框架,如ASP.
NETAjax、Ajax.
NET、WebORBfor.
NET、ComfortASP.
NET、AjaxAspects等.
通过使用Ajax框架进行Web开发可以提高效率,并且代码稳定性好,但同时也易于受框架的束缚.
其中ASP.
NETAjax1.
0版本是由微软公司的Atlas演化而来的.
它包括客户端MicrosoftAjaxLibrary、服务器端ASP.
NET2.
0AjaxExtensions,以及ASP.
NETAjaxControlToolkit等.
它是一套相当完整的Ajax解决方案.
作为微软专为.
NET推出的Ajax框架,它有很大的优势,并将可能成为.
NET领域Ajax的最佳解决方案.
1.
3Ajax运行机制Ajax应用程序的加载过程与传统的Web应用程序类似.
某个用户操作(如在浏览器中输入该Web应用程序的URL,或者在当前页面中点击一个链接)引发浏览器的一次HTTP请求.
服务器接收请求并处理这个请求,生成合适的执行结果发送至客户端.
客户端浏览器经过处理将数据(HTML+CSS)显示出来.
图1-4和图1-5所示为采用了Ajax技术的Web应用程序的结构和模型.

图1-4AjaxWeb应用程序的结构从图1-4和图1-5中所示可知,采用Ajax技术的Web应用中,大部分操作都是在用户没有察觉的情况下,异步请求服务器来完成,不会出现传统Web应用程序中的空白屏幕的现象.
在等待服务器响应期间,用户仍可以在该页面中执行其他操作,不像在传统Web应用程序中,用户在等待显示服务器返回执行结果之前不能在该页面执行任何其他操作.
图1-6所示为采用Ajax技术的Web应用程序与服务器进行一次交互的过程.

从图1-6中所示可知,Ajax应用程序与服务器进行一次交互的过程可以分为7个步骤,具体如下所示.
(1)用户在Web页面上执行了某个操作,如单击某个链接,或进行某项选择等.
(2)根据用户的操作,页面产生相应的DHTML事件.
(3)调用注册到该DHTML事件的客户端JavaScript事件处理函数.
其中需要创建并初始化一个用以向服务器发送异步请求的XMLHttpRequest对象,同时指定一个回调函数.
当服务器端的响应返回时,将自动调用该回调函数.

图1-5AjaxWeb应用程序的模型图1-6Ajax应用程序一次与服务器进行交互的过程(4)服务器收到XMLHttpRequest对象的请求之后,根据请求进行一系列的处理.
(5)处理完毕,服务端器向客户端返回所需要的数据.
(6)数据到达客户端之后,执行JavaScript回调函数,并根据返回的数据对用户显示界面进行更新.
(7)用户获得自己操作所需的数据,即为看到显示界面的变化.
1.
4第一个Ajax示例注册登录是许多网站用户管理模块不可缺少的一部分.
注册时接收用户提交的注册信息,并进行一定的验证,最后把合法的数据存储到数据库中.
其中,最重要的就是对用户名(用户账号)进行验证.
在通常情况下,用户名是区别每一个用户的唯一标志,它是不允许重复的.

在传统Web应用程序中,用户注册验证是用户操作体验相当差的一部分.
为了验证某一账号是否已经被人注册过,就必须等待注册页面被提交后返回的信息,或者通过单击【查看该用户是否可用】按钮,从弹出窗口中得到信息来确认账号的可用性.
这一切是相当麻烦的,有些处理不好的传统Web应用程序,可能因为某一用户名已经被使用,再返回用户注册页面时可能导致用户先前输入的用户注册信息也全部丢失,而不得不再重新输入用户信息.
出现这种情况让用户很反感,而现在采用Ajax技术已经极大地改善了个用户的操作体验.

下面将通过一个会员注册验证案例演示Ajax技术是如何改善用户操作体验的.
该案例通过对会员昵称(用户名)进行验证,即根据该用户名是否已经被使用,在不进行页面刷新的情况下给出相应的提示信息.

在该案例中,注册页面很简单,它主要用于收集由用户输入的注册信息,如会员的昵称、邮箱和密码等.
该注册页面的实现文件为Default.
aspx.
代码1.
1所示是其中与会员注册相关的代码.