ajax json datagrid,利用AJAX_JSON实现DataGrid

利用ZigBee构建无线传感器网络

本栏目责任编辑：谢媛媛

开发研究与设计技术

利用AJAX+JSON实现DataGrid

薛胜军，毛志勇

(武汉理工大学计算机科学与技术学院湖北武汉４３００６３)

后台数据模型、摘要：本文结合在实际项目中开发的一个ＡＪＡＸＤａｔａＧｒｉｄ，讨论了利用ＡＪＡＸ＋ＪＳＯＮ来实现ＤａｔａＧｒｉｄ的原理、ＪＳＯＮ

字符串的组装解析和客户端表格行数据替换策略以及相应的克隆节点策略。在实际项目应用中表明：它极大地提高了开发效率和用户体验。

关键词：ＡＪＡＸ；ＪＳＯＮ；ＪＳＰ；自定义标签；ＤａｔａＧｒｉｄ中图分类号：ＴＰ３９１文献标识码：Ａ文章编号：１００９－３０４４(２００７)０１－１０１６１－０２

ＵｓｅＡＪＡＸ＋ＪＳＯＮｔｏＩｍｐｌｅｍｅｎｔＤａｔａＧｒｉｄ

ＸＵＥＳｈｅｎｇ－ｊｕｎＭＡＯＺｈｉ－ｙｏｎｇ

(ｃｏｌｌｅｇｅｏｆｃｏｍｐｕｔｅｒｓｃｉｅｎｃｅ，Ｗｕｈａｎｕｎｉｖｅｒｓｉｔｙｏｆｔｅｃｈｎｏｌｏｇｙ，Ｗｕｈａｎ４３００６３，Ｃｈｉｎａ)

Ａｂｓｔｒａｃｔ：Ｉｎｔｈｅｐａｐｅｒ，ｔｏａｓｓｏｃｉａｔｅｗｉｔｈｔｈｅＡＪＡＸＤａｔａＧｒｉｄｉｎｔｈｅａｃｔｕａｌｄｅｖｅｌｏｐｍｅｎｔｏｆａｐｒｏｊｅｃｔ，ｄｉｓｃｕｓｓｅｄｐｒｉｎｃｉｐｌｅｏｆｕｓｉｎｇＡＪＡＸ＋ＪＳＯＮｔｏｉｍｐｌｅｍｅｎｔＤａｔａＧｒｉｄ，ｂａｃｋｇｒｏｕｎｄｄａｔａｍｏｄｅｌ，ｔｈｅＪＳＯＮｓｔｒｉｎｇｃｏｍｂｉｎａｔｉｏｎａｎｄｐａｒｓｉｎｇｓｔｒａｔｅｇｙ，ｃｌｉｅｎｔｔａｂｌｅｒｏｗｄａｔａｒｅｐｌａｃｅｍｅｎｔｓｔｒａｔｅｇｙａｎｄｔｈｅｃｏｒｒｅｓｐｏｎｄｉｎｇｃｌｏｎｉｎｇｎｏｄｅｓｔｒａｔｅｇｙ．Ｉｎｔｈｅｐｒａｃｔｉｃａｌｐｒｏｊｅｃｔｉｔｉｓｓｈｏｗｎｔｈａｔ：ＴｈｅＤａｔａＧｒｉｄＪＳＰＴａｇｉｍｐｒｏｖｅｄｏｕｒｄｅｖｅｌｏｐｍｅｎｔｅｆｆｉｃｉｅｎｃｙａｎｄｕｓｅｒｅｘｐｅｒｉｅｎｃｅｇｒｅａｔｌｙ．

Ｋｅｙｗｏｒｄｓ：ＡＪＡＸ；ＪＳＯＮ；ＪＳＰ；Ｃｕｓｔｏｍ－Ｔａｇ；

ＤａｔａＧｒｉｄ

１概述

在现在的企业应用中，大量需要显示表数据，在Ｊ２ＥＥ中，大部分情况下，很多的开发人员普遍采用迭代或遍历的办法显示数据，再根据需要显示发那也信息，而用过ＡＳＰ．Ｎｅｔ的人肯定对它的ＤａｔａＧｒｉｄ组件印象很深刻，它不但能显示数据集和数据表数据而且还提供分页功能，但是在ＪＡＶＡ里面却没有类似的ＤａｔａＧｒｉｄ组件可以复用，而在我们实际的项目中却大量需要用到它，为此我们在项目中利用ＪＳＯＮ＋ＡＪＡＸ自己开发出了一个ＤａｔａＧｒｉｄＪＳＰ标签组件，它具有以下特性：

按钮或者图片，设置ｐａｇｅＳｉｚｅ＝０(１)分页方式可采取超级链接、

不显示分页；

(２)设置ｏｐｔｉｏｎＴｙｐｅ属性可以在第一列自动添加ＣｈｅｃｋＢｏｘ或者Ｒａｄｉｏ或不加；

(３)支持日期格式化以及奇数行和偶数行不同的风格；

(４)采用ＡＪＡＸ＋ＪＳＯＮ实现第一次之后数据的读取，大大提高了效率；

