希赛网技术应用频道:IT 新技术|构架设计|嵌入式|Web 工程|案例剖析|网络工程|数据库|分布式|IT 运维
版权声明:本文版权归希赛网技术频道所 有,未经许可,任何媒体均不得改变其形 式进行转载或摘录,违者必究!
AJAX 技术及应用
天宇
一.概述
AJAX 是今年初才问世的新术语,是 Asynchronous JavaScript and XML 的缩写.它是 一组开发 Web 应用程序的技术,它使浏览器可以为用户提供更为自然的浏览体验.每当需要 更新时,客户端 Web 页面的修改是异步的和逐步增加的.这样,AJAX 在提交 Web 页面内容 时大大提高了用户界面的速度.在基于 AJAX 的应用程序中没有必要长时间等待整个页面的 刷新.页面中需要更新的那部分才进行更改,如果可能的话,更新是在本地完成的,并且是 异步的.在客户端的 JavaScript 将与服务器的交互减至最少的同时,用户能连续与 Web 页 面交互,客户端和服务器之间的信息传递是在后台进行的.Ajax 提供与服务器异步通信的 这种能力,从而使用户从请求/响应的循环中解脱出来.借助于 Ajax,可以在用户单击按钮 时,使用 JavaScript 和 DHTML 立即更新 UI,并向服务器发出异步请求,以执行更新或查询 数据库.当请求返回时,就可以使用 JavaScript 和 CSS 来相应地更新 UI,而不是刷新整个 页面.最重要的是,用户甚至不知道浏览器正在与服务器通信:Web 站点看起来是即时响应 的.换言之,Ajax 解决方案包括一个客户端引擎,它用于呈现用户界面,并使用 XML 格式 与服务器通信.这个引擎由很多 JavaScript 函数组成,位于 Web 浏览器中,它不需要插 件,也不需要用户安装.
二.特点
异步和逐步性 AJAX 是异步的 JavaScript 与 XML 相结合,页面刷新时大都在本地异步进行.并且只是 在需要更新的区域局部进行.典型的 AJAX 应用采用 JavaScript 编写的 AJAX 引擎来与终端 用户交互,打破了传统的 Web 应用完全通过 Web 服务器处理用户请求,返回结果的模式.基 于 AJAX 的 Web 应用程序拥有和桌面程序一样的互操作性和快速响应时间,而不像很多典型 Web 应用程序一样响应迟钝,缺乏动感. 更好的用户体验; "按需取数据"的模式减少了数据的实际读取量,当在读取比较大的数据时,Ajax 是用 XMLHTTP 发送请求得到服务端应答数据,在不重新载入整个页面的情况下用 Javascript 操 作 DOM 最终更新页面的,所以在读取数据的过程中,用户所面对的也不是白屏,而是原来的
希赛网技术应用频道(http://tech.csai.cn)
0731-8873047-8000,info@csai.cn
第 1 页
希赛网技术应用频道:IT 新技术|构架设计|嵌入式|Web 工程|案例剖析|网络工程|数据库|分布式|IT 运维
页面状态(或者可以加一个 LOADING 的提示框让用户了解数据读取的状态),只有当接收到 全部数据后才更新相应部分的内容,而这种更新也是瞬间的,用户几乎感觉不到.总之用户 是很敏感的,他们能感觉到你对他们的体贴,虽然不太可能立竿见影的效果,但会在用户的 心中一点一滴的积累他们对网站的依赖. 它使用了若干项技术来构建丰富的基于 Web 的应用,使在线的 Web 应用有桌面程序一样 的观感. 丰富性和可达性 把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减 轻服务器和带宽的负担,从而达到节约 ISP 的空间及带宽租用成本的目的. Ajax 应用程序和桌面应用程序一样丰富,响应高度灵敏,并且可以在一个页面上提供 所有数据,无需刷新页面.它们还拥有基于标准的浏览器应用程序的可达性特点,这类应用 程序可以在不具备浏览器插件或客户端 applet 的情况下进行部署. 节约空间和带宽租用成本 Ajax 应用中可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处 理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本; Ajax 可以调用外部数据; 标准化 基于标准化的并被广泛支持和技术,并且不需要插件或下载小程序; 界面与应用分离 Ajax 使 WEB 中的界面与应用分离(也可以说是数据与呈现分离); 对于用户和 ISP 来说是双盈的.
三.现状及发展前景
AJAX 的出现让 Web 应用程序更有活力,同时也构造了更好的 Web 能力为托管服务铺平了 道路,这是对传统的桌面软件模式的一次改变.微软开始积极地转向基于 Web 的应用软件服 务,由桌面软件向在线软件的演化正在悄然前行. 今年 11 月份,微软以软件服务为中心重组了其业务部门,并推出了 Live.com 服务. Live.com 服务依赖于使用 AJAX 的前端.AJAX 在 Live.com 服务中大显身手. 在早些时期,Google 利用 AJAX 演示了 Web 应用程序在外观和感觉尚可与传统的桌面应 用程序竞争.AJA 在 Google 提供的电子地图服务中担纲重要角色. 基于 AJAX 的微软 Office 的替代程序也已经浮出水面,例如 Writely 就是一个在线的字 处理程序.它比 Word 更好使用,利用它的易用性,人们可以协作和共享页面.gOffice 是 另一个类似的应用程序包.它是免费供用户使用,靠插播广告获得经济收益的.而一些规模
希赛网技术应用频道(http://tech.csai.cn)
0731-8873047-8000,info@csai.cn
第 2 页
希赛网技术应用频道:IT 新技术|构架设计|嵌入式|Web 工程|案例剖析|网络工程|数据库|分布式|IT 运维
不大的厂商还把脑筋动到了桌面软件市场,试图用基于 AJAX 技术开发例如办公套件,即时 通信软件的在线版本,把桌面软件演化成为在线软件. 可见,在浏览器中更广泛采纳 Web 标准,将会使大多数的 PC 机运行 AJAX 应用程序.
四.主要技术
AJAX 的主要技术包括 XMLHttpRequest ,JavaScript,CSS,XHTML,XML,文档对象模 型以及 XSLT 等技术. 使用 XMLHttpRequest 进行异步数据读取 使用 JavaScript 绑定和处理所有数据 使用 XHTML 和 CSS 标准化呈现 使用 DOM 实现动态显示和交互 使用 XML 和 XSLT 进行数据交换与处理 1.XMLHTTPRequest Ajax 的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新 页面),这一特点主要得益于 XMLHTTP 组件 XMLHTTPRequest 对象.这样就可以向再发桌面应 用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工 作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度,缩短了用户等候时 间. 最早应用 XMLHTTP 的是微软,IE(IE5 以上)通过允许开发人员在 Web 页面内部使用 XMLHTTP ActiveX 组件扩展自身的功能,开发人员可以不用从当前的 Web 页面导航而直接传 输数据到服务器上或者从服务器取数据.这个功能是很重要的,因为它帮助减少了无状态连 接的痛苦,它还可以排除下载冗余 HTML 的需要,从而提高进程的速度.Mozilla(Mozilla1.0 以上及 NetScape7 以上)做出的回应是创建它自己的继承 XML 代理类:XMLHttpRequest 类.Konqueror (和 Safari v1.2,同样也是基于 KHTML 的浏览器)也支持 XMLHttpRequest 对 象,而 Opera 也将在其 v7.6x+以后的版本中支持 XMLHttpRequest 对象.对于大多数情况, XMLHttpRequest 对象和 XMLHTTP 组件很相似,方法和属性也类似,只是有一小部分属性不支 持. XMLHttpRequest 的应用: XMLHttpRequest 对象在 JS 中的应用 var xmlhttp = new XMLHttpRequest(); 微软的 XMLHTTP 组件在 JS 中的应用 var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); XMLHttpRequest 对象方法 /** * Cross-browser XMLHttpRequest instantiation.
希赛网技术应用频道(http://tech.csai.cn)
0731-8873047-8000,info@csai.cn
第 3 页
希赛网技术应用频道:IT 新技术|构架设计|嵌入式|Web 工程|案例剖析|网络工程|数据库|分布式|IT 运维
*/ if (typeof XMLHttpRequest == 'undefined') { XMLHttpRequest = function () { var msxmls = ['MSXML3', 'MSXML2', 'Microsoft'] for (var i=0; i < msxmls.length; i++) { try { return new ActiveXObject(msxmls[i]+'.XMLHTTP') } catch (e) { } } throw new Error("No XML component installed!") } } function createXMLHttpRequest() { try { // Attempt to create it "the Mozilla way" if (window.XMLHttpRequest) { return new XMLHttpRequest(); } // Guess not - now the IE way if (window.ActiveXObject) { return new ActiveXObject(getXMLPrefix() + ".XmlHttp"); } } catch (ex) {} return false; }; 2.JavaScript JavaScript 是一在浏览器中大量使用的编程语言,,他以前一直被贬低为一门糟糕的 语言(他确实在使用上比较枯燥),以在常被用来作一些用来炫耀的小玩意和恶作剧或是单 调琐碎的表单验证.但事实是,他是一门真正的编程语言,有着自已的标准并在各种浏览器 中被广泛支持. 3.DOM Document Object Model. DOM 是给 HTML 和 XML 文件使用的一组 API.它提供了文件的结构表述,让你可以改 变其中的内容及可见物.其本质是建立网页与 Script 或程序语言沟通的桥梁. 所有 WEB 开发人员可操作及建立文件的属性,方法及事件都以对象来展现(例如, document 就代表"文件本身"这个对像,table 对象则代表 HTML 的表格对象等等).这
希赛网技术应用频道(http://tech.csai.cn)
0731-8873047-8000,info@csai.cn
第 4 页
希赛网技术应用频道:IT 新技术|构架设计|嵌入式|Web 工程|案例剖析|网络工程|数据库|分布式|IT 运维
些对象可以由当今大多数的浏览器以 Script 来取用. 一个用 HTML 或 XHTML 构建的网页也可以看作是一组结构化的数据,这些数据被封在 DOM(Document Object Model)中,DOM 提供了网页中各个对象的读写的支持. 4.ML 可扩展的标记语言(Extensible Markup Language)具有一种开放的,可扩展的,可自 描述的语言结构,它已经成为网上数据和文档传输的标准.它是用来描述数据结构的一种语 言,就正如他的名字一样.他使对某些结构化数据的定义更加容易,并且可以通过他和其他 应用程序交换数据. 5.综合 Jesse James Garrett 提到的 Ajax 引擎,实际上是一个比较复杂的 JavaScript 应用程 序,用来处理用户请求,读写服务器和更改 DOM 内容. JavaScript 的 Ajax 引擎读取信息,并且互动地重写 DOM,这使网页能无缝化重构,也 就是在页面已经下载完毕后改变页面内容,这是我们一直在通过 JavaScript 和 DOM 在广泛 使用的方法,但要使网页真正动态起来,不仅要内部的互动,还需要从外部获取数据,在以 前,我们是让用户来输入数据并通过 DOM 来改变网页内容的,但现在,XMLHTTPRequest,可 以让我们在不重载页面的情况下读写服务器上的数据,使用户的输入达到最少. 基于 XML 的网络通讯也并不是新事物,实际上 FLASH 和 JAVA Applet 都有不错的表现, 现在这种富交互在网页上也可用了,基于标准化的并被广泛支持和技术,并且不需要插件或 下载小程序. Ajax 是传统 WEB 应用程序的一个转变.以前是服务器每次生成 HTML 页面并返回给客户 端(浏览器).在大多数网站中,很多页面中至少 90%都是一样的,比如:结构,格式,页 头,页尾,广告等,所不同的只是一小部分的内容,但每次服务器都会生成所有的页面再返 回给客户端,这无形之中是一种浪费,不管是对于用户的时间,带宽,CPU 耗用,还是对于 ISP 的高价租用的带宽和空间来说.如果按一页来算,只能几 K 或是几十 K 可能并不起眼, 但像 SINA 每天要生成几百万个页面的大 ISP 来说,可以说是损失巨大的.而 AJAX 可以所为 客户端和服务器的中间层,来处理客户端的请求,并根据需要向服务器端发送请求,用什么 就取什么,用多少就取多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新 页面时不用重载全部内容,只更新需要更新的那部分即可,相对于纯后台处理并重载的方式 缩短了用户等待时间,也把对资源的浪费降到最低,基于标准化的并被广泛支持和技术,并 且不需要插件或下载小程序,所以 Ajax 对于用户和 ISP 来说是双盈的. Ajax 使 WEB 中的界面与应用分离(也可以说是数据与呈现分离),而在以前两者是没 有清晰的界限的,数据与呈现分离的分离,有利于分工合作,减少非技术人员对页面的修改 造成的 WEB 应用程序错误,提高效率,也更加适用于现在的发布系统.也可以把以前的一些 服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理.
希赛网技术应用频道(http://tech.csai.cn)
0731-8873047-8000,info@csai.cn
第 5 页
希赛网技术应用频道:IT 新技术|构架设计|嵌入式|Web 工程|案例剖析|网络工程|数据库|分布式|IT 运维
五.应用
Ajax 理念的出现,揭开了无刷新更新页面时代的序幕,并有代替传统 web 开发中采用 form(表单)递交方式更新 web 页面的趋势,可以算是一个里程碑.但 Ajax 都不是适用于所 有地方的,它的适用范围是由它的特性所决定的. 举个应用的例子,是关于级联菜单方面的 Ajax 应用. 我们以前的对级联菜单的处理是这样的: 为了避免每次对菜单的操作引起的重载页面,不采用每次调用后台的方式,而是一次性 将级联菜单的所有数据全部读取出来并写入数组,然后根据用户的操作用 JavaScript 来控 制它的子集项目的呈现,这样虽然解决了操作响应速度,不重载页面以及避免向服务器频繁 发送请求的问题,但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话,那 读取的数据中的一部分就会成为冗余数据而浪费用户的资源,特别是在菜单结构复杂,数据 量大的情况下(比如菜单有很多级,每一级菜又有上百个项目),这种弊端就更为突出. 如果在此案中应用 Ajax 后,结果就会有所改观: 在初始化页面时我们只读出它的第一级的所有数据并显示,在用户操作一级菜单其中一 项时,会通过 Ajax 向后台请求当前一级项目所属的二级子菜单的所有数据,如果再继续请 求已经呈现的二级菜单中的一项时,再向后面请求所操作二级菜单项对应的所有三级菜单的 所有数据,以此类推……这样,用什么就取什么,用多少就取多少,就不会有数据的冗余和 浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分 即可,相对于后台处理并重载的方式缩短了用户等待时间,也把对资源的浪费降到最低. 此外,Ajax 由于可以调用外部数据,也可以实现数据聚合的功能(当然要有相应授 权),比如微软刚刚在 3 月 15 日发布的在线 RSS 阅读器 BETA 版;还可以利于一些开放的数 据,开发自已的一些应用程序,比如用 Amazon 的数据作的一些新颖的图书搜索应用. 总之,Ajax 适用于交互较多,频繁读数据,数据分类良好的 WEB 应用.
版权声明:本文版权归希赛网技术频道所 有,未经许可,任何媒体均不得改变其形 式进行转载或摘录,违者必究!
希赛网技术应用频道(http://tech.csai.cn)
0731-8873047-8000,info@csai.cn
第 6 页