一种基于Tapestry的异步交互技术的设计与实现*

甘肖建　汪海涛　姜　瑛　陈　星

(昆明理工大学　昆明　650000)



一种基于Tapestry的异步交互技术的设计与实现*

甘肖建汪海涛姜瑛陈星

(昆明理工大学昆明650000)

摘要为了解决云南电信行业的某业务办理系统中所存在的,业务数据交互需求量日益增大,且系统支撑能力逐渐降低的问题,针对Java开源框架Tapestry进行了研究。利用了Tapestry面向组件开发的技术特点,实现了对某一模块进行统一数据更新,有效降低数据的整体交互量,提高了系统的业务办理效率。论文介绍了此方法实现的关键技术与设计思路,并通过实验对方法进行了详细的验证分析。最终结果表明,该方法实现了高效率的数据交互,提升了业务办理系统的用户体验。

关键词Java; Tapestry; 面向组件; 数据交互; Ajax

Class NumberTP311.5

1引言

如今,遵循软件工程高内聚、低耦合的软件开发特点,COP(面向组件编程)的编程思想变得越来越盛行,而Tapestry框架也因为其优秀的COP思想,在实际应用中得到了越来越广泛的应用,特别是在金融或电信行业等需要进行复杂且繁多的业务办理的系统当中,而这些行业的业务办理系统对开发效率及用户体验都有较高要求,因此良好的数据交互方式对其显得尤为重要。

文献[1]提到利用组件编程去实现普通Ajax交互的方式,但未就具体实现进行探讨。本文提出的解决方案,在总结前人思路的基础上,利用面向组件编程的特点,对常规的数据交互方式进行了改进,实现了对视图中某一模块数据的统一刷新,这样的刷新不需要在业务逻辑代码中添加任何前端标签或格式代码,后台业务只用关心如何实现对数据的处理,页面模块的刷新工作则由相应组件来完成。具有一次编程多处适用及高稳定性等优点。

2相关技术

2.1Tapestry框架简介

Tapestry框架是基于Java实现的一套Web应用框架,其实现于标准的Java servlet API,可工作于servlet容器或服务器当中,采用了组件开发的概念,将系统的开发分为针对各个组件的开发[1]。在应用系统中通过规范的URL结构进行调度,负责请求数据的转发与页面的表现。

2.2Tapestry工作流程

在Tapestry框架当中,每一个客户端请求所使用的都是同一个Servlet,既ApplicationServlet[2]。此Servlet不同于传统的用于集中处理用户请求的Servlet,而只是Servlet-API同Tapestry框架服务之间的一个门户(引用),当用户请求到来时,此Servlet首先将获取的Request数据存入RequestContext中,然后HttpSession中去寻引擎对象AbstractEngine,如果在session中没有找到此Engine,则将新建一个引擎对象,交由HttpSession进行持久化的管理,引擎对象的生命周期同HttpSession的生命周期相同。

图1　流程图

引擎对象是用于处理用户请求并调用相应service进行服务分发。引擎对象根据ApplicationServlet解析得到对应请求的Service名称来选择不同的Service,然后再通过Service组件调用相应的业务类进行事务或逻辑处理。在Service组件被触发后,将调用RequestCycle对象去触发请求处理的页面类进行相应事务处理,页面类处理完事务后将由AbstractEngine对象把数据返回给客户端进行显示。其具体实现流程图如图1所示。

2.3Ajax

Ajax(Asynchronous JavaScript And Xml)技术,既异步JavaScript和XML,是一种构建交互式Web网页的编程模式或思想[3],其通过结合了JavaScript与XML两大web开发技术,实现了客户端同浏览器间少量的数据交互,能够在不刷新整个网页的情况下更新网页数据,实现网页的异步更新操作。

此项技术的核心是通过JavaScript的XmlHttpRequest对象,实现对后台的请求,及通过JavaScript的dom对象实现对后台返回数据的解析。

3系统设计与实现

3.1系统设计

结合上述对Ajax技术的分析可知,想要在任何Web应用系统中实现Ajax交互,关键步骤都是在于如何实现对请求的处理。而经过上述对Tapestry框架基本工作流程的分析可知,要在Tapestry框架中实现Ajax的关键就在于处理请求的service的设计。综上所述,将系统的实现分为如下几个步骤:

步骤1数据交互方案设计;

步骤2服务于Ajax的Service服务组件AjaxDirectService的设计;

步骤3客户端程序设计。

3.2数据交互的设计与实现

