Ajax技術(shù)在電子商務(wù)遠(yuǎn)程管理中的應(yīng)用

Application of Ajax Technology in the Remote Management of E-commerce

華　嘯　姜　平　陳瑞祥

(南通大學(xué)電氣工程學(xué)院,江蘇 南通　226019)

Ajax技術(shù)在電子商務(wù)遠(yuǎn)程管理中的應(yīng)用

Application of Ajax Technology in the Remote Management of E-commerce

華嘯姜平陳瑞祥

(南通大學(xué)電氣工程學(xué)院,江蘇 南通226019)

摘要：針對(duì)電子商務(wù)的傳統(tǒng)客戶機(jī)/服務(wù)器(C/S)管理模式存在的不足，采用Ajax技術(shù)開(kāi)發(fā)電子商務(wù)的遠(yuǎn)程管理系統(tǒng)。Ajax是新的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，加入了異步刷新的功能，具有靈活、快速、動(dòng)態(tài)等特點(diǎn)，大量減少了網(wǎng)絡(luò)數(shù)據(jù)的傳輸，減輕了服務(wù)器與帶寬的負(fù)擔(dān)，提升了用戶體驗(yàn)。采用MVC實(shí)現(xiàn)更好的軟件結(jié)構(gòu)與代碼復(fù)用的技術(shù)，基于JavaScript函數(shù)搭建Ajax開(kāi)發(fā)框架；設(shè)計(jì)DAO訪問(wèn)接口，與MVC相結(jié)合，實(shí)現(xiàn)JSP頁(yè)面與數(shù)據(jù)庫(kù)的實(shí)時(shí)交互以及電子商務(wù)遠(yuǎn)程管理。

國(guó)家級(jí)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃基金資助項(xiàng)目(編號(hào)：201310304027Z)。

修改稿收到日期：2014-06-30。

第一作者華嘯(1991-)，男，現(xiàn)為南通大學(xué)電氣工程及其自動(dòng)化專業(yè)在讀本科生；主要從事智能控制技術(shù)的研究。

關(guān)鍵詞：Ajax電子商務(wù)JSPMVC遠(yuǎn)程管理

Abstract：To overcome the deficiencies existing in traditional client/server(C/S) management mode of E-commerce, the remote management system of E-commerce is developed by adopting Ajax technology. Ajax is the latest developing technology for webpage with asynchronous refresh function added, it features flexible, rapid and dynamic for greatly decreasing transmission of network data and the burden of server and bandwidth; and enhancing users’ experience. By using MVC, better software structure and code reuse technologies are implemented; Based on JaveScript function， Ajaz development framework is constructed and DAO access interface is designed, combining with MVC, real time interaction of JSP web page and database is realized for accomplishing remote management of E-commerce.

Keywords：AjaxE-commerceJSPMVCRemote management

0引言

傳統(tǒng)的電子商務(wù)連鎖店大多采用C/S(客戶機(jī)/服務(wù)器)模式[1-5]進(jìn)行管理。C/S模式采用分布存儲(chǔ)與處理數(shù)據(jù)的方式。它增強(qiáng)了客戶操作與數(shù)據(jù)庫(kù)管理的獨(dú)立性，提高了系統(tǒng)的運(yùn)行效率。但該模式需要安裝客戶端軟件，存在系統(tǒng)兼容性問(wèn)題等。當(dāng)軟件更新時(shí)，需要重新安裝軟件，導(dǎo)致其維護(hù)復(fù)雜、升級(jí)麻煩、可擴(kuò)展性和可維護(hù)性較差。因而，C/S模式增加了企業(yè)的管理難度，降低了企業(yè)的管理效率，不利于電子商務(wù)的發(fā)展。

B/S(瀏覽器/服務(wù)器)模式是隨著互聯(lián)網(wǎng)技術(shù)的興起，對(duì)C/S模式的擴(kuò)展與改進(jìn)。在此種模式下，主要事務(wù)邏輯在服務(wù)器端實(shí)現(xiàn)，用戶只需要瀏覽器即可進(jìn)行業(yè)務(wù)處理，簡(jiǎn)化了客戶端電腦載荷，降低了維護(hù)成本。但現(xiàn)在一般的B/S模式過(guò)于依賴服務(wù)器的處理，因此加重了服務(wù)器端的負(fù)擔(dān)，且存在反應(yīng)速度慢、數(shù)據(jù)需刷新等問(wèn)題。

