Ajax技術在電子商務遠程管理中的應用

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

華　嘯　姜　平　陳瑞祥

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

Ajax技術在電子商務遠程管理中的應用

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

華嘯姜平陳瑞祥

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

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

國家級大學生創新創業訓練計劃基金資助項目(編號：201310304027Z)。

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

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

關鍵詞：Ajax電子商務JSPMVC遠程管理

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引言

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

B/S(瀏覽器/服務器)模式是隨著互聯網技術的興起，對C/S模式的擴展與改進。在此種模式下，主要事務邏輯在服務器端實現，用戶只需要瀏覽器即可進行業務處理，簡化了客戶端電腦載荷，降低了維護成本。但現在一般的B/S模式過于依賴服務器的處理，因此加重了服務器端的負擔，且存在反應速度慢、數據需刷新等問題。

1Ajax技術介紹

Ajax[2-5]指“Asynchronous JavaScript and XML”，它并非一種新的編程語言，而是現有的多種Web技術語言的結合，用于創建交互性更強的Web應用程序。其主要包含以下幾種技術：基于Web標準(standards-based presentation)的XHTML+CSS；使用DOM(document object model)實現動態顯示及交互；使用XML和XSLT進行數據交換及處理；通過XMLHttpRequest異步方式獲取數據信息；使用JavaScript綁定和處理方式。

傳統的Web應用工作模型相當于一個同步的請求/響應系統。即當瀏覽器客戶端產生一個連接到服務器的HTTP請求，服務器完成處理后返回一個HTML頁面到客戶端。這種工作模式加重了服務器的負擔，浪費了帶寬，增加了等待時間，用戶體驗較差。

Ajax的一個最大的特點即無刷新更新頁面，并利用Javascript處理請求結果。JavaScript中的XMLHttpRequest對象是Ajax技術的核心。該對象是一種支持異步請求的技術。

Ajax工作原理如圖1所示?；贏jax技術的Web應用在瀏覽器客戶端和服務器中間加了一層Ajax引擎(XMLHttpRequest)，解決了傳統Web應用只能同步請求的問題。當客戶端與服務器建立會話時，瀏覽器便會加載Ajax引擎。Ajax引擎負責顯示用戶界面，并代表客戶端與服務器進行通信。Ajax引擎允許客戶端程序與服務器端程序二者進行異步通信，從而使客戶端從請求/響應里脫離出來,提高了響應的效率，且無需過多的等待時間，增強了用戶體驗。

圖1　Ajax工作原理

綜合上述，通過Ajax，Internet應用程序可以變得更完善、更友好。

2電子商務遠程管理網頁設計

所謂電子商務遠程管理，即以網頁發布的形式實現多家電子商務連鎖店的統一聯網管理與調配。

為了驗證Ajax技術在電子商務遠程管理中的應用，本文在研究過程中開發了一個基于Ajax技術的品牌連鎖店遠程管理系統。系統在Myeclipse10.0環境下開發，試用內置服務器為My eclipse Tomcat，數據庫系統采用Oracle數據庫。

系統的主要功能有如下幾點。

① 商品資料、價格、會員等既可以由總店統一管理，也可由各分店單獨管理；

② 總店可以實時看到所有分店的銷售、庫存和報表，支持總部統一配送；

③ 分店可以實時看到其他分店的庫存，各店之間可以進行商品調撥等。

2.1　網站主頁設計

電子商務遠程管理的頁面上有店業務查詢、庫存管理、調撥管理、商品銷售、銷售報表、會員管理等選項鏈接。店業務查詢功能可以實時查看各分店的業務情況。庫存管理與調撥管理，前者可以查看各分店商品的庫存量，后者可以根據前者的信息進行各分店之間的商品調撥，實現分店之間的庫存共享。商品銷售即為商品掃碼銷售界面。銷售報表用于統計與查看各分店及各商品的銷售情況。會員管理用于登記會員信息及其消費信息。

2.2　構建Ajax開發框架

運用Ajax技術編寫Web系統時，需通過一個個編制的JavaScript函數來構建開發框架[6]。下面以本網站中的“調撥管理”功能的JSP代碼allot.jsp文件簡單介紹Ajax框架的搭建。

通過JavaScript函數的getXMLHttpRequest()函數，獲得最新最快版本的XMLHttpRequest對象。該函數將被submit()函數調用，主要代碼如下。

varxmlHttpRequest=null;

//創建用作XMLHttpRequest

對象的xmlHttpRequest變量,值設置為null

functiongetXmlHttpRequest(){

try{

xmlHttpRequest=new XMLHttpRequest();

//以 Web 標準創建對象(Mozilla, Opera 以及 Safari)

}catch(e){

try{

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

//以微軟的方式創建對象

}catch(e){

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

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

}

}

}

回調函數callback()，該函數根據服務器的請求響應狀態返回商品的調撥管理的結果，并以彈出對話框的形式顯示在頁面上，主要代碼如下。

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

//正常響應狀態

