2008 年工程硕士高技术报告作业

AJAX 技术概述及性能改进研究

学院：计算机与软件学院 学号： 姓名： 20070088 鲍嘉鑫

AJAX 技术概述及性能改进研究 技术概述及性能改进研究
1 Ajax 的技术概述

Ajax 全称为“Asynchronous JavaScrip

t and XML”(异步 JavaScript 和 XML),是指一种创 建交互式网页应用的网页开发技术。Ajax 这个名词的首次出现是在 2005 年 2 月 18 日美国 一位叫做杰西·詹姆斯·加勒特(Jesse James Garrett)发表的一篇题为《Ajax 一个 Web 应用的 新途径》的论文中。文章认为 Ajax 不是一种技术。实际上,它由几种蓬勃发展的技术以新的 强大方式组合而成。 以 AJAX 技术为特征的 WEB 程序是一种富客户 WEB 程序,它以 XMLHttpRequest 为技 术基础,采用 Javascript 等脚本语言结合 XML、CSS、DOM 模型等技术为用户提供桌面应用 程序的使用体验,为 Web 商业应用软件提供了解决方案。 这是一种新兴的网络技术,我们对其性能尤为关注。因此,本文拟对 AJAX 技术的性能作 些探讨。首先,对网页通信的基本原理做简单分析,然后通过与传统模式的比较看其优缺点, 最后提出一些性能改善建议。

2

AJAX 技术的产生

我们知道,浏览器是建立在 TCP/IP 和 HTTP 协议上的,其基本数据内容是 HTML 格式数 据,还可以包含脚本程序和样式文件等内容。HTTP 协议是建立在 TCP/IP 上的应用协议,是一 种无状态的、基于对象的“请求-响应”通信机制,所以也是一种客户/服务器(C/S)体系结构。 但是,与传统 C/S 不同,浏览器与服务器之间没有固定连接,而是当请求数据时才建立连接,请 求完成后连接也关闭,即每次请求过程包含“建立连接→请求→响应→断开连接”四个步骤; 另一方面,浏览器没有固定的服务器,它请求连接的服务器是随机、动态的。 传统的 Web 程序正是根据以上两点建立起来的,人们称之为页面刷新模式。其特点是每 次均通过链接或表单提交一个页面资源请求,服务器处理后返回一个新的、完整的页面,浏览 器再将页面构造并显示。这是一种同步传输方式,而脚本程序只能对已经显示的页面进行一 些处理功能,不能控制数据的通信。 这种技术产生的效果是:每次用户提交请求后,页面要等待 数据传输完成,然后重新刷新,程序的显示效果不好,难以达到类似桌面应用程序的效果。以 XMLHttpRequest 技术为基础的 AJAX 克服了同步传输和以页面资源为请求对象的技术难题, 为实现类桌面应用程序提供了解决方案。 根据分析,我们制作了两种模式的体系图,其中图 1 是传统模式浏览器程序体系逻辑结构, 图 2 是 AJAX 模式的体系逻辑结构。如图所示,AJAX 模式与传统模式相比较,在 HTML 页面 显示处理与 HTTP 协议层之间多加了一个 XMLHTTP 处理层。该层提供了一个脚本程序与 服务器直接进行 HTTP 通讯的通道,并提供同步与异步两种通讯方式。浏览器脚本程序如 Javascript 可以直接访问该接口,这样就可以为程序员提供直接的数据操纵能力而不再局限于 页面。而异步方式的功能使得我们有能力以更稳定的方式显示信息。 XMLHttpRequest 为 AJAX 提供了通信基础,而 Javascript 的面向对象编程和 DOM 模型、 CSS 等则为 AJAX 提供了开发平台。正是 Javascript prototype 类库的创建开启了 AJAX 的康 庄大道。

通过 AJAX 技术结合服务器,我们可以实现丰富多彩的功能,如同步和异步传输、页面静 态刷新、请求返回的可以是不带格式的纯数据、数据的递增式抽取与显示等。下一节对两种 模式的性能进行比较。

3

AJAX 性能分析

