Ajax 的考察报告

 

1        摘要

1.1              简介      

1.2              用AJAX改进设计

       AJAX虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以用，主要应用在交互较多、频繁读数据、数据分类良好的Web应用中

       例如：

      AJAX处理级联菜单时，在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……（用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量）

1.3              使用Ajax存在的问题

       AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的，

用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新

       AJAX 技术本身成熟，但 AJAX 框架却是十分的不成熟

       此外目前公布出来的所谓的那些 AJAX 框架大多都是实现一个 Form 或者一部分页面的无刷新取数，根本谈不上什么 Web 框架，目前没必要抱太大的希望

1.4             Ajax的主要用途

1内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

2减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

3无刷新更新页面，减少用户心理和实际的等待时间

4进一步促进页面呈现和数据的分离

5以前 级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript 来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题 , 如果在此案中应用 Ajax 后，结果就会有所改观

例如:

1)      当提交回复评论以后，浏览器会暂时停顿一下，然后在无刷新的情况下把我提交的评论显示出来

2)      广告和图片的间隔时间内的切换.

3)      鼠标放上去后,弹出详细信息

参考 :my.msn.com

1)      登陆

2)      添加,删除,修改,最大/小化,

3)      广告+图片的back/next不需要刷新

4)      下级菜单的弹出

参考 : http://www.movivi.com/action/leitai/#

http://www.movivi.com/action/leitai/class.php?classid=0|1|2&uid=202738&aid=1

1)           分页

2)           视频的”下一个”按钮

3)           上层导航的刷新

1.5              个人建议采用ajax实现的地方

1)      分页http://www.movivi.com/action/leitai/

2)      导航条http://www.movivi.com/action/leitai/class.php?classid=0|1|2&uid=202738&aid=1

3)      注册

4)      登陆

5)      弹出框,采用ajax,例如加入小组, 参考 : http://www.6rooms.com/watch/34401.html

6)      评论回复http://www.6rooms.com/watch.php?v=1955

7)      有的数据内容小的页面跳转,参考: http://www.6rooms.com/profile/?u=36340中的查看所有

1.6             框架比较

参考:

http://www.myhaha.net/?p=51

 

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

 

DWR 这个字眼出现的频率较高，在网上搜索了一下，查到 DWR 全称是 Direct Web Remoting ，代表着可以直接从 JavaScript 远程调用 Java 方法。使用 DWR 需要一些额外的配置，如编辑 Web 应用的描述文件，编辑 DWR 的配置文件，来指定可以远程创建和调用的类，从这种方式可以看出其中存在一些安全隐患，但是，由于 DWR 支持常用的 Struts/WebWork/Tapestry Web 框架，在 Apache 协议下发布，加上丰富的文档资料，使得 DWR 在 Java 领域非常流行

 

 

B uffalo1.1 Buffalo( 国产)是国内的Michael写的, 版本重要的功能主要集中于远程调用与 Java 对象 /JavaScript 对象之间的双向序列化，这个特性已经被众多的应用久经考验，被认为是健壮的

Buffalo解析大数据量可能会比较慢, 然而可以适用于多种服务器端和客户端，并且burlap协议的完整性和支持的数据类型更加丰富, Buffalo基于prototype，如果你的AJAX应用也是基于prototype，那么可以减少重复加载prototype的带宽，并且获得相当一致的编程概念

 

qooxdoo是一个功能很强的JS组件库，完全模仿Windows操作系统的GUI组件。特点是不通过常规的HTML来构造页面，完全使用JS以类似VB/Delphi风格的编程方式构造Web GUI界面，比较适合内网面向C/S风格的web应用，，而不适合面向Internet的界面多变风格的应用, qooxdoo缺点是JS文件体积过大，超过200KB，初次下载会比较慢，而且并不适合Internet消费类网站。

 

dojo是一个各个方面相当完善的JS库, dojo的API模仿Java类库的组织方式, 发展时间也比较长，缺点是文件体积也比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用, 特别是和prototype相比，更加显得难用

 

YUL是Yahoo新近发布的AJAX组件库，也是一个包含了各个方面，从工具类库到通讯，到UI组件的综合性JS库。YUL的优势在于文档非常齐全，而且有Yahoo的支持，缺点是库目前还是不是很全，功能也不强大。

 

 

2       Ajax技术简介

2.1              Ajax流程图

事件

响应处理

XMLHttpRequest

数据库

Javabean （ Model）

（控制器） Servlet

客户端（view）

服务器端（server）

http 请求

Xml 数据

2.2              简单ajax框架设计

   

 

 

 

 

 

ServerServlet.java             javaModule

AJAX 事件，例如：onlick=function(){    1 createXMLHttpRequest();      2 形成url发送的参数字符串    3 xmlreq.open();    4 制定激活函数    5 xmlreq.send(); }

文件（重复性代码） 1注册XMLHttpRequest函数  createXMLHttpRequest() 2自动清除Dom函数

Javabean数据库的句柄

CF 的 LoadList() 形成数据 HashMap Out.println(data.xml)

Web.xml

Readxml 函数 ( 读取 data.xml)   创建新的DOM函数 createRow();

 

 

 

2.3              用过Buffalo框架的项目

    链接： http://www.bigdao.com

为什么问题采用 buffalo: 需要使用 Ajax 技术增强用户界面的易用性，以及提高针对未来可能的大负载访问量的承受能力

用在哪个方面： Web pages 上全面采用 Buffalo, 后台的服务接口全面采用 Buffalo 提供的 Service 方式

效果：参见网站功能。

其他：目前还仅仅用最初的 1.1dr 未来可能会过渡到 1.2 但是因为网站已经基本上线，所以这个升级可能会很慎重。