在Ajax交互过程中,客户端发送http请求,请求服务器响应,服务端响应客户端,所发送的数据是Xml格式。为了能够更好地适应多种情况下的数据交互,在本次研究中,采用将JSON格式数据及HTML格式数据作为XML节点值的方式进行数据传输。其中JSON格式的数据能够满足于页面文本数据的异步刷新,HTML格式数据可用于刷新某一模块中所有的HTML数据,本文中指某一div中的所有数据。传输的数据的格式如下所示。

〈parts〉

〈JSONDATA〉

//此处用于存放json格式数据

〈/JSONDATA〉

〈part〉

//此处用于存放html格式数据

〈/part 〉

〈/parts〉

本文针对以上两种传输数据的不同,分别做了不同设计。

3.2.1JSON数据交互的设计与实现

为了能够在任何业务类中都可将Json数据返回给AjaxDirectService进行格式封装,本文设计了一个Bean用于存储程序调用业务类处理完业务后返回给AjaxDirectService的JSON数据。此Bean结构简单,仅有一个String属性,及对应此属性的get与set方法。set方法用于业务类将数据存储于Bean的属性中,AjaxDirectService通过调用bean的get方法获取属性值。

3.2.2HTML中DIV模块数据交互的设计与实现

在利用Ajax来对某一模块数据进行刷新时,都是通过Ajax请求后台并获得返回数据后,再利用js去获取需要更新值的HTML元素对象并赋予相应的值,这样的方式也正是本文介绍的针对JSON格式的数据处理的方式,虽然也能完成异步更新操作,但当需要更新值的数量较大且无法使用循环赋值时,便需要在前端写大量的JS代码来对需要修改的HTML元素对象进行一一赋值,因而效率十分低下。

针对上述问题,本文设计了这第二种数据交互方式。此种方式利用了Tapestry面向组件编程的思想,设计了一个名称为Part的组件,用于获取需要返回客户端的HTML数据。当在客户端提交了Ajax请求时,只需将请求刷新那个DIV模块的ID传至服务器即可。在AjaxDirectService获取到请求信息中的ID后,便激活页面类进行相应业务处理,之后再调用AbstractEngine的render方法触发组件Part工作,以获取最新的HTML数据流,最终将此数据流插入到xml节点的〈part〉与〈/part〉之间。

3.3AjaxDirectService的设计实现

首先,通过上面对Tapestry框架对请求的处理过程的分析可知,系统对用户请求的处理,是根据引擎对象获取请求中的Service名称来查找相应的Service进行请求处理。

其次,由于Tapestry框架自定义的各个Service均是针对于特定情况实现的,并且这些组件返回数据到客户端的时候都将会对整个页面进行重新载入。因此Tapestry框架自带的service都不适用于本文想要实现的Ajax交互的情况。AjaxDirectService需完成如下几点工作:

1) 调用页面类进行业务处理;

2) 获取需要返回到客户端的JSON数据;

3) 通过Part组件获取对应模块ID渲染后的DIV模块数据;

4) 将JSON数据及DIV模块数据存放于统一格式的XML中;

5) 返回XML数据到客户端。

结合框架工作原理,可得AjaxDirectService的工作序列图如图2所示。

图2　AjaxDirectService序列图

在完成上述功能的过程中,将客户端所传递到服务器的需要刷新模块的ID存放于AjaxDirectService的变量当中,而模块更新后所需返回的最新DIV模块数据则同样存放于AjaxDirectService的变量当中,且由于AjaxDirectService是一个会被多线程共同调用的类,因此需要对这两个数据都进行多线程隔离,以方便在各自线程中获取对应的数据流,本文所实现的线程隔离的部分代码如图4所示,其中currentPartIds用于存放模块ID,currentPartWriters用于存放对应于各个ID模块的最新的HTML数据。

private static ThreadLocal currentPartIds

= new ThreadLocal();//保存模块ID

private static ThreadLocal currentPartWriters

= new ThreadLocal();//保存渲染后的对应模块ID的HTML格式数据

通过对Tapestry工作流程的分析、交互数据模型的设计及AjaxDirectService的具体功能的分析后可知,AjaxDirectService的设计与实现是实现整个Ajax交互的核心,前端的请求及最终数据的整合与返回都是在AjaxDirectService中完成。

3.4前端程序的设计与实现

在本次设计中,前端的Ajax请求采用js框架JQuery来实现。通过在页面的〈head〉〈/head〉标签中引入JQuery库文件即实现了JQuery的功能的支持。之后在请求方法中添加相应的请求链接及数据即可。

