【導(dǎo)讀】交互以增強(qiáng)用戶體驗(yàn)的Ajax技術(shù)。本文結(jié)合自己的開(kāi)發(fā)使用經(jīng)驗(yàn)，詳細(xì)地分析。了以上技術(shù)的工作原理、性能分析、應(yīng)用場(chǎng)景及未來(lái)的應(yīng)用前景。最后將Ajax等技術(shù)整合到J2EE平臺(tái)中，實(shí)現(xiàn)了一套安全、穩(wěn)定、可靠并具有良好地用戶體驗(yàn)的在線團(tuán)購(gòu)網(wǎng)站系統(tǒng)。從某種程度上來(lái)說(shuō)，這也彌補(bǔ)。了目前國(guó)內(nèi)的團(tuán)購(gòu)系統(tǒng)都是基于PHP實(shí)現(xiàn)的一個(gè)空白。

　　

【正文】 購(gòu)物車(chē)模塊在線支付模塊個(gè)人信息管理模塊團(tuán)品評(píng)價(jià)轉(zhuǎn)讓模塊申請(qǐng)?jiān)诒菊具M(jìn)行團(tuán)購(gòu)活動(dòng)商品信息錄入模塊商品數(shù)據(jù)信息維護(hù)模塊會(huì)員信息管理模塊 圖 系統(tǒng)功能結(jié)構(gòu)流程圖 系統(tǒng)功能分析 由圖 可知本系統(tǒng)總共可分為 12 個(gè)子模塊，現(xiàn)在分別就其功能做一下簡(jiǎn)要分析。 (1) 瀏覽團(tuán)購(gòu)信息模塊，這個(gè)模塊算是整個(gè)系統(tǒng)的基礎(chǔ)，該模塊結(jié)合了 CSS、 JavaScript、 Ajax 等 Web 技術(shù)和服務(wù)端程序?qū)λ袌F(tuán)購(gòu)信息進(jìn)行了動(dòng)態(tài)顯示。 (2) 登錄模塊，這個(gè)模塊是在瀏覽團(tuán)購(gòu)信息的用戶想?yún)F(tuán)之前所必須用到 的一個(gè)功能模塊。 21 (3) 注冊(cè)模塊，這個(gè)模塊是針對(duì)那些初次光顧本站點(diǎn)并想?yún)⑴c團(tuán)購(gòu)的網(wǎng)友所設(shè)計(jì)的。 (4) 購(gòu)物車(chē)模塊，當(dāng)用戶參與團(tuán)購(gòu)下單之后，可以對(duì)用戶的下單情況進(jìn)行跟蹤記載。 (5) 在線支付模塊，當(dāng)用戶下完訂單之后，準(zhǔn)備付款時(shí)，就得進(jìn)行在線支付。 (6) 個(gè)人信息管理模塊，在注冊(cè)過(guò)的用戶登錄了本站點(diǎn)之后，可以對(duì)自己以往下的訂單進(jìn)行瀏覽和評(píng)價(jià)。 (7) 團(tuán)品轉(zhuǎn)讓模塊，當(dāng)用戶對(duì)自己已經(jīng)團(tuán)購(gòu)到的物品在未使用之前若想進(jìn)行轉(zhuǎn)讓，可以在該模塊發(fā)布轉(zhuǎn)讓信息。 (8) 搜索團(tuán)品信息模塊，當(dāng)用戶只想瀏覽自己感興趣的相關(guān)商品時(shí)，可以進(jìn)行關(guān)鍵字搜索。 (9) 商家申請(qǐng)舉行團(tuán)購(gòu)模塊 ，當(dāng)有線下商家想在本站點(diǎn)舉行團(tuán)購(gòu)活動(dòng)時(shí)，可以在本模塊提交相應(yīng)的團(tuán)購(gòu)申請(qǐng)信息。 (10) 商品信息模塊，當(dāng)商家把團(tuán)購(gòu)商品的詳細(xì)信息提交給本站點(diǎn)后，由站點(diǎn)管理員負(fù)責(zé)進(jìn)行商品的入庫(kù)和發(fā)布。 (11) 商品信息維護(hù)模塊，系統(tǒng)管理員可以及時(shí)對(duì)各種商品的數(shù)據(jù)信息進(jìn)行更新維護(hù)。 (12) 會(huì)員信息管理模塊，系統(tǒng)管理員可以對(duì)系統(tǒng)中的注冊(cè)會(huì)員和商家的信息進(jìn)行相應(yīng)的修改維護(hù)操作。 系統(tǒng)開(kāi)發(fā)平臺(tái)的選擇 基于 J2EE 架構(gòu)的應(yīng)用程序，具有 Java 程序的基本特性：“一次編譯，到處運(yùn)行”。 SSH 架構(gòu)的產(chǎn)品在開(kāi)發(fā)和使用階段對(duì)硬件條件沒(méi)有特殊要求，以下是系統(tǒng)的開(kāi)發(fā)環(huán)境： 操作系統(tǒng)： Windows 7 數(shù)據(jù)庫(kù)： MySQL Web 服務(wù)器： Tomcat Java 編譯器： JDK 22 開(kāi)發(fā)框架： +++Ajax+JQuery 開(kāi)發(fā)工具： MyEclipse 4 WEB 系統(tǒng)架構(gòu)分析 系統(tǒng)應(yīng)用模型的技術(shù)分析 客戶端與服務(wù)器 (C/S)及瀏覽器與服務(wù)器 (B/S) 在最初設(shè)計(jì)本系統(tǒng)時(shí)，很自然會(huì)考慮所應(yīng)該使用的哪種網(wǎng)絡(luò)應(yīng)用模型?，F(xiàn)今互聯(lián)網(wǎng)中主要就有兩種模式，即 C/S 模式和 B/S 模式?，F(xiàn)對(duì)這兩種模式做一下簡(jiǎn)要對(duì)比介紹。 C/S 模式主要由客戶應(yīng)用程序 (Client)、服務(wù)器管理程序 (Server)和中間件(Middleware)三個(gè)部件組成。客戶應(yīng)用程序是系統(tǒng)中用戶與數(shù)據(jù)進(jìn)行交互的部件。服務(wù)器程序負(fù)責(zé)有效地管理系統(tǒng)資源，如管理一個(gè)信息數(shù)據(jù)庫(kù)，其主要工作是當(dāng)多個(gè)客戶并發(fā)地請(qǐng)求服務(wù)器上的相同資源時(shí)，對(duì)這些資源進(jìn)行最優(yōu)化管理。中間件負(fù)責(zé)聯(lián)結(jié)客戶應(yīng)用程序與服務(wù)器管理程序，協(xié)同完成一個(gè)作業(yè)，以滿足用戶查詢管理數(shù)據(jù)的要求。 B/S 模式是一種以 Web 技術(shù)為基礎(chǔ)的新型的 MIS 系統(tǒng)平臺(tái)模 式。把傳統(tǒng) C/S模式中的服務(wù)器部分分解為一個(gè)數(shù)據(jù)服務(wù)器與一個(gè)或多個(gè)應(yīng)用服務(wù)器 (Web 服務(wù)器 )，從而構(gòu)成一個(gè)三層結(jié)構(gòu)的客戶服務(wù)器體系。 第一層客戶機(jī)是用戶與整個(gè)系統(tǒng)的接口?？蛻舻膽?yīng)用程序精簡(jiǎn)到一個(gè)通用的瀏覽器軟件，如 Netscape Navigator，微軟公司的 IE，開(kāi)源的 Firefox 等。瀏覽器將 HTML 代碼轉(zhuǎn)化成圖文并茂的網(wǎng)頁(yè)。網(wǎng)頁(yè)還具備一定的交互功能，允許用戶在網(wǎng)頁(yè)提供的申請(qǐng)表上輸入信息提交給后臺(tái)，并提出處理請(qǐng)求。這個(gè)后臺(tái)就是第二層的 Web 服務(wù)器。 第二層 Web服務(wù)器將啟動(dòng)相應(yīng)的進(jìn)程來(lái)響應(yīng)這一請(qǐng)求，并 動(dòng)態(tài)生成一串 HTML代碼，其中嵌入處理的結(jié)果，返回給客戶機(jī)的瀏覽器。如果客戶機(jī)提交的請(qǐng)求包括數(shù)據(jù)的存取， Web 服務(wù)器還需與數(shù)據(jù)庫(kù)服務(wù)器協(xié)同完成這一處理工作。 第三層數(shù)據(jù)庫(kù)服務(wù)器的任務(wù)類(lèi)似于 C/S 模式，負(fù)責(zé)協(xié)調(diào)不同的 Web 服務(wù)器發(fā) 23 出的 SQL 請(qǐng)求，管理數(shù)據(jù)庫(kù)。 由于本系統(tǒng)是基于 Web 的架構(gòu)的電子商務(wù)軟件系統(tǒng)，所以很自然會(huì)選擇第二種 B/S 模式的網(wǎng)絡(luò)應(yīng)用模型。 當(dāng)今主流開(kāi)發(fā)模式及未來(lái)趨勢(shì)分析 基于 B/S 模型的應(yīng)用系統(tǒng)只需要管理服務(wù)器，所有的客戶端只是瀏覽器，不需要做任何的維護(hù)。無(wú)論用戶規(guī)模有多大，有 多少分支機(jī)構(gòu)都不會(huì)增加任何維護(hù)升級(jí)的工作量，所有的操作只需要針對(duì)服務(wù)器進(jìn)行。在 B/S 模型下，客戶機(jī)越來(lái)越“瘦”，而服務(wù)器越來(lái)越“胖”，軟件升級(jí)和維護(hù)會(huì)越來(lái)越容易，使用會(huì)越來(lái)越簡(jiǎn)單，這對(duì)于人力、時(shí)間、費(fèi)用等開(kāi)銷(xiāo)的節(jié)省是顯而易見(jiàn)的，也是未來(lái)信息化發(fā)展的主流方向。 但是，采用 B/S 模型的應(yīng)用系統(tǒng)也有一個(gè)非常明顯不足 應(yīng)用服務(wù)器運(yùn)行數(shù)據(jù)負(fù)荷比較重。一旦發(fā)生服務(wù)器“崩潰”等問(wèn)題，那后果不堪設(shè)想。因此，通常應(yīng)該會(huì)對(duì)服務(wù)器數(shù)據(jù)進(jìn)行同步備份，或采用分布式服務(wù)器集群來(lái)均衡負(fù)載服務(wù)器處理應(yīng)對(duì)請(qǐng)求的壓力。 另外，隨著 時(shí)代的到來(lái)， HTML CSS云存儲(chǔ)和網(wǎng)格化等技術(shù)的日趨成熟和普及，相信在不久的將來(lái) C/S 模式，甚至是操作系統(tǒng)都會(huì)漸漸被 B/S模式所取代，用戶只需打開(kāi)瀏覽器，就可以享用到所有以前只能由的桌面應(yīng)用程序所提供的功能，而免去了之前需要下載安裝大量客戶端程序并為之更新維護(hù)的苦惱。相信未來(lái)肯定是 B/S 的天下。 系統(tǒng)架構(gòu)設(shè)計(jì)的目標(biāo) 建立一個(gè)可擴(kuò)展，可維護(hù)，可移植，高效穩(wěn)定的網(wǎng)上團(tuán)購(gòu)系統(tǒng)。利用該系統(tǒng)平臺(tái)，網(wǎng)購(gòu)愛(ài)好者可以隨意選擇自己喜歡且價(jià)格優(yōu)惠的商品下單，方便快捷地進(jìn)入實(shí)體店消費(fèi)，并將消費(fèi)后的感受通 過(guò)本平臺(tái)及時(shí)地反饋給商家，達(dá)到顧客與商家互利共通的局面。而商家則可以每天根據(jù)需求及時(shí)推出各種團(tuán)購(gòu)商品。 24 系統(tǒng)架構(gòu)的總體分析與實(shí)現(xiàn) 架構(gòu)分析 根據(jù)之前架構(gòu)設(shè)計(jì)的總體目標(biāo)要求，對(duì) Struts、 Spring 和 Hibernate 的 J2EE架構(gòu)進(jìn)行具體設(shè)計(jì)。為了集成三種框架，必須明確架構(gòu)的層次結(jié)構(gòu)，同時(shí)明確每一個(gè)層次的職責(zé)，各層次的功能不能相混合。根據(jù)分層原則，把層次分成：表現(xiàn)層、業(yè)務(wù)邏輯層和持久層。表現(xiàn)層使用 Struts并糅合了 Ajax的異步交互功能，業(yè)務(wù)邏輯層使用 Spring，持久層使用 Hibernate，再通過(guò)配置文件把三層結(jié)構(gòu)集成一體。 架構(gòu)實(shí)現(xiàn) 本團(tuán)購(gòu)系統(tǒng)是在整合了 Struts Hibernate、 Spring 和 Ajax 多個(gè)框架的基礎(chǔ)上結(jié)合 MVC 模式進(jìn)行合理架構(gòu)，從而搭建起了系統(tǒng)的開(kāi)發(fā)運(yùn)行環(huán)境。下面就結(jié)合本系統(tǒng)案例，簡(jiǎn)述各個(gè)框架在整個(gè)系統(tǒng)架構(gòu)中分別擔(dān)任的角色。 Struts2 本身就屬于一個(gè)成熟的 MVC 框架，它其中的 Action 類(lèi)就屬于模型層的業(yè)務(wù)邏輯模型控制器，本系統(tǒng)中的各種持久層的實(shí)例類(lèi)就屬于模型層的數(shù)據(jù)模型，前臺(tái)頁(yè)面就屬于其視圖層，其核心控制器類(lèi)就充當(dāng)著轉(zhuǎn)發(fā)各種請(qǐng)求的 控制層角色。 Struts2 在本系統(tǒng)中扮演的角色就是，當(dāng)前臺(tái)頁(yè)面通過(guò)表單或者 Ajax框架向服務(wù)器發(fā)送請(qǐng)求時(shí)，它的核心控制器會(huì)讀取 配置文件，根據(jù)請(qǐng)求路徑轉(zhuǎn)發(fā)給相應(yīng)的 Action， Action 再調(diào)用業(yè)務(wù)邏輯層的相關(guān)方法 (本系統(tǒng)中全是 XxxBizImpl 類(lèi)的方法 )，通過(guò)持久層框架 Hibernate 的 ORM 技術(shù)對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問(wèn)取得所需數(shù)據(jù)后，存進(jìn)本系統(tǒng)中數(shù)據(jù)持久層的各種數(shù)據(jù)庫(kù)表的映射類(lèi)實(shí)例對(duì)象的屬性當(dāng)中， Action 在獲取持久層數(shù)據(jù)類(lèi)實(shí)例對(duì)象中存儲(chǔ)的數(shù)據(jù)之后根據(jù)客戶端請(qǐng)求進(jìn)行了相應(yīng)的處理，然后將處 理結(jié)果或者轉(zhuǎn)發(fā)給下一個(gè) Action、或者轉(zhuǎn)發(fā)給視圖層的 JSP 頁(yè)面。 Hibernate 在整個(gè)系統(tǒng)流程中應(yīng)該是處于 MVC 模式中的模型層，向上負(fù)責(zé)和本系統(tǒng)模型層的業(yè)務(wù)邏輯模型（同時(shí)也屬表現(xiàn)層、業(yè)務(wù)邏輯層和數(shù)據(jù)持久層這三層架構(gòu)中的業(yè)務(wù)邏輯層），即 XxxBizImpl 類(lèi)的方法進(jìn)行數(shù)據(jù)互通；向下通過(guò) ORM 25 技術(shù)負(fù)責(zé)把模型層中的數(shù)據(jù)模型（同時(shí)也屬三層架構(gòu)中的數(shù)據(jù)持久層），即本系統(tǒng)數(shù)據(jù)庫(kù)中每張表所對(duì)應(yīng)的的數(shù)據(jù) Bean 中的數(shù)據(jù)記錄給持久化到數(shù)據(jù)庫(kù)中。 Spring 在本系統(tǒng)整個(gè)流程中充當(dāng)?shù)慕巧妥饔?，首先，?Spring 容器 啟動(dòng)時(shí)，會(huì)實(shí)例化 Spring 配置文件 中已經(jīng)注冊(cè)的所有 bean類(lèi)。然后在 Struts 的核心控制器接受到客戶端請(qǐng)求之后會(huì)轉(zhuǎn)發(fā)給 Spring 容器已經(jīng)實(shí)例化的相應(yīng)的 Action 類(lèi)實(shí)例，對(duì) Action 類(lèi)中所需調(diào)用的其他屬性數(shù)據(jù)bean(業(yè)務(wù)邏輯層的類(lèi)對(duì)象 )， Spring 會(huì)先搜尋其 bean 工廠，若已經(jīng)注冊(cè)并實(shí)例化了，就會(huì)將該實(shí)例對(duì)象進(jìn)行動(dòng)態(tài)注入；否則就會(huì)在 Action 調(diào)用該屬性類(lèi)對(duì)象時(shí)出現(xiàn)異常。最后，在 Action 調(diào)用業(yè)務(wù)邏輯層的類(lèi)對(duì)象相關(guān)方法對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作時(shí)， Spring 會(huì)將已經(jīng)實(shí)例化的持久層相應(yīng)的 XxxDAO 類(lèi)對(duì)象動(dòng)態(tài)注入到業(yè)務(wù)邏輯層的類(lèi)對(duì)象的屬性中，以供 XxxBizImpl 的方法調(diào)用，并對(duì)一些涉及到數(shù)據(jù)庫(kù)事務(wù)操作的方法進(jìn)行 AOP 事務(wù)管理。 Ajax 框架在整個(gè)系統(tǒng)架構(gòu)中應(yīng)該處于表現(xiàn)層和 MVC 模式中的視圖層。它主要是利用 JavaScript 中的 XMLHttpRequest 對(duì)象將前臺(tái)的請(qǐng)求數(shù)據(jù)以 JSON 格式傳送給后臺(tái)的 Action 類(lèi)，同時(shí)不中斷用戶的交互體驗(yàn)，待 Action 類(lèi)處理完用戶請(qǐng)求并返回 JSON 格式的數(shù)據(jù)之后， XMLHttpRequest 對(duì)象進(jìn)行接收并利用 DOM 和CSS 技術(shù)對(duì)網(wǎng)頁(yè)進(jìn)行局部更新。在本團(tuán)購(gòu)系統(tǒng)中主要用于用戶的登錄和注冊(cè)的動(dòng)態(tài)驗(yàn)證。 整個(gè)系統(tǒng)架構(gòu)如圖 所示 : 26 系 統(tǒng) 架 構(gòu)F r o n t C o n t r o l l e rS t r u t s A c t i o n V a l i d a t i o n V i e w ( J S P )S t r u t sS e r v i c e I n t e r f a c eS e r v i c e B e a n I m p l e m e n tT r a n s a c t i o n M a n a g e r m e n t B u s i n e s s B e a n s H i b e r n a t e I n t e g r a t i o nS p r i n gD a t a A c c e s s O b j e c tO / R M a p p i n g H i b e n a t e S e r v i c e s T r a n s a c t i o n M a n a g e r m e n tH i b e r n a t eD a t a B a s e ( M y S Q L )表 現(xiàn) 層業(yè) 務(wù) 邏 輯 層數(shù) 據(jù) 持 久 層后 臺(tái) 數(shù) 據(jù) 層A j a x 圖 系統(tǒng)架構(gòu)圖 27 5 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì) 數(shù)據(jù)庫(kù) ER 圖設(shè)計(jì) g r o u p b u y _ g o o d sP K g o o d s _ i dI 2 c i t y c a t e g o r y g r o u p B u y _ t i t l e s o u r c e _ p r i c e g r o u p _ p r i c e l o w _ n u m m o s t _ n u m b e g i n _ t i m e e n d _ t i m e g o o d s _ c u e g o o d s _ i n t r o d u c eI 1 b u s i n e s s m a n g o o d s _ n a m e g o o d s _ i m g g o o d s _ d e t a i l g r o u p b u y _ a d d r e s s l o c a t i o n i s _ t u i j i a n d i s c o u n tm y o r d e rP K o r d e r _ i dI 1 o r d e r _ o f _ u s e r o r d e r