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所示。基于Ajax技术的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