Ajax引擎的原理和应用

邮局订阅号:82-946360元/年 技 术 创 新 软件时空 《 嵌入式系统应用精选 200例》 您的论文得到两院院士关注 Ajax引擎的原理和应用 TheprincipleandapplicationofAjaxengine (北京交通大学)游丽贞 郭宇春 李纯喜 You,LizhenGuo,YuchunLi,Cunxi 摘要:Ajax是 web应用的一种新方法。它并不是一门新的语言或技术,实际上是几种已经在各自领域大行其道技术的强强结 合,Ajax混合了 XHTML/CSS,DOM,XML及 XSLT等几项技术,并且利用 Javascript来整合上述技术。Ajax为交互较多,频繁读 数据,数据分类良好的 Web应用提供了一个很好的解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 。 关键字:Ajax,XMLHttpRequest,Web应用,无刷新更新页面 中图分类号:TP391 文献标识码:A Abstract:Ajaxisanewapproachtowebapplication.Ajaxisn'tatechnology.It'sreallyseveraltechnologies,eachflourishing initsownright,comingtogetherinpowerfulnewways.Ajaxoffersanexcellentsolutiontowebapplications,especially,thathave richinteractionandresponsiveness. Keywords:Ajax,XMLHttpRequest,Webapplication,updatingweb 文章编号:1008-0570(2006)02-3-0205-03 当前Web服务逐渐渗入到人们的日常生活中,越 来越多的人通过 Web享受信息化时代带来的的各种 服务。一个热门站点的Web服务器每时每刻要处理海 量的数据请求。同时我们在浏览Web站点的时候,不 时的通过链接从一页跳到另一页。我们会发现同一个 站点上的许多页面上内容都是重复的,譬如页头、页 尾和广告等。这样一来造成了数据的重复请求,不但 加大了服务器的负担,而且造成用户界面的闪烁或白 屏。 针对以上问题,2005年 2月 JesseJamesGarrett 提 出 了 Ajax这 个 概 念 。 Ajax是 Asynchronous JavaScriptandXML的缩写。Ajax并不是一门新的语 言或技术,它实际上是几项技术按一定方式的组合,在 共同的协作中发挥各自的作用,它包括:使用 XHTML 和CSS 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 化呈现;使用DOM实现动态显示和交互; 使用XML和 XSLT进行数据交换与处理;使用 XML- HttpRequest进行异步数据读取;最后用 JavaScript绑 定和处理所有数据。其中 XMLHttpRequest,Javascript 和DOM是Ajax技术的核心。 1Ajax的原理 在经典的浏览器与服务器的交互方式中,由用户 触发一个HTTP请求到服务器,服务器对其进行处理 后再返回一个新的Web页到浏览器,每当服务器处理 浏览器提交的请求时,客户都只能空闲等待,并且哪 怕只是一次只需从服务器端得到很简单的一个数据 的交互,都要返回一个完整的 Web页,造成用户每次 都要浪费时间和带宽去重新读取整个页面。 Ajax的工作原理相当于在用户和服务器之间加 了—个中间层———Ajax引擎,使用户操作与服务器响 应异步化———并不是所有的用户请求都提交给服务 器,一些数据验证和处理由Ajax自己来做而不必交给 服务器处理,只有确定需要从服务器读取新数据时再 由 Ajax引擎代为向服务器提交请求。在使用 Ajax引 擎后,用户从感觉上几乎所有的操作都会很快响应没 有页面重载(白屏)的等待。(如图1) 从(图-1)我们可以看出Ajax引擎,实际上是一个 比较复杂的 JavaScript应用程序,用来处理用户请求 然后根据需要动态读写服务器和更改 DOM内容。以 前为了使网页能无缝化重构,也就是在页面已经下载 完毕后改变页面内容,开发人员一直通过 JavaScript 游丽贞:硕士研究生 国家自然科学基金, 合同 劳动合同范本免费下载装修合同范本免费下载租赁合同免费下载房屋买卖合同下载劳务合同范本下载 号:60202001 borwserclient userinterface HTTPrequest http(s)transport HTML+CSSdata webserver datastores,backend processing,legacysystems server-sidesystems classic webapplicationmodel browserclient userinterface JavaScriptcall HTML+CSSdata Ajaxengine HTTPrequest http(s)transport XMLdata weband/orXMLserver datastores,backnd processing,legacysystems server-sidesystems Ajay webapplicationmodel 图1 205- - 技 术 创 新 中文核心期刊《微计算机信息》(管控一体化)2006年第 22卷第 2-3期 360元/年 邮局订阅号:82-946 《 PLC技术应用 200例》 软件时空 和DOM来实现。但是要使网页真正动态起来,不仅要 内部的互动,还需要从外部获取数据,在 XML- HTTPRequest出现以前,我们是让用户来输入数据并 通过 DOM来改变网页内容的,但现在 XMLHTTPRe- quest可以让我们在不重载页面的情况下读写服务器 上的数据,使用户的输入达到最少。 下面介绍一下构成 Ajax引擎的几个主要技术及 其在Ajax引擎中所起的作用。 1.XMLHttpRequest 在Ajax引擎中的几项技术中 XMLHttpRequest是 最核心的技术,是Ajax引擎解决无需刷新整个页面就 可以从服务器获取新数据这个问题的关键所在。 在微软 IE平台下 XMLHTTPRequest是 XML- HTTP组件一个对象,它通过允许开发人员在Web页 面内部使用 XMLHTTPActiveX组件扩展自身的功能, 开发人员可以不用从当前的 Web页面导航而直接传 输数据到服务器上或者从服务器取数据。这个功能是 很重要的,因为它帮助减少了无状态连接的痛苦,它还 可以排除下载冗余 Web数据的需要,从而提高进程的 速度。当然在其他 Web浏览器平台下,例如 Mozilla (Mozilla1.0以上),Konqueror和 Opera(v7.6x+),它们都 创建了它们自己的继承 XML代理类———XMLHttpRe- quest类。对于大多数情况,XMLHttpRequest对象和 XMLHTTP组件很相似,方法和属性也类似,只是有一 小部分属性不支持。 2.DOM(DocumentObjectModel) DOM是给 HTML和 XML文件使用的一组 API。 它提供了文件的结构表述,让你可以改变其中的內容 及可见物。其本质是建立网页与 Script或程序语言沟 通的桥梁。所有Web开发人员可操作及建立文件的属 性、方法及事件都以对象来展现(例如,document就代 表"文件本身"这个对像,table对象则代表 HTML的表 格对象等等)。这些对象可以由当今大多数的浏览器 以 Script来取用。 一个用HTML或XHTML构建的网页也可以看作 是一组结构化的数据,这些数据被封在 DOM(Docu- mentObjectModel)中,DOM提供了网页中各个对象 的读写的支持。 3.JavaScript JavaScript是一在浏览器中大量使用的跨平台编 程语言,常被用来做一些网页特效或表单验证。在A- jax中Javascript则是XMLHttpRequest和DOM交互的 桥梁和 Ajax引擎工作的主要推动力。Javascript通过 调用 XMLHttpRequest的属性和方法来获取服务端数 据,然后调用 DOM的 API来更新 Web页面的内容。 实现整个页面的无刷新更新页面。 2Ajax优缺点 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 任何一项技术都具有其固有的优点及缺点,对于 它们的优点和缺点的事先的认识,有利于将来准确 地,有效地利用这项技术。根据以上Ajax的原理和技 术背景可以总结出Ajax有以下优势: 1.减轻服务器的负担 因为Ajax的根本理念是"按需取数据",所以最大 可能在减少了冗余请求和响影对服务器空间和带宽 造成的负担。同时Ajax可以把原来需要服务器要做的 许多事情放到客户端来做。 我们在上网冲浪的时候可以看到大多数网站的 很多页面至少 90%都是一样的,比如:结构、 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 、页 头、页尾、广告等,所不同的只是一小部分的内容,但 每次服务器都会生成所有的页面再返回给客户端,这 无形之中是一种浪费,不管是对于用户的时间、带宽、 CPU耗用,还是对于ISP的高价租用的带宽和空间来 说。如果按一页来算,只能几K或是几十K可能并不 起眼,但像每天要生成几百万个页面的大ISP来说,可 以说是损失巨大的。而Ajax可以所为客户端和服务器 的中间层,来处理客户端的请求,并根据需要向服务 器端发送请求,用什么就取什么、用多少就取多少,就 不会有数据的冗余和浪费,减少了数据下载总量,而 且更新页面时不用重载全部内容,只更新需要更新的 那部分即可,相对于纯后台处理并重载的方式缩短了 用户等待时间,也把对资源的浪费降到最低,所以 A- jax对于用户和ISP来说是双赢的。 2.刷新更新页面,减少用户实际和心理等待时间 � �������� � ��� ���� ��� ��� �������� ������� � � !!� ���"� � �# ����� $ % & ’ ( ) * + , - . �# ��� � �� ���"� � �# ��/. �# ���� ! /�� $%&’()*01- . �# � 23� �� "�/4 �.�#/5/6��/75��8"9:!�� 75/�� �;�4 /75�/����<��#/===�� >?@A-��-B2�6��5� ��5�CDEFG� � "#�9�"� "��� HI��� � �� � ��� �# ��/!�� !/5� /J�!� /�� >?. �# �KC��LMHI� �������� � ��� �NO� NO� ��� �"� �#8���� 9.�"� � PQRS-TUVHW� � �#8X��� � �PQ�Y"� � ��Z� [�\�@]^_� ‘�\�abc� d�\�eab� f�\�ghc� i�\�+j� � ���"� k l�� mnWop)qGr-stut� � ���"� ���� mnWop)qGr-vw xy� - ��� sz �� ������� mnW)q-PQ{5�|}i[i�\�/ sU~€/�d[[�\/j‚/� ������k l�� mnW)q-PQstƒ„� � 206- - 邮局订阅号:82-946360元/年 技 术 创 新 软件时空 《 嵌入式系统应用精选 200例》 您的论文得到两院院士关注 首先,"按需取数据"的理念减少了数据的实际读 取量,打个很形象的比方,譬如你现从北京来到了上 海,然后你再想去广州。按照经典重载的模式是从上 海回到北京再到广州的话,那么Ajax的模式就是直接 从上海到广州,而不必走已经走过的北京到上海的 路。这样一来就减少了用户实际等待时间。 其次,DOM的使用则不象传统刷新那样出现白屏 的情况,而是在读取数据的过程中显示的是原来的页 面状态 (在实际应用过程中可以加一个 Loading的提 示框让用户了解数据读取的状态),只有当接收到全 部数据后才更新相应部分的内容,而这种更新也是瞬 间的,用户几乎感觉不到。 3.基于标准化的并被广泛支持和技术,并且不需 要插件或下载小程序 Ajax里面的每个技术都是基于标准化的并被广 泛支持的技术,并且不需要插件或下载小程序。 4.Ajax可以调用外部数据 Ajax由于可以调用外部数据,也可以实现数据聚 合的功能(当然要有相应授权),比如微软刚刚在 3月 15日发布的在线RSS阅读器 BETA版;还可以利于一 些开放的数据,开发自已的一些应用程序,比如用 A- mazon的数据作的一些新颖的图书搜索应用。 5.Ajax使 Web中的界面与应用分离(也可以说是 数据与呈现分离) Ajax在整个Web服务系统的位置决定了 Ajax引 擎只要从服务端获取 XML或者其他格式的数据,便 可定制整个Web界面,从而可以使的服务端只注重数 据逻辑处理而不必关心Web界面的呈现,将数据呈现 的工作交给Ajax引擎来做,这样有利于分工合作、减 少非技术人员对页面的修改造成的 Web应用程序错 误、提高效率、也更加适用于现在的发布系统。 同时Ajax也存在一些的问题,例如: 1.一些手持设备(如手机、PDA等)现在还不能很 好的支持Ajax。 2. 开发过程中用 JavaScript作的 Ajax引擎, JavaScript的兼容性和DeBug都是让人头痛的事;另外 因为这个架构刚刚提出,所以其IDE环境还未出现。 3.Ajax的无刷新重载,由于页面的变化没有刷新 重载那么明显,所以容易给用户带来困扰———用户不 太清楚现在的数据是新的还是已经更新过的。不过对 于这个问题,我们可以在相关位置做出提示,把数据更 新的区域设计得比较明显,在数据更新后给用户提示。 4.对流媒体的支持没有Flash、JavaApplet好。 3应用 下面举个关于典型Ajax应用———树形菜单。我们 在上网时可以看到许多树形菜单的应用,例如微软站 点上的 http://msdn.microsoft.com/library/。我们以前的 对于树形菜单的开发过程是这样的: 为了避免每次对菜单的操作引起的重载页面,不 采用每次调用后台的方式,而是一次性将树形菜单的 所有数据全部读取出来并写入数组,然后根据用户的 操作用 JavaScript来控制它的子集项目的呈现,这样 虽然解决了操作响应速度、不重载页面以及避免向服 务器频繁发送请求的问题,但是如果用户不对菜单进 行操作或只对菜单中的一部分进行操作的话,那读取 的数据中的一部分就会成为冗余数据而浪费用户的 资源,特别是在菜单结构复杂、数据量大的情况下(例 如微软 MSDN站点),这种弊端就更为突出。 如果应用 Ajax后,结果就会有所改观:在初始化 页面时我们只读出它的第一级的所有数据并显示,在 用户操作一级菜单其中一项时,会通过Ajax向后台请 求当前一级项目所属的二级子菜单的所有数据,如果 再继续请求已经呈现的二级菜单中的一项时,再向后 面请求所操作二级菜单项对应的所有三级菜单的所 有数据,以此类推......这样,用什么就取什么、用多少 就取多少,就不会有数据的冗余和浪费,减少了数据 下载总量,而且更新页面时不用重载全部内容,只更 新需要更新的那部分即可,相对于后台处理并重载的方 式缩短了用户等待时间,也把资源的浪费降到了最低。 4将来的研究 Ajax是web应用方面的一个重要的概念,其应用 也会越来越广,譬如google,微软均已经在自己的站点 或产品中应用了Ajax。但是我们不应该对这种技术存 在盲目的推崇而是应该也有我们自己的想法,Ajax应 用的最大的挑战不是技术方面的,因为 Ajax所涉及的 核心技术都已经很成熟了,它主要的挑战是Ajax应用 的设计者:应该超越已有的思维定式,忘记已了解的 web的限制,展开丰富的想象,把 Ajax技术推广到更 广的范围更宽的层面。 参考文献 [1][JesseJamesGarrett.Ajax:ANewApproachtoWebApplic- ations[EB/OL].http://www.adaptivepath.com/publications/essays/arc hives/000385.php [2]车银超,刘冰.SNMPv3安全机制的实现与性能分析[J].微计算 机信息,2005,8-3:7-10 作者简介:游丽贞,(1981-),女,福建南平人,北京交通 大学通信与信息系统专业硕士研究生,主要研究方向: 复杂网络研究;郭宇春,(1968-),女,山西晋城人,北京 交通大学 电子信息工程学院,副教授,硕士 主要研究 方向:网络测量与建模,Qos路由;李纯喜,(1970-),男, 辽宁锦西人,北京交通大学 电子信息工程学院,讲师, 硕士,主要研究方向:网络测量与建模,网络性能分析。 (100044 北京交通大学通信工程实验室) 游丽贞 郭宇春 李纯喜 (Communicationengineeringlab,BeijingJiaoTong university,Beijing100044,China) You,Lizhen Guo, YuchunLi,Cunxi (投稿日期:2005.7.10)(修稿日期:2005.7.18) 207- -