1Ajax技術(shù)介紹

Ajax[2-5]指“Asynchronous JavaScript and XML”，它并非一種新的編程語(yǔ)言，而是現(xiàn)有的多種Web技術(shù)語(yǔ)言的結(jié)合，用于創(chuàng)建交互性更強(qiáng)的Web應(yīng)用程序。其主要包含以下幾種技術(shù)：基于Web標(biāo)準(zhǔn)(standards-based presentation)的XHTML+CSS；使用DOM(document object model)實(shí)現(xiàn)動(dòng)態(tài)顯示及交互；使用XML和XSLT進(jìn)行數(shù)據(jù)交換及處理；通過(guò)XMLHttpRequest異步方式獲取數(shù)據(jù)信息；使用JavaScript綁定和處理方式。

傳統(tǒng)的Web應(yīng)用工作模型相當(dāng)于一個(gè)同步的請(qǐng)求/響應(yīng)系統(tǒng)。即當(dāng)瀏覽器客戶端產(chǎn)生一個(gè)連接到服務(wù)器的HTTP請(qǐng)求，服務(wù)器完成處理后返回一個(gè)HTML頁(yè)面到客戶端。這種工作模式加重了服務(wù)器的負(fù)擔(dān)，浪費(fèi)了帶寬，增加了等待時(shí)間，用戶體驗(yàn)較差。

Ajax的一個(gè)最大的特點(diǎn)即無(wú)刷新更新頁(yè)面，并利用Javascript處理請(qǐng)求結(jié)果。JavaScript中的XMLHttpRequest對(duì)象是Ajax技術(shù)的核心。該對(duì)象是一種支持異步請(qǐng)求的技術(shù)。

Ajax工作原理如圖1所示。基于Ajax技術(shù)的Web應(yīng)用在瀏覽器客戶端和服務(wù)器中間加了一層Ajax引擎(XMLHttpRequest)，解決了傳統(tǒng)Web應(yīng)用只能同步請(qǐng)求的問(wèn)題。當(dāng)客戶端與服務(wù)器建立會(huì)話時(shí)，瀏覽器便會(huì)加載Ajax引擎。Ajax引擎負(fù)責(zé)顯示用戶界面，并代表客戶端與服務(wù)器進(jìn)行通信。Ajax引擎允許客戶端程序與服務(wù)器端程序二者進(jìn)行異步通信，從而使客戶端從請(qǐng)求/響應(yīng)里脫離出來(lái),提高了響應(yīng)的效率，且無(wú)需過(guò)多的等待時(shí)間，增強(qiáng)了用戶體驗(yàn)。

圖1　Ajax工作原理

綜合上述，通過(guò)Ajax，Internet應(yīng)用程序可以變得更完善、更友好。

2電子商務(wù)遠(yuǎn)程管理網(wǎng)頁(yè)設(shè)計(jì)

所謂電子商務(wù)遠(yuǎn)程管理，即以網(wǎng)頁(yè)發(fā)布的形式實(shí)現(xiàn)多家電子商務(wù)連鎖店的統(tǒng)一聯(lián)網(wǎng)管理與調(diào)配。

為了驗(yàn)證Ajax技術(shù)在電子商務(wù)遠(yuǎn)程管理中的應(yīng)用，本文在研究過(guò)程中開(kāi)發(fā)了一個(gè)基于Ajax技術(shù)的品牌連鎖店遠(yuǎn)程管理系統(tǒng)。系統(tǒng)在Myeclipse10.0環(huán)境下開(kāi)發(fā)，試用內(nèi)置服務(wù)器為My eclipse Tomcat，數(shù)據(jù)庫(kù)系統(tǒng)采用Oracle數(shù)據(jù)庫(kù)。

系統(tǒng)的主要功能有如下幾點(diǎn)。

① 商品資料、價(jià)格、會(huì)員等既可以由總店統(tǒng)一管理，也可由各分店單獨(dú)管理；

② 總店可以實(shí)時(shí)看到所有分店的銷售、庫(kù)存和報(bào)表，支持總部統(tǒng)一配送；