{if(xmlHttpRequest.status==200)

//正確的接收響應數據

{

var responseText =xmlHttpRequest.responseText;

//返回服務器請求狀態

if(responseText == 1){

alert("調撥成功");

//提示對話框

}else if(responseText == -1){

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

}else if(responseText == -2){

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

…

}

submit()函數將在點擊“確認”按鈕的時候被調用，同時調用一系列相關的函數，實現調出與調入店鋪的庫存數據更新。具體代碼將在數據庫設計部分作說明。

3數據庫設計

模型-視圖-控制器(model view controller,MVC)[7-10]設計創建Web應用程序的模式。簡單來講，本網站系統中，Model層通過JavaBean來實現，View層通過JSP頁面來表達，Controller層通過Servlet根據頁面請求所需調用處理方法。這種JSP+Servlet+JavaBean的MVC開發模式，在開發上降低了頁面顯示和業務邏輯之間的耦合性，提高了系統的可維護性、靈活性和可擴展性。

數據訪問對象(data access object，DAO)是一個數據訪問接口，起著連接業務邏輯與數據庫資源的作用[11]。

本網站系統采用MVC+DAO設計模式，即利用JSP<-->Servlet<-->Bean<-->DAO<-->Database 的模式思想。控制器servlet獲得用戶提交的數據后，servlet控制調用JavaBean中的具體的方法，然后javabeankj調用DAO中的方法，實現對數據庫的一些操作。此外，Servlet控制器調用DAO對象把數據庫中的數據提取到JavaBean中，再將JavaBean中的數據交給JSP顯示。

頁面與數據庫交互工作原理過程如圖2所示。

圖2　頁面與數據庫交互原理示意圖

以allot.jsp為例，當用戶使用調撥管理功能，點擊確認按鈕時，submit()函數中會產生一個頁面請求，代碼如下。

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";

//跳轉到RemoteServlet中的

shoe_style_no3來處理提交的數據

...

}

servlet根據用戶提交的頁面請求，得到傳遞過來的標志位flag，選擇調用bean中對應的方法，代碼如下。

public void doPost(…

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

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

//跳轉到remoteBean.allot來處理;

…

}

}

程序執行bean的方法后，選擇調用相應的DAO中的方法，代碼如下。

publicString allot(){

…

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

return I

}

//跳轉到remoteDao.allot來處理

接著調用remoteDAO對象中的allot()函數，實現對數據庫的操作。代碼如下。

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調用存儲過程

csb.setString(1, shoe_style_no);

//設置存儲過程的參數，1表示為第一個問號賦值

…

csb.registerOutParameter(5, Types.VARCHAR);

//設置輸出結果類型

csb.execute();

//執行該存儲過程

I = csb.getString(5);

//得到結果

}…

return I;

}

接著，Servlet控制器將獲得到的數據顯示到相關頁面中，這就是一個最簡單的MVC+DAO操作數據庫的實現模式。

4結束語

隨著IT互聯網技術的蓬勃發展與日趨成熟[11-16]，當今的互聯網技術愈加趨于人性化。將Ajax技術應用于電子商務遠程管理網站系統的開發，既保留了B/S結構的優點，又具有C/S結構應用的強大功能和用戶感受，從而獲得較好的用戶體驗。管理者無需安裝客戶端，無論身在何方，只要能上網，能有相應的權限，就能了解到整個公司全部的經營狀況。這樣既促進連鎖店之間的相互照應與溝通，又實現了總部的實時和精確的集中管理。

參考文獻

[1] 王鑒.AJAX技術在連鎖店事務管理系統的應用[D].大連：大連理工大學，2006.

[2] 夏小云，吳為波.AJAX技術的搜索引擎優化問題研究[J].江西理工大學學報,2008,29(5):79-82.

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

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

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

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

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

[8] 張迪.基于Ajax框架和MVC設計模式的Web應用研究[D].上海：華東師范大學，2008.

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

[10]朱曦，鐘珞，彭鈺，等.基于Java和DAO設計模式的網上購物系統的實現[J].信息技術，2005(12):120-122.

[11]梁玉環,李村合,索紅光.基于JSP的網站訪問統計系統的設計與實現[J].計算機應用研究,2004(4) :12-15.

[12]朱海泉,李兵.基于JSP網頁自動生成工具的設計與實現[J].長春師范學院學報,2006(12) :55-56.

[13]馬國財.基于JSP技術的MIS系統中復雜查詢器的設計與實現[J].青海大學學報:自然科學版,2007(2):48-51.

[14]仲偉和.基于JSP網頁自動生成工具的設計與實現[J].科技信息(科學教研),2007(15):71-72,86.

[15]李佳.基于JSP技術的網頁自動生成工具的實現[J].電腦開發與應用,2009(3):43-46.

[16]張愛平,賴欣.在JSP中調用JavaBean實現Web數據庫訪問[J].計算機時代,2007(1):34-37.

中圖分類號：TP311

文獻標志碼：A

DOI:10.16086/j.cnki.issn1000-0380.201501014