前端包括有请求的提交与响应的处理。提交部分采用JQuery对传输的数据进行JSON数据封装,并采用封装的请求方法进行提交。

由于响应的数据是封装在XML格式数据中的,因此在前端采用JS设计了一个用于处理XML返回数据的方法。

此方法首先根据数据的封装格式去判断XML数据节点中的字符串是存的JSON数据还是HTML数据。倘若为JSON数据,则将其转换为JSON格式数据,并存放于一个变量中,待回调函数处理,回调函数的处理则是获取相应的字符串值并赋值给相应的显示域。倘若为HTML格式的数据,则先获取相应的DIV的ID,再获取其中的数据,然后直接利用JS的插入HTML数据函数将此数据更新到页面对应的DIV模块。通过上述步骤,将最终实现刷新数据的展示。

4实验与分析

4.1实验简介

本次实验采用IE9浏览器作为客户终端,Mysql作为后台数据库,Tomcat6.0.4服务器作为servlet容器用于部署服务端系统。实验前准备还包括客户端代码及服务器端代码的编写。实验主要对JSON数据及HTML中的某个DIV模块数据的传输进行了测试,包括单独传输及混合传输及前台数据处理等方面。

4.2实验过程

实验过程是按顺序进行如下三个测试点:JSON数据的传输,HTML模块数据的传输,JSON与HTML数据混合传输。

4.2.1JSON数据的传输

通过点击如下界面中的获取JSON数据按钮,即可获取JSON数据。利用IE浏览器的开发者工具可获取后端返回的数据。然后利用JS对此JSON数据进行处理。通过IE的开发者工具查看相应源码,可知数据处理成功。如图5所示。

〈parts〉

〈JSONDATA id="dataset"〉

〈![CDATA][{"ONE":"JSON","TWO":"JSON-DATA"}]]]〉

〈/JSONDATA〉

〈/parts〉

4.2.2HTML的DIV模块数据的传输

通过点击如下界面中的获取HTML数据按钮,即可获取HTML数据。利用IE浏览器的开发者工具可获取后端返回的数据,在XML节点中的即为返回数据。如图6所示。混合数据传输的实验结果如图7所示。

〈parts〉

〈part id="div_one"〉

〈input value="HTML" type="text" name="body"〉

〈/input〉

〈input value="我是HTML数据"

type="text"

name="subject"〉

〈/input〉

〈/part〉

〈JSONDATA id="dataset"〉

〈![CDATA[]]〉

〈/JSONDATA〉

〈/parts〉

〈parts〉

〈part id="div_one"〉

〈input value="HTML" type="text"

name="body"〉〈/input〉

〈input

value="我是HTML数据"

type="text"

name="subject"〉〈/input〉

〈/part〉

〈JSONDATA id="dataset"〉

〈![CDATA[[{"ONE":"JSON","TWO":"JSON-DATA"}]]]

〉

〈/JSONDATA〉

〈/parts〉

不论是JSON格式数据,还是某个DIV模块的HTML数据,只要通过客户端加载的上述JS进行相应的处理后,便可迅速地将数据的更新效果展现在客户端。

4.3结果分析

通过实验发现本文提出方案完全可行。即在Tapestry框架的应用系统当中利用一个service服务于Ajax请求的数据交互方案是可行的。相比通常所用的Ajax交互方案而言,本方案利用了Tapestry面向组件编程的特点,通过实现对组件模块的数据流获取,成功实现了对某一模块的HTML中的DIV模块数据进行刷新的操作,同时结合JQuery集成框架的技术特性,良好地解决了实际应用中的模块刷新问题。由于能够实现对某个DIV进行刷新且不需要返回整个页面的数据,也就降低了对网络流量的依赖,且集成式的模块数据处理能够有效地提高系统的开发及维护效率。通过将此方案运用于最新的业务办理系统中后,实际情况也是有效地降低了系统运营成本,提高了开发效率,提高了系统运行效率,同时更提升用户使用系统的实际体验。

5结语

本方案虽然降低了客户端与服务器的交互数据量,但是在在后台进行数据刷新的时候,依然是对整个页面进行的刷新操作,即视图刷新的部分依然是在对整个页面进行渲染,而非对特定刷新模块进行局部刷新,因此这对系统的执行效率依然有一定不良影响。但整体而言,此方案从实质上减少了客户端同服务器交互的数据交互量。若将此方案的思路运用于其他可行的javaEE系统的交互中,也将能够有效提高系统效率。总之,此方案虽有瑕疵,但依然十分具有实用价值。

