一種基于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