利用ZigBee构建无线传感器网络
本栏目责任编辑:谢媛媛
开发研究与设计技术
利用AJAX+JSON实现DataGrid
薛胜军,毛志勇
(武汉理工大学计算机科学与技术学院湖北武汉430063)
后台数据模型、摘要:本文结合在实际项目中开发的一个AJAXDataGrid,讨论了利用AJAX+JSON来实现DataGrid的原理、JSON
字符串的组装解析和客户端表格行数据替换策略以及相应的克隆节点策略。在实际项目应用中表明:它极大地提高了开发效率和用户体验。
关键词:AJAX;JSON;JSP;自定义标签;DataGrid中图分类号:TP391文献标识码:A文章编号:1009-3044(2007)01-10161-02
UseAJAX+JSONtoImplementDataGrid
XUESheng-junMAOZhi-yong
(collegeofcomputerscience,Wuhanuniversityoftechnology,Wuhan430063,China)
Abstract:Inthepaper,toassociatewiththeAJAXDataGridintheactualdevelopmentofaproject,discussedprincipleofusingAJAX+JSONtoimplementDataGrid,backgrounddatamodel,theJSONstringcombinationandparsingstrategy,clienttablerowdatareplacementstrategyandthecorrespondingcloningnodestrategy.Inthepracticalprojectitisshownthat:TheDataGridJSPTagimprovedourdevelopmentefficiencyanduserexperiencegreatly.
Keywords:AJAX;JSON;JSP;Custom-Tag;
DataGrid
1概述
在现在的企业应用中,大量需要显示表数据,在J2EE中,大部分情况下,很多的开发人员普遍采用迭代或遍历的办法显示数据,再根据需要显示发那也信息,而用过ASP.Net的人肯定对它的DataGrid组件印象很深刻,它不但能显示数据集和数据表数据而且还提供分页功能,但是在JAVA里面却没有类似的DataGrid组件可以复用,而在我们实际的项目中却大量需要用到它,为此我们在项目中利用JSON+AJAX自己开发出了一个DataGridJSP标签组件,它具有以下特性:
按钮或者图片,设置pageSize=0(1)分页方式可采取超级链接、
不显示分页;
(2)设置optionType属性可以在第一列自动添加CheckBox或者Radio或不加;
(3)支持日期格式化以及奇数行和偶数行不同的风格;
(4)采用AJAX+JSON实现第一次之后数据的读取,大大提高了效率;
(5)采取类似JSFDataModel数据模型,可扩展性强;(6)支持AJAX模式和非AJAX模式以及默认风格设置;(7)支持绝大部分表格属性的设置,支持IE和Firefox。
其效果图如图1所示(为了减小图片占用幅面,故使用简单表结构和较少的行):
nextImage="images/arrow-next.gif"prevImage="images/arrow-prev.gif">
<data:columnname="DataNo"title="数据编号"headAlign="center"
rowAlign="center"width='100px'/><data:columnname="DataName"title="数据名称"headAlign="center"
rowAlign="center"width='170px'link="DataLink"/>
<data:columnname="DataTime"title="时间"headAlign="cen-ter"
rowAlign="center"width='200px'dateFormat="yyyy-MM-ddHH:mm"/>
</data:datagrid>
2AJAX及JSON简介
2.1AJAX
AJAX用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的同步。“思考时间”Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。
Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成,是AsynchronousJavaScript+XML的缩写,
它包含以下四种技术:
(1)基于XHTML和CSS标准的表示;
(2)使用DocumentObjectModel进行动态显示和交互;(3)使用XMLHttpRequest与服务器进行异步通信;(4)使用JavaScript绑定一切。
在本组件中,我们用到了prototypeAJAXJavaScript脚本库,prototype是一个开源的JavaScript开发框架,里面封装了大量可以加快开发速度的方法,包括AJAX、DOM、array、string、form等,例如使用¥('div')代替getElementById("div")。许多语言的开发框架如RubyonRails,PHP都集成Prototype,利用它来操作JavaScript将会大大节省开发时间,提高开发效率。
图1采用CheckBox和图片分页效果
上面的效果图对应JSP标签代码为:
<data:datagriddataSource="data"id="dict"border="0"align="center"defaultRowStyle='true'pageSize='6'cssClass='table0'pagerStyle='2'width='500px'optionType='1'optionBind='DataNo'headStyle="background-color:#EEEEEE;height:20px;"
cellSpacing="1"cellPadding="1"ajax='true'
firstImage="images/arrow-first.gif"lastImage="images/arrow-last.gif"
收稿日期:2006-11-13
作者简介:薛胜军(1956-),男,教授,博士生导师,研究方向:计算机支持的协同工作(CSCW),人工智能与故障诊断,计算机网络技术;毛志勇(1978-),男,硕士研究生,系统分析师,研究方向:软件工程、软件体系架构。
161