(５)采取类似ＪＳＦＤａｔａＭｏｄｅｌ数据模型，可扩展性强；(６)支持ＡＪＡＸ模式和非ＡＪＡＸ模式以及默认风格设置；(７)支持绝大部分表格属性的设置，支持ＩＥ和Ｆｉｒｅｆｏｘ。

其效果图如图１所示(为了减小图片占用幅面，故使用简单表结构和较少的行)：

ｎｅｘｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｎｅｘｔ．ｇｉｆ＂ｐｒｅｖＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｐｒｅｖ．ｇｉｆ＂＞

＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＮｏ＂ｔｉｔｌｅ＝＂数据编号＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂

ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇１００ｐｘ＇／＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＮａｍｅ＂ｔｉｔｌｅ＝＂数据名称＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂

ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇１７０ｐｘ＇ｌｉｎｋ＝＂ＤａｔａＬｉｎｋ＂／＞

＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＴｉｍｅ＂ｔｉｔｌｅ＝＂时间＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎ－ｔｅｒ＂

ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇２００ｐｘ＇ｄａｔｅＦｏｒｍａｔ＝＂ｙｙｙｙ－ＭＭ－ｄｄＨＨ：ｍｍ＂／＞

＜／ｄａｔａ：ｄａｔａｇｒｉｄ＞

２ＡＪＡＸ及ＪＳＯＮ简介

２．１ＡＪＡＸ

ＡＪＡＸ用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ａｊａｘ之前，Ｗｅｂ站点强制用户进入提交／等待／重新显示范例，用户的动作总是与服务器的同步。“思考时间”Ａｊａｘ提供与服务器异步通信的能力，从而使用户从请求／响应的循环中解脱出来。借助于Ａｊａｘ，可以在用户单击按钮时，使用ＪａｖａＳｃｒｉｐｔ和ＤＨＴＭＬ立即更新ＵＩ，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用ＪａｖａＳｃｒｉｐｔ和ＣＳＳ来相应地更新ＵＩ，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Ｗｅｂ站点看起来是即时响应的。

Ａｊａｘ不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成，是ＡｓｙｎｃｈｒｏｎｏｕｓＪａｖａＳｃｒｉｐｔ＋ＸＭＬ的缩写，

它包含以下四种技术：

(１)基于ＸＨＴＭＬ和ＣＳＳ标准的表示；

(２)使用ＤｏｃｕｍｅｎｔＯｂｊｅｃｔＭｏｄｅｌ进行动态显示和交互；(３)使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ与服务器进行异步通信；(４)使用ＪａｖａＳｃｒｉｐｔ绑定一切。

在本组件中，我们用到了ｐｒｏｔｏｔｙｐｅＡＪＡＸＪａｖａＳｃｒｉｐｔ脚本库，ｐｒｏｔｏｔｙｐｅ是一个开源的ＪａｖａＳｃｒｉｐｔ开发框架，里面封装了大量可以加快开发速度的方法，包括ＡＪＡＸ、ＤＯＭ、ａｒｒａｙ、ｓｔｒｉｎｇ、ｆｏｒｍ等，例如使用￥(＇ｄｉｖ＇)代替ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ(＂ｄｉｖ＂)。许多语言的开发框架如ＲｕｂｙｏｎＲａｉｌｓ，ＰＨＰ都集成Ｐｒｏｔｏｔｙｐｅ，利用它来操作ＪａｖａＳｃｒｉｐｔ将会大大节省开发时间，提高开发效率。

图１采用ＣｈｅｃｋＢｏｘ和图片分页效果

上面的效果图对应ＪＳＰ标签代码为：

＜ｄａｔａ：ｄａｔａｇｒｉｄｄａｔａＳｏｕｒｃｅ＝＂ｄａｔａ＂ｉｄ＝＂ｄｉｃｔ＂ｂｏｒｄｅｒ＝＂０＂ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｄｅｆａｕｌｔＲｏｗＳｔｙｌｅ＝＇ｔｒｕｅ＇ｐａｇｅＳｉｚｅ＝＇６＇ｃｓｓＣｌａｓｓ＝＇ｔａｂｌｅ０＇ｐａｇｅｒＳｔｙｌｅ＝＇２＇ｗｉｄｔｈ＝＇５００ｐｘ＇ｏｐｔｉｏｎＴｙｐｅ＝＇１＇ｏｐｔｉｏｎＢｉｎｄ＝＇ＤａｔａＮｏ＇ｈｅａｄＳｔｙｌｅ＝＂ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；ｈｅｉｇｈｔ：２０ｐｘ；＂

ｃｅｌｌＳｐａｃｉｎｇ＝＂１＂ｃｅｌｌＰａｄｄｉｎｇ＝＂１＂ａｊａｘ＝＇ｔｒｕｅ＇

ｆｉｒｓｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｆｉｒｓｔ．ｇｉｆ＂ｌａｓｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｌａｓｔ．ｇｉｆ＂

收稿日期：２００６－１１－１３

作者简介：薛胜军(１９５６－)，男，教授，博士生导师，研究方向：计算机支持的协同工作(ＣＳＣＷ)，人工智能与故障诊断，计算机网络技术；毛志勇(１９７８－)，男，硕士研究生，系统分析师，研究方向：软件工程、软件体系架构。

１６１