③ 分店可以實(shí)時(shí)看到其他分店的庫(kù)存，各店之間可以進(jìn)行商品調(diào)撥等。

2.1　網(wǎng)站主頁(yè)設(shè)計(jì)

電子商務(wù)遠(yuǎn)程管理的頁(yè)面上有店業(yè)務(wù)查詢、庫(kù)存管理、調(diào)撥管理、商品銷售、銷售報(bào)表、會(huì)員管理等選項(xiàng)鏈接。店業(yè)務(wù)查詢功能可以實(shí)時(shí)查看各分店的業(yè)務(wù)情況。庫(kù)存管理與調(diào)撥管理，前者可以查看各分店商品的庫(kù)存量，后者可以根據(jù)前者的信息進(jìn)行各分店之間的商品調(diào)撥，實(shí)現(xiàn)分店之間的庫(kù)存共享。商品銷售即為商品掃碼銷售界面。銷售報(bào)表用于統(tǒng)計(jì)與查看各分店及各商品的銷售情況。會(huì)員管理用于登記會(huì)員信息及其消費(fèi)信息。

2.2　構(gòu)建Ajax開(kāi)發(fā)框架

運(yùn)用Ajax技術(shù)編寫Web系統(tǒng)時(shí)，需通過(guò)一個(gè)個(gè)編制的JavaScript函數(shù)來(lái)構(gòu)建開(kāi)發(fā)框架[6]。下面以本網(wǎng)站中的“調(diào)撥管理”功能的JSP代碼allot.jsp文件簡(jiǎn)單介紹Ajax框架的搭建。

通過(guò)JavaScript函數(shù)的getXMLHttpRequest()函數(shù)，獲得最新最快版本的XMLHttpRequest對(duì)象。該函數(shù)將被submit()函數(shù)調(diào)用，主要代碼如下。

varxmlHttpRequest=null;

//創(chuàng)建用作XMLHttpRequest

對(duì)象的xmlHttpRequest變量,值設(shè)置為null

functiongetXmlHttpRequest(){

try{

xmlHttpRequest=new XMLHttpRequest();

//以 Web 標(biāo)準(zhǔn)創(chuàng)建對(duì)象(Mozilla, Opera 以及 Safari)

}catch(e){

try{

xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");

//以微軟的方式創(chuàng)建對(duì)象

}catch(e){

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

//若捕獲不成功，則嘗試更老的方法

}

}

}

回調(diào)函數(shù)callback()，該函數(shù)根據(jù)服務(wù)器的請(qǐng)求響應(yīng)狀態(tài)返回商品的調(diào)撥管理的結(jié)果，并以彈出對(duì)話框的形式顯示在頁(yè)面上，主要代碼如下。

