AJAX 框架简介
『导读』:DWR核Buffalo都是Web Remoting框架,区别在DWR使用自定义的简单文本协议,而Buffalo使用burlap协议;DWR的服务器端实现要比Buffalo完善一些...
AJAX框架:
DWR-Web Remoting
Buffalo-Web Remoting(based on prototype)
prototype-JS OO library
openrico-JS UI component(based on prototype)
dojo-JS library and UI component
qooxdoo-JS UI component(C/S Style)
YUL-JS UI component
Web Remoting-DWR vs Buffalo
DWR和Buffalo都是Web Remoting框架,区别在于:
DWR使用自定义的简单文本协议,而Buffalo使用burlap协议。因此Buffalo解析大量数据可能会比较慢,然而可以适用于多种服务器和客户端,并且burlap协议的完整性和支持的数据类型更加丰富。
Buffalo基于prototype,如果你的AJAX应用也是基于prototype,那么可以减少重复加载prototype的带宽,并且获得相当一致的编程概念
DWR的服务器端实现要比Buffalo完善一些
DWR更加通用一些,用户比较广,而Buffalo是国内的Michael写的,用户比较少(名气较小)
建议使用buffalo,相对更加容易,然而服务器端功能有待完善
JavaScript Component Library-prototype vs qooxdoo vs dojo vs YUL
prototype是一个非常优雅的JS库,定义了JS的面向对象扩展,DOM操作API,事件等等,之上还有rico/script.aculo.us实现一些JS组建功能和效果(不过目前还不是很完善),以prototype为核心,形成了一个外围的各种各样的JS扩展库,是相当有前途的JS底层框架,值得推荐,prototype以及rico/script.aculo.us的一个突出的特点就是非常易学易用,门槛很低,常常是一两行JS代码就可以搞定一个相关功能。同时它也是RoR集成的AJAX JS库。
qooxdoo是一个功能很强的JS组建库,完全模仿Windows操作系统的GUI组建。特点是不通过常规的HTML来构造页面,完全使用JS以类似VB/Delphi风格的编程方式构造Web GUI界面,比较适合内网面向C/S风格的Web 应用,而不适合面向Internet的界面多变风格的应用。qooxdoo的一个重大卖点在于qooxdoo将要提供一个FormDesigner的IDE,通过在IDE里面的可视化托拽设计方式来自动生成C/S风格的Web 页面js
代码。qooxdoo缺点是JS文件体积过大,超过200KB,初次下载会比较慢,而且并不适合Internet消费类型网站。
dojo是一个各个方面相当完善的JS库,包括了JS本身的语言扩展,以及各个方面的工具类库,和比较完善的UI组建库,也被广泛应用在很多项目中,它的UI组建的特点是通过给HTML标签增加tag的方式进行扩展,而不是通过些JS来生成,dojo的API模仿Java类库的组织方式。dojo的优点就是库相当完善,发展时间也比较长,缺点文件体积比较大,200多KB,初次下载相当慢,些外,dojo的类库使用显得不是那么容易,至少给我的感觉是相当笨拙,特别是和prototype相比,更加显得难用。
YUL是Yahoo新发布AJAX组建库,也是一个包含了各个方面,从工具库到通讯,到UI组建的综合性JS库,YUL的优势在于文档非常齐全,而且有Yahoo的支持,缺点是库目前还是不是很全,功能也不强大。
使用Ajax的主要原因
1、通过适当的Ajax应用达到更好的用户体验;
2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
引用
Ajax这个概念的最早提出者Jesse James Garrett认为:Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:
·使用XHTML和CSS标准化呈现;
·使用DOM实现动态显示和交互;
·使用XML和XSLT进行数据交换与处理;
·使用XMLHttpRequest进行异步数据读取;
·最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax应用场景
Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。Ajax的特点在于异步交互,动态更新web页面,因此它的适用范围是交互较多,频繁读取数据的web应用。现在来看几个Ajax的应用实例,读者可以了解如何使用Ajax技术改进现有的web应用系统。
场景1.数据验证
在填写表单内容时,需要保证数据的唯一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式:一种是直接填写,然后提交表单,这种方式需要将这个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;第二种方式是改进了的验证过程,用户可以通过点击相应的验证按钮,打开新窗口查看验证结果,但是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。而使用Ajax技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。
场景2.按需取数据
分类树或者树形结构在web应用系统中使用得非常广泛,例如部门结构,文档得分类结构常常使用树形空间呈现。以前每次对分类树得操作都会引起页面重载,为了避免这种情况出现,一般不采用每次调用后台得方式,而是一次性将分类结果中得数据一次性读取出来并写入数组,然后根据用户的操作,用JavaScript来控制节点的呈现,这样虽然解决了操作响应速度,不重复载入页面以及避免向服务器频繁发送请求的问题,但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话(这种情况很普遍的),那么读取的数据中就会有相当大的冗余,浪费了用户的资源。特别是在分类结构复杂,数据庞大的情况下,这种弊端就更加明显了。
现在应用Ajax改进分类树的实现机制。在初始化页面时,只获取第一级子分类的数据并且显示;当用户点开一级分类的第一节点时,页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据;如果再请求已经呈现的二级分类的某一节点时,再次向服务器请求当前分类所属的三级子分类的所有数据,以此类推。页面会根据用户的操作向服务器请求它所需要的数据,这样就不会存在数据的冗余,减少了数据下载总量。同时,更新页面时不需要重载所有内容,只更新需要更新的那部分内容即可,相对于以前后台处理并且重载的方式,大大缩短了用户的等待时间。
场景3.自动更新页面
在web应用中有很多数据的变化时十分迅速的,例如最新的热点新闻,天气预报以及聊天室内容等。在Ajax出现之前,用户为了即使了解相应的内容必须不断刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能(大多数聊天室页面就是这样做的)。有可能会发生这种情况;有一段时间网页的内容没有发生任何变化,但是用户并不知道,仍然不断的刷新页面;或者用户失去了耐心,放弃了刷新页面,却很有可能在此有新的消息出现,这样就错过了第一时间得到消息的机会。
应用Ajax可以改善这种这种情况,页面加载以后,会通过Ajax引擎在后台进行定时的轮询,向服务器发送请求,查看是否有最新的消息。如果有则将新的数据(而不是所有数据)下载并且在页面上进行动态的更新,通过一定的方式通知用户(实现这样的功能正是JavaScript的强项)。这样即避免了用户不断手工刷新页面的不便,也不会因为重复刷新页面造成资源浪费。