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
但是因为网站已经基本上线,所以这个升级可能会很慎重。