functioncallback(){if(xmlHttpRequest.readyState==4)

//正常響應(yīng)狀態(tài)

{if(xmlHttpRequest.status==200)

//正確的接收響應(yīng)數(shù)據(jù)

{

var responseText =xmlHttpRequest.responseText;

//返回服務(wù)器請(qǐng)求狀態(tài)

if(responseText == 1){

alert("調(diào)撥成功");

//提示對(duì)話框

}else if(responseText == -1){

alert("款式不能為空");

}else if(responseText == -2){

alert("調(diào)出店鋪不能為空");

…

}

submit()函數(shù)將在點(diǎn)擊“確認(rèn)”按鈕的時(shí)候被調(diào)用，同時(shí)調(diào)用一系列相關(guān)的函數(shù)，實(shí)現(xiàn)調(diào)出與調(diào)入店鋪的庫(kù)存數(shù)據(jù)更新。具體代碼將在數(shù)據(jù)庫(kù)設(shè)計(jì)部分作說(shuō)明。

3數(shù)據(jù)庫(kù)設(shè)計(jì)

模型-視圖-控制器(model view controller,MVC)[7-10]設(shè)計(jì)創(chuàng)建Web應(yīng)用程序的模式。簡(jiǎn)單來(lái)講，本網(wǎng)站系統(tǒng)中，Model層通過(guò)JavaBean來(lái)實(shí)現(xiàn)，View層通過(guò)JSP頁(yè)面來(lái)表達(dá)，Controller層通過(guò)Servlet根據(jù)頁(yè)面請(qǐng)求所需調(diào)用處理方法。這種JSP+Servlet+JavaBean的MVC開(kāi)發(fā)模式，在開(kāi)發(fā)上降低了頁(yè)面顯示和業(yè)務(wù)邏輯之間的耦合性，提高了系統(tǒng)的可維護(hù)性、靈活性和可擴(kuò)展性。

數(shù)據(jù)訪問(wèn)對(duì)象(data access object，DAO)是一個(gè)數(shù)據(jù)訪問(wèn)接口，起著連接業(yè)務(wù)邏輯與數(shù)據(jù)庫(kù)資源的作用[11]。

本網(wǎng)站系統(tǒng)采用MVC+DAO設(shè)計(jì)模式，即利用JSP<-->Servlet<-->Bean<-->DAO<-->Database 的模式思想。控制器servlet獲得用戶提交的數(shù)據(jù)后，servlet控制調(diào)用JavaBean中的具體的方法，然后javabeankj調(diào)用DAO中的方法，實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的一些操作。此外，Servlet控制器調(diào)用DAO對(duì)象把數(shù)據(jù)庫(kù)中的數(shù)據(jù)提取到JavaBean中，再將JavaBean中的數(shù)據(jù)交給JSP顯示。

頁(yè)面與數(shù)據(jù)庫(kù)交互工作原理過(guò)程如圖2所示。

圖2　頁(yè)面與數(shù)據(jù)庫(kù)交互原理示意圖

以allot.jsp為例，當(dāng)用戶使用調(diào)撥管理功能，點(diǎn)擊確認(rèn)按鈕時(shí)，submit()函數(shù)中會(huì)產(chǎn)生一個(gè)頁(yè)面請(qǐng)求，代碼如下。

Function submit(){

…

var url="servlet/RemoteServlet?shoe_style_no3="+shoe_style_no3+"&shoe_stock3="+shoe_stock3+"

&shop_no_in="+shop_no_in+"&shop_no_out="+

shop_no_out+"&flag=allot";

//跳轉(zhuǎn)到RemoteServlet中的

shoe_style_no3來(lái)處理提交的數(shù)據(jù)

...

}

servlet根據(jù)用戶提交的頁(yè)面請(qǐng)求，得到傳遞過(guò)來(lái)的標(biāo)志位flag，選擇調(diào)用bean中對(duì)應(yīng)的方法，代碼如下。

public void doPost(…

if(flag.equals("allot")){…

String i = remoteBean.allot(shoe_style_no3, shop_no_in, shop_no_out, shoe_stock3)

//跳轉(zhuǎn)到remoteBean.allot來(lái)處理;

…

}

}

程序執(zhí)行bean的方法后，選擇調(diào)用相應(yīng)的DAO中的方法，代碼如下。

publicString allot(){

…

I = remoteDao.allot(shoe_style_no, shop_no_in, shop_no_out, shoe_stock1);

return I

}

//跳轉(zhuǎn)到remoteDao.allot來(lái)處理

接著調(diào)用remoteDAO對(duì)象中的allot()函數(shù)，實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的操作。代碼如下。

public String allot(String shoe_ _no,String shop_no_in,String shop_no_out,int shoe_stock){

…style

try {

csb = conn.prepareCall("{call allot_pro(?,?,?,?,?)}");

//使用prepareCall調(diào)用存儲(chǔ)過(guò)程

csb.setString(1, shoe_style_no);

//設(shè)置存儲(chǔ)過(guò)程的參數(shù)，1表示為第一個(gè)問(wèn)號(hào)賦值

…

csb.registerOutParameter(5, Types.VARCHAR);

//設(shè)置輸出結(jié)果類型

csb.execute();

//執(zhí)行該存儲(chǔ)過(guò)程

I = csb.getString(5);

//得到結(jié)果

}…

return I;

}

接著，Servlet控制器將獲得到的數(shù)據(jù)顯示到相關(guān)頁(yè)面中，這就是一個(gè)最簡(jiǎn)單的MVC+DAO操作數(shù)據(jù)庫(kù)的實(shí)現(xiàn)模式。

4結(jié)束語(yǔ)

隨著IT互聯(lián)網(wǎng)技術(shù)的蓬勃發(fā)展與日趨成熟[11-16]，當(dāng)今的互聯(lián)網(wǎng)技術(shù)愈加趨于人性化。將Ajax技術(shù)應(yīng)用于電子商務(wù)遠(yuǎn)程管理網(wǎng)站系統(tǒng)的開(kāi)發(fā)，既保留了B/S結(jié)構(gòu)的優(yōu)點(diǎn)，又具有C/S結(jié)構(gòu)應(yīng)用的強(qiáng)大功能和用戶感受，從而獲得較好的用戶體驗(yàn)。管理者無(wú)需安裝客戶端，無(wú)論身在何方，只要能上網(wǎng)，能有相應(yīng)的權(quán)限，就能了解到整個(gè)公司全部的經(jīng)營(yíng)狀況。這樣既促進(jìn)連鎖店之間的相互照應(yīng)與溝通，又實(shí)現(xiàn)了總部的實(shí)時(shí)和精確的集中管理。

參考文獻(xiàn)

[1] 王鑒.AJAX技術(shù)在連鎖店事務(wù)管理系統(tǒng)的應(yīng)用[D].大連：大連理工大學(xué)，2006.

[2] 夏小云，吳為波.AJAX技術(shù)的搜索引擎優(yōu)化問(wèn)題研究[J].江西理工大學(xué)學(xué)報(bào),2008,29(5):79-82.

[3] 孫啟良.Ajax技術(shù)與傳統(tǒng)Web應(yīng)用的比較[J].信息技術(shù),2010(1):108-110.

[4] 付強(qiáng).AJAX技術(shù)在電子商務(wù)網(wǎng)站中的應(yīng)用研究[J].信息與電腦,2009(12):148-149.

[5] Nicholas C.Zakas.JavaScript高級(jí)程序設(shè)計(jì)[M].曹力，張欣，等譯.北京:人民郵電出版社，2006:137-142.

[6] 鮑嘉鑫.基于MVC+DAO設(shè)計(jì)模式的Structs框架應(yīng)用[J].電腦知識(shí)與技術(shù),2008,4(7):91-93.

[7] James T，Kevin B.Strurs Kick Star[M].孫勇,譯.北京：電子工業(yè)出版社，2004:14-21.

[8] 張迪.基于Ajax框架和MVC設(shè)計(jì)模式的Web應(yīng)用研究[D].上海：華東師范大學(xué)，2008.

[9] 孫鑫.Servlet/JSP深入詳解——基于Tomcat的Web開(kāi)發(fā)[M].北京:電子工業(yè)出版社，2008:4-5.

[10]朱曦，鐘珞，彭鈺，等.基于Java和DAO設(shè)計(jì)模式的網(wǎng)上購(gòu)物系統(tǒng)的實(shí)現(xiàn)[J].信息技術(shù)，2005(12):120-122.

[11]梁玉環(huán),李村合,索紅光.基于JSP的網(wǎng)站訪問(wèn)統(tǒng)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用研究,2004(4) :12-15.

[12]朱海泉,李兵.基于JSP網(wǎng)頁(yè)自動(dòng)生成工具的設(shè)計(jì)與實(shí)現(xiàn)[J].長(zhǎng)春師范學(xué)院學(xué)報(bào),2006(12) :55-56.

[13]馬國(guó)財(cái).基于JSP技術(shù)的MIS系統(tǒng)中復(fù)雜查詢器的設(shè)計(jì)與實(shí)現(xiàn)[J].青海大學(xué)學(xué)報(bào):自然科學(xué)版,2007(2):48-51.

[14]仲偉和.基于JSP網(wǎng)頁(yè)自動(dòng)生成工具的設(shè)計(jì)與實(shí)現(xiàn)[J].科技信息(科學(xué)教研),2007(15):71-72,86.

[15]李佳.基于JSP技術(shù)的網(wǎng)頁(yè)自動(dòng)生成工具的實(shí)現(xiàn)[J].電腦開(kāi)發(fā)與應(yīng)用,2009(3):43-46.

[16]張愛(ài)平,賴欣.在JSP中調(diào)用JavaBean實(shí)現(xiàn)Web數(shù)據(jù)庫(kù)訪問(wèn)[J].計(jì)算機(jī)時(shí)代,2007(1):34-37.

中圖分類號(hào)：TP311

文獻(xiàn)標(biāo)志碼：A

DOI:10.16086/j.cnki.issn1000-0380.201501014