Ajax原理、性能及其应用.pdf

技术应用
Ajax原理、性能及其应用
安勤玲
烟台市食品药品检验所山东264000
摘要:Ajax是Web应用的一个新方向,它并不是一项技术,实际上是几项技术合在一起形成的一个新方法。本文首先
从原理上对Ajax进行了闸述,分析了其与传统Web方式的不同之处,然后对Ajax的性能进行了论述,并给出了一组实验
数据用以对比分析传统Web方式的性能,由此实验结果论述Ajax应用模型性能的优越性,最后闸述了Ajax的适用场景并
总结了其缺点及局限性。
关键词:Ajax;Xmlhttprequest;DOM;Javascript帯宽;按需取数据
0引言
Ajax的工作原理相当于在用户和服务器之间加了一个中间
术语Ajax用来描述一组技术,它使浏览器可以为用户提层ー-Ajax引擎,使用户操作与服务器响应异步化一一并不
供更为自然的浏览体验。在Ajax之前,Web站点强制用户是所有的用户请求都提交给服务器,一些数据验证和处理由
进入提交/等待/重新显示范例,用户的动作总是与服务器的Ajax自己来做而不必交给服务器处理,只有确定需要从服务
“思考时间”同步。Ajax提供与服务器异步通信的能力,从器读取新数据时再由Ajax引擎代为向服务器提交请求。在使
而使用户从请求响应的循环中解脱出来。借助于Ajax,可以用Ajax引擎后,用户从感觉上几乎所有的操作都会很快响应
在用户单击按钮时,使用 Javascript和 DHTML立即更新UI,没有页面重载的等待(如图1所示)。
并向服务器发出异步请求,以执行更新或查询数据库。当请
browser cient
求返回时,就可以使用 Javascript和CSS来相应地更新UI,
而不是刷新整个页面。最重要的是,用户甚至不知道测览器
正在与服务器通信,Web站点看起来是即时响应的。
1原理
ht中s)
ht中s)tr
Ajax不是一种技术,实际上,它由几种蓬勃发展的技术
以新的强大方式组合而成。 Ajax包含:
(1)基于 XHTML和CSS标准的表示;
server-side systems
classic
(2)使用 Document Object Model进行动态显示和交互;
web application model
web application model
(3)使用XML和XSLT进行数据交换与处理
图1传统Web应用模型(左)与jax应用模型(右)的对比
使用Xmlhttprequest与服务器进行异步通信;
Ajax引擎实际上是一个比较复杂的 Javascript应用程
(5)使用 Javascript t绑定一切。
序,用来处理用户请求然后根据需要动态读写服务器和更改
在经典的浏览器与服务器的交互方式中,由用户触发一DOM内容。以前为了使网页能无缝化重构,也就是在页面
个HTTP请求到服务器,服务器对其进行处理后再返回一个已经下载完毕后改变页面内容,开发人员一直通过Javascript
新的Web页到浏览器,每当服务器处理浏览器提交的请求时,和DOM来实现。但是要使网页真正动态起来,不仅要内部
客户都只能空闲等待,并且哪怕只是一次只需从服务器端得到的互动,还需要从外部获取数据,在XMLHTTPREQUEST出
很简单的一个数据的交互,都要返回一个完整的Web页,造现以前,我们是让用户来输入数据并通过DOM来改变网页
成用户每次都要浪费时间和带宽去重新读取整个页面。内容的,但现在XMLHTTPREQUEST可以让我们在不重载页面
作者简介:安勤玲(197-),女,学上;研究方向:倍息化、网络信息技术
2012.2IL主生技朮与画用23
技术应用
的情况下读写服务器上的数据,使用户的输入达到最少。
个 LOADING的提示框让用户了解数据读取的状态),只有
2性能
当接收到全部数据后才更新相应部分的内容,而这种更新也
Ajax是传统WEB应用程序的一个转变。以前是服务器是瞬间的,用户几乎感觉不到。
每次生成 HTML页面并返回给客户端(览器),在大多数网
下面,我们通过实验数据来着重对比分析一下Ajax的带
站中,很多页面中至少90%都是一样的,比如:结构、格式、宽性能与传统Web方式的帯宽性能,看看是否能让程序节
页头、页尾、广告等,所不同的只是一小部分的内容,但每约至少50%的带宽
次服务器都会生成所有的页面再返回给客户端,这无形之中
为了验证这个理论,我们选择了一个相当简单的内部数
是一种浪费,不管是对于用户的时间、带宽、CPU耗用,还据分析程序。程序由典型的网页版面构成:中间是变化的内
是对于ISP的高价租用的带宽和空间来说。如果按一页来算,容部分,页头、页尾和导航条部分都没有任何变化,我们编
只能几K或是几十K可能并不起眼,但像SINA每天要生成辑了程序以便可以通过传统的页面刷新方式和AJAX方式来
几百万个页面的大ISP来说,可以说是损失巨大的。而AJAX访向它。接下来我们用測试工具(网页性能分析器)记录分析
可以作为客户端和服务器的中间层,来处理客户端的请求,了两种不同方式网页的带宽利用情况。
并根据需要向服务器端发送请求,用什么就取什么、用多少し场模式首页大小一般页面大小整体带
就取多少,就不会有数据的冗余和浪费,减少了数据下载总「传统页面刷新
44k
10k
210k
量,而且更新页面时不用重载全部内容,只更新要更新的
47k
81k
那部分即可,相对于纯后台处理并重载的方式缩短了用户等
很明显,采用Ajax所使用的帯宽相比传统Web方式而
待时间,也把对资源的浪费降到最低,対于用户和ISP来说
言,节约了约61%因此,在每页中都存在特定部分重复的
是双盈的。
由此可见,Ajx相对于传统Web方式,在性能方面的程序中,用Ajax类方法只更新网页中相关的部分能修很好的
提升主要体现在以下两个方面
节省带宽,大大降低了实例程序所需要的带宽利用率。
第一,减轻服务器的负担,因为Ajax的根本理念是“按
应用
需取数据”,所以最大可能地减少了冗余请求和对服务器造
Ajax不是万能的,在适合的场合使Ajax,才能充分发挥它
成的负担
的长处,改善系统性能和用户体验。Ajax的特点在于异步交互
“按需取数据”的模式减少了数据的实际读取量,打个动态更新Web页面,因此它的适用范围是交互较多,频繁读取
很形象的比方,如果说重载方式是从一个终点回到原点再到数据的Web应用。因此,Ajax主要用于以下一些场景:
另一个终点的话,那么 Ajax就是以一个终点为基点到达另
场景1数据验
个终点(如图2所示)
在填写表单内容时,需要保证数据的惟一性(例如新用户
注册填写的用户名),因此必须对用户输入的内容进行数据
验证。
数据验证通常有两种方式:
量方式
一种是直接填写,然后提交表单,这种方式需要将这个
页面提交到服务器端进行验证,整个过程不仅时间长而且造
Aiax方式
成了服务器不必要的负担;
图2重載方式与?jax方式对比
第二种方式是改进了的验证过程,用户可以通过点击相
第二,无刷新更新页面,减少用户实际和心理等待时间;应的验近按钮,打开新窗口査看验证结果,但是这样需要新
即使要读取比较大的数据,也不用像重载方式一样