参 考 文 献

[1] Ka Iok Tong. Enjoying Web Development with Tapestry[D]. 2005:200-207.

[2] Mr Lewis M Ship. Tapestry in Action[D]. Greanwich: Manning Publications,2004:169-170.

[3] 高鹏,徐小力,吴国新,等.基于Ajax的四层架构远程监测系统设计[J].计算机工程与设计,2014,35(2):695-699.

GAO Peng, XU Xiaoli, WU Guoxin, et al. Based on Ajax four layer architecture for remote monitoring system design[J]. Computer Engineering & Design,2014,35(2):695-699.

[4] 赵永屹,宿红毅,胡韶辉.基于AJAX与J2EE的新型Web应用的设计与实现[J].计算机工程与设计,2007,28(1):189-193.

ZHAO Yongyi, SU Hongyi, HU Shaohui. Based on Ajax and J2EE model of web application design and implementation[J]. Computer Engineering & Design,2007,28(1):189-193.

[5] 李张永,陈和平,顾进广.跨平台移动Web开发框架与数据交互方法[J].计算机工程与设计,2014,,35(5):1827-2832.

LI Zhangyong, CHEN Heping, GU Jinguang. Cross mobile platform web development framework and data interaction method[J]. Computer Engineering & Design,2014,35(5):1827-2832.

[6] 张永军,刘雪松.基于Tapestry5的高校教师档案管理系统实现[J].软件导刊,2010,9(4):61-62.

ZHANG Yongjun, LIU Xuesong. The college teachers file management system Tapestry5 implementation of[J]. Software Guide,2010,9(4):61-62.

[7] 刘能现,俞建家.基于Tapestry+Spring+Ibatis框架的Web应用开发[J].计算机技术与发展,2008,18(12):174-177.

LIU Nengxian, YU Jianjia. + Spring + Ibatis + Web framework based on Tapestry application development[J]. Computer Technology and Development,2008,18 (12):174-177.

[8] 龚雪冰,何彪.基于Tapestry+Spring+Hibernate框架的Web应用[J].计算机技术与发展,2007,17(4):131-135.

GONG Xuebing, HE Biao. Based on tapestry + Spring + Hibernate framework of web application[J]. Computer Technology and Development,2007,17(4):131-135.

[9] 唐永瑞,张达敏.基于Ajax与MVC模式的信息系统的研究与设计[J].电子技术应用,2014,40(2):128-140.

TANG Yongrui, ZHANG Damin. Research and design of information system based on Ajax and MVC mode[J]. Application of Electronic Technique,2014,40(2):128-140.

[10] 吕林涛,万经华,周红芳.基于AJAX的Web无刷新页面快速更新数据方法[J].计算机应用研究,2006,11:199-233.

LV Lintao, WAN Jinghua, ZHOU Hongfang. Web based AJAX no refresh page fast update data method[J]. Application Research of Computers,2006,11:199-233.

[11] http://tapestry.apache.org/[OL].

Design and Implementation of Asynchronous Interactive Technology Based on Tapestry

GAN XiaojianWANG HaitaoJIANG YingCHEN Xing

(Kunming University of Science and Technology, Kunming650000)

AbstractIn order to solve the problem that the business data exchange demand is increasing and the system support ability is gradually reduced in order to solve the problem of the business processing system in Yunnan telecom industry, this paper studies the Java open source framework Tapestry. Using the technology characteristic of Tapestry for component development, the unified data update of a module is realized, and the whole interaction of data is reduced, and the efficiency of the system is improved. This paper introduces the key technology and design idea of this method, and the method is verified by experiments. The final result shows that the method can realize the high efficiency of data exchange and improve the user experience of the business management system.

Key WordsJava, Tapestry, component oriented, data interaction, Ajax

* 收稿日期:2015年11月3日,修回日期:2015年12月24日

基金项目:国家自然科学基金(编号:61462049)资助。

作者简介:甘肖建,男,硕士研究生,研究方向:软件工程。汪海涛,女,硕士,副教授,硕士生导师,研究方向:软件工程。姜瑛,女,博士,教授,硕士生导师,研究方向:软件工程。陈星,男,硕士,讲师,研究方向:软件工程。

中图分类号TP311.5

DOI:10.3969/j.issn.1672-9722.2016.05.020