AJAX 的优点体现在与页面刷新模式的比较上,所以我们首先对他们作一比较。 如上一节 所述,AJAX 模式与传统页面刷新模式在通讯上是一致的,都是通过 HTTP 协议完成的,这就决 定了 AJAX 也是一种一次“请求-响应”对应一个连接的连接不保持方式。因为通信协议一 样,所以其通信速度也是一样的。这也说明 AJAX 技术并没有改变网页程序的本质,而只是在 数据显示流程方法上作了改进:服务器响应数据不是直接由浏览器解释显示,而是先由脚本程 序处理,然后再显示。 虽然 AJAX 同页面刷新模式具有相同的网络传输速度,但由于 AJAX 提供了异步传输和 脚本处理能力而使其大大节省了数据传输量,缩短了一次性等待时间。WebPerformance.com 发布的一份 Web 开发中"传统的页面刷新模式 vs AJAX 模式"的性能测试结果显示,AJAX 模式程序比传统的页面刷新模式可节省 60%以上的带宽。 另一方面,AJAX 也存在一些不足之处,主要表现在:脚本程序变大、 同步传输方式有阻塞。 因为数据的显示等处理更多地依赖于脚本程序,程序代码自然就会变大,而脚本程序不是本地 程序,需要从服务器加载到浏览器上,所以需要消耗带宽,尤其对复杂的基于 AJAX 框架的 Web 程序可能更突出。我们将在下一节提供一些改进建议。 XMLHttpRequest 提供两种传输方式,即同步和异步方式。这两种方式是建立在 HTTP 通

信基础上的,与 HT-TP 服务器的连接依然是同步方式。在浏览器进程内添加定时器方式来实 现异步机制,而同步方式则基本是直接对 HTTP 接口的封装。采用异步方式发送请求将大大 提高用户的使用体验,因为在接收数据时能继续执行 JavaScript 代码和响应用户操作。 另一方 面,XMLHttpRequest 的调用是在脚本程序中调用,而目前大多数浏览器如 IE6.0 对脚本程序的 执行是单线程的,即在浏览器进程中同一时刻只能执行一个脚本程序。这将导致如下问题出 现:如果一个 XMLHttpRequest 调用因等待数据被挂起,将导致该浏览器进程出现死机现象。 要避免该现象,最好是避免使用同步方式,但对于“在继续后续操作之前须完成当前请求”而 必须使用同步方式的情况,则应当尽可能将其化为多次处理,减少每次的传输大小,降低锁定 风险。 归纳起来,AJAX 技术能节省带宽,也存在一定的额外负担需要克服,但其总体性能比页面 刷新模式要优越,其异步传输机制也为开发类桌面应用程序提供了方法。第 5 节我们将提供 一些优化方法以供参考。

4

AJAX 程序开发方式

AJAX 程序是以 JavaScript 脚本语言在 XMLHttpRequest 对象基础上开发的。我们可以 直接利用 XMLHttpRequest 对象进行编程,也可以利用通用类库进行开发。 直接开发方法一般如下: (1)获取链接和 form 请求参数,构造成请求 url; (2)var vXMLHttp = new XMLHttpRequest(); //创建一个对象; (3) vXMLHttp. Onreadystatechange= DoData(); //异步方式时设置处理函数; (4)vXMLHttp.open(get/post,url,异步/同步); //设置请求参数; (5)vXMLHttp.send(); //发送请求,异步时直接返回,同步时等待; (6)Var str = vXMLHttp. responseText; //同步方式时接收数据; (7)…处理数据。 利用 JavaScript 语言支持面向对象编程特性,人们对 XMLHttpRequest 进行了封装,开发了 很多通用类库,包括 Google 的 GWT、微软的 dot net 等,其中最流行的是由 Sam Henson 开发 的 Prototype 类库(原型库)。在类库基础上,我们可以开发真正的面向对象程序,使程序更加高 效,同时使脚本程序具备了开发大型应用的能力。具体开发方法可参考各自开发文档。

5

AJAX 技术的性能改进方法

如前文所述,AJAX 存在程序量大的缺点,本节对此提出一些改进建议。 人们在使用 AJAX 开发程序时,一般出于这样的考虑:不使用 frame 框架,但同时保持页面的框架性,使 Web 程序 成为一个多功能紧凑型的复杂系统,并为用户提供桌面应用程序级别的使用体验,例如博客、 网上购物等。像这样的程序,我们希望主页面只加载一次。对于脚本程序,我们或者直接在 HTML 页面文件中编写,更一般是以独立的 js 文件存储在服务器端,在 HTML 页面上使用 <script type="text/javascript" src=""/>加载到浏览器上的。在不做优化的情形下,如 果使用 AJAX 模式开发,在首页加载时会同时将所用用到的脚本程序加载到浏览器。表 1 是 WebPerformance.com 在文献[3]中的测试结果统计表。从该表中可看出,AJAX 模式首页比页 面刷新模式要大。

对于复杂系统,这是一个非常大的数据量,必将严重影响首页的性能。以下是一些改进方

法。 (1)使用面向对象方式设计开发。 Prototype 类库为 Javascript 提供了基于原型的对象模型, 该模型支持类的主要特性,如继承、封装、重载、方法、属性等,使用该模型利用面向对象技 术可以设计开发优秀的面向对象程序。 (2)功能模块化。利用面向对象良好的模块性将整个系统程序根据功能进行模块化设计, 例如可划分为基础类库、工具类库、页面功能类库等,并使页面功能类库建立在基础类库和 工具类库基础上。 (3)复杂功能模块尽可能打包压缩,可采用预加载技术。 有的页面功能模块是具有事务性、 全局性、涉及多个请求的复杂功能,这样的功能模块可能包含很多 js 文件,程序量可能很大。 对这种模块,我们往往需要与首页一同加载到浏览器。由于每个文件引入都将导致一次请求 发生,根据 http 协议,也将导致一次新的连接过程,而连接的建立是有时间开销的,如果对每个 js 文件都加一个<scripttype="text/javascript" src="" />来引入,将会导致大量的连接 建立时间开销,以及首页出现阻塞。 对此,我们建议对功能包进行预处理,即将功能模块设计的所有文件重新组织成一个或几个大 的 js 文件,然后加载新的大 js 文件。可以有两种方式:手工处理和程序处理。手工处理虽然简 单,但当出现程序更新时,会使程序文件管理复杂化。程序处理则相对容易管理,其方法大致如 下: 1)建立一个模块配置文件,内容是该模块包含的所有 js 文件名及打包文件名; 2)HTML 页面引用固定的打包文件名来引入该模块; 3)服务器在加载首页时,首先判断该打包文件是否存在,如果不存在则根据配置文件将所 有模块 js 文件读入并写到打包文件中; 4)当模块文件修改后,只要修改配置文件并删除已经存在的打包文件即可。 使用该方法仅当第一次访问首页时需要消耗一定的服务器处理时间,此后就可以直接引 用,对大型系统可以大大提高首页加载速度。 (4)简单功能模块应当相对独立,可采用延迟加载技术。与复杂功能模块不同,简单功能模 块其功能相对单一,一般就一个 js 文件加一些基础类库就能实现。对简单功能,在设计时我们 要将其独立化,这样可以保持程序文件尽可能小。基础类库应当在首页中加载,而简单功能脚 本程序则可以采用延迟加载技术,在使用时方将其加载到浏览器,这样减少了首页加载内容。 实现延迟加载的方法有多种,例如使用 Prototype 类库[5]中的 Update 方法。本文介绍另一种 方法。 1)创建一个延迟加载类,保存到文件 load.js 文件; 2)创建一个二维数组,数组内容是<类名,模块文件 url>,数据由开发人员在发布时进行配 置; 3)创建一个函数访问接口程序和一个文件加载程序; 4)函数访问方式则可以通过函数访问接口访问或者在确定加载成功后也可以直接访问。 访问接口与文件加载函数基本原理如下所示,可以对其作进一步改进。 Var level =0;定义一个变量,防止无限递归。 function callfun(classname, callbackname,callbackexpression) {//函数访问接口 if (window[classname]) { //判断类是否已经加载 if (eval(callbackname)) {//判断访问对象是否存在 level = 0; return eval(callbackexpression); //执行 }

}else if (level<10 &&类在二维数组中) {//没有加载则启动动态加载 return loadScript( classname, callbackname, callbackexpression); } return false; } function loadScript (classname, callbackname, callbackexpression); {//文件加载程序 var head = document. getElementsByTagName( " head"); //使用 script 标签加载 var script = head.appendChild(document.createElement("script")); level ++; script.type = "text/javascript"; script.src = classname 对应的模块文件 url; //一定时间后执行处理 var timeout = setTimeout(callfun(classname, callbackname,callbackexpression),5000); return ; } 通过应用以上一些方法,可以使 AJAX 模式带来的程序量大、首页加载时间长的缺陷得 到改善,进一步提高程序性能。

6

结束语

AJAX 技术比传统页面刷新模式具有更好的性能和友好的用户体验,为开发类桌面 Web 应用程序提供了解决方案。AJAX 技术在 Web 2.0 中也是一个非常重要的技术。应用 AJAX 技术开发网站日益成为网络行业的主流选择。通过本文的研究,我们可以了解 AJAX 原理,看 到 AJAX 技术的优势,并掌握一定的优化技术,希望能对 AJAX 程序开发提供一定帮助。