CN101599159A - 一种网络购物车的异步交互方法 - Google Patents

Abstract

本发明提供一种网络购物车的异步交互方法，对每一种虚拟商品在展示该虚拟商品的HTML页面的HTML标签上设定一个“可购买”标记属性；当浏览器从服务器端加载展示该虚拟商品的HTML页面时通过“可购买”标记属性标识该虚拟商品是否处于可购买状态，并且通过“购买”按钮外观提示用户该虚拟商品不可重复购买。应用本发明实现的标记式购物车，对于只需购买一次的虚拟商品，可以做到防止用户重复购买而导致额外没有意义的花费。这种标记式购物车简单易用，适合使用于虚拟数码图片等虚拟商品的应用环境。

Description

一种网络购物车的异步交互方法

技术领域

本发明属于信息领域，特别是涉及一种网络购物车的异步交互方法。

背景技术

网络购物车是现今电子商务平台不可或缺的一部分，在电子虚拟交易系统中发挥了关键作用。网络购物车可以简单理解为商家为用户提供的一种方便快捷的购物工具，一般采用B/S(浏览器/服务器)结构实现，通过浏览器向用户所使用的计算机等客户端提供。通过网络购物车，可以一次性批量挑选各种不同的所需商品，并可一次性完成付款。当今的购物车一般具有以下几种功能：

(1)在浏览商品的时候，根据商品信息，可以将商品添加到购物车中。

(2)将商品成功添加到购物车中后，可以打开购物车页面查看已经成功添加到购物车中的商品。

(3)进入购物车页面后，可以进行多种操作：点击商品名称或商品图片可以查看商品的详细信息；可以修改单件商品的购买数量；可以将单件商品从购物车中删除；可以从商品页面继续将商品添加到购物车中；可以进入结算页面实现在线支付购买。

目前的网络购物车大多用于各类通用的电子商务平台，主要支持实物商品，而对于虚拟商品的特殊性，缺乏技术手段进行区分处理。因为数码图片之类虚拟商品不同于实物商品，购买一件与购买多件没有区别，客户无需购买多件。为了避免纠纷，如何限制客户因误操作等原因而购买了多件同样虚拟商品，是网络购物车技术尚待解决的技术问题。

发明内容

本发明目的在于克服现有技术缺点，提供一种网络购物车的异步交互方法。

本发明的技术方案对每一种虚拟商品在展示该虚拟商品的HTML页面的HTML标签上设定一个“可购买”标记属性；当浏览器从服务器端加载展示该虚拟商品的HTML页面时通过“可购买”标记属性标识该虚拟商品是否处于可购买状态；

当客户通过浏览器在展示该虚拟商品的HTML页面点击该虚拟商品的“购买”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端；服务器端采用异步交互模式响应用户请求参数，根据用户请求参数在本次http会话中的购物车对象中添加该虚拟商品，将展示该虚拟商品的HTML页面中“可购买”标记属性修改为标识不可购买状态，同时修改“购买”按钮外观提示用户该虚拟商品不可重复购买；

当客户通过浏览器在网络购物车的HTML页面点击该虚拟商品的“删除”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端，服务器端采用异步交互模式响应用户请求参数，根据用户请求参数在本次http会话中的购物车对象中删除该虚拟商品，将展示该虚拟商品的HTML页面中“可购买”标记属性恢复，同时恢复“购买”按钮外观提示用户可以继续购买该商品。

而且，用户请求参数通过javascript语言的XMLHttpRequest对象使用异步发送模式发送到服务器端，所述用户请求参数包括该虚拟商品的标识码。

而且，服务器端在本次http会话中的购物车对象中添加该虚拟商品成功时，发送表示成功添加的返回码到浏览器；添加该虚拟商品不成功时，浏览器发送的用户请求参数在服务器端将视为无效请求不予处理，服务器端发送表示未成功添加的返回码到浏览器，浏览器发出消息提示告诉用户出现了错误。

本发明针对虚拟商品特点，采取标记式技术手段实现不允许将虚拟商品添加到购物车后继续购买同一件虚拟商品，当从购物车中删除某个虚拟商品允许继续购买该虚拟商品；同时不允许在购物车中修改单件虚拟商品的购买数量。本发明具有多种优点：对于只需购买一次的虚拟商品，可以做到防止用户重复购买而导致额外没有意义的花费。通过彩色图标与黑白图标明白的告诉用户哪些商品可以购买，哪些不能购买，即时完成从彩色图标到黑白图标的变化切换，提高了用户的使用体验度。对于出错信息可以在浏览器上向用户报错，不至于使用户不知道问题在哪里，方便用户找到出错原因。

附图说明

图1为本发明实施例客户添加商品到购物车时的购物车交互流程图。

图2为本发明实施例的购物车类以及其内部结构图。

图3为本发明实施例的客户端的标签节点结构与变化示意图。

具体实施方式

本发明提供的是一种网络购物车的异步交互方法，是在商务网站的服务器和客户使用的浏览器之间进行的交互。客户一般使用计算机、智能手机等客户端，通过浏览器登陆商务网站，在服务器端提供的HTML页面上浏览商品，并按意愿添加商品到购物车或从购物车中删除商品。服务器端至少提供有两种页面，一种是展示虚拟商品的HTML页面，其中提供虚拟商品的“购买”按钮，以便客户点击购买；另一种展示了购物车中目前所含虚拟商品的HTML页面，其中将目前所含虚拟商品列表展现，每项虚拟商品旁都提供该商品的虚拟商品的“删除”按钮，以便客户点击删除。两种页面中互设超链接以便客户随时查看。

本发明提出对每一种虚拟商品在展示该虚拟商品的HTML页面的HTML标签上设定一个“可购买”标记属性；当客户端的浏览器从服务器端加载展示该虚拟商品的HTML页面时通过“可购买”标记属性标识该虚拟商品是否处于可购买状态。进行这种标记设定后，本发明对客户添加商品到购物车时、从购物车中删除商品时的交互过程分别进行了相应设计。当然，客户添加虚拟商品到购物车，前提是该虚拟商品处于可购买状态；客户从购物车中删除虚拟商品时，前提是该虚拟商品已处于购物车中。

客户添加虚拟商品到购物车时，有关交互过程如下：

当客户通过浏览器在展示该虚拟商品的HTML页面点击该虚拟商品的“购买”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端；服务器端采用异步交互模式响应用户请求参数，根据用户请求参数在本次http会话中的购物车对象中添加该虚拟商品，将展示该虚拟商品的HTML页面中“可购买”标记属性修改为标识不可购买状态，同时修改“购买”按钮外观提示用户该虚拟商品不可重复购买。

客户从购物车中删除虚拟商品时，有关交互过程如下：

当客户通过浏览器在网络购物车的HTML页面点击该虚拟商品的“删除”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端，服务器端采用异步交互模式响应用户请求参数，根据用户请求参数在本次http会话中的购物车对象中删除该虚拟商品，将展示该虚拟商品的HTML页面中“可购买”标记属性恢复，同时恢复“购买”按钮外观提示用户可以继续购买该商品。

特殊情况下，可能出现用户点击“购买”按钮时添加不成功，本发明提出：服务器端在本次http会话中的购物车对象中添加该虚拟商品成功时，发送表示成功添加的返回码到浏览器。如果出现了网络错误或其它未知错误，购买操作被异常终止，导致添加该虚拟商品不成功时，浏览器发送的用户请求参数在服务器端将视为无效请求不予处理，服务器端发送表示未成功添加的返回码到浏览器，浏览器发出消息提示告诉用户出现了错误。用户点击“删除”按钮时，也可根据删除是否成功，发送相应返回码到浏览器。

具体实施时，可由本领域技术人员运用软件技术实现本发明技术方案。为了便于实施参考，提供虚拟商品是数码图片的实施例，下面结合实施例及附图对本发明作进一步说明，但不限定实施例。

本发明实施例利用现有软件平台实现，例如采用操作系统WindowsXP，软件开发环境则可采用MyEclipse6.5.1实现开发工作平台，采用Tomcat5.5实现Web实现应用服务器，JSP2.0作为动态网页技术标准，Java1.5.0为开发语言版本。

异步交互中，用户所处客户端和服务器端分别实现以下操作

(1)客户端：在浏览器所展示页面中显示“购买”按钮的彩色图标与黑白色图标切换效果；虚拟商品的“可购买”标记属性的切换；实现采用异步发送模式发送添加或删除虚拟商品请求。

(2)服务器端：提供存储虚拟商品对象的http会话管理容器；接收浏览器的添加或删除虚拟商品请求并执行后台虚拟商品对象处理；提供购物车对象容器。现有技术中的http会话管理容器，英文名为session，可以简称为HTTP会话，这里侧重说明对http会话的管理，因此使用“http会话管理容器”。

实施例在现有软件平台支持下，进行以下设定：

(1)标记设定：即建立购物车对象中虚拟商品的存在状态与表示该虚拟商品为可购买状态的HTML标签属性之间的关系；建立代表虚拟商品为可购买状态与“购买”按钮显示外观之间的关系。

参见图2，实施例在JSP环境下进行标记设定。包括构造数码图片类Photo和购物车条目类CartItem：数码图片类Photo用来表示一张数码图片，至少具有一个属性inCart来表明这个对象是否存在于购物车中；购物车条目类CartItem用来表示一件存在于购物车之中的虚拟商品，具有一个元数据对象photo，其中photo对象为一个Photo类。还包括构造购物车类ShopCart：购物车类ShopCart用来表示网络购物车，具有一个列表对象CartItemList，这个列表用来存储购物车条目CartItem对象；同时ShopCart具有添加条目、删除条目、清空条目等方法。

每个CartItem对象都有一个Photo类型的属性变量photo，将Photo类设置一个inCart类型的布尔变量属性。具体表示“购买”按钮的HTML标签为一个a标签内嵌一个img标签和一个input标签。根据HTML代码规范，标签的class属性默认简省，本发明利用a标签的class属性，设定a标签的class属性为“buyPhoto”表示为该虚拟商品可以购买；a标签的class属性为空表示该虚拟商品不可购买。input标签的value属性用于表示虚拟商品标识码。

设置两张一模一样的图标图片：一张为彩色，另一张为黑白色。当a标签的class属性为“buyPhoto”时img标签的src属性指向彩色图标图片；a标签的class属性为空时img标签的src属性指向黑白色图标图片。这样用户可以很明显的区别哪些商品已经添加到购物车中，哪些还没有添加。

(2)服务端响应请求机制设定：

为了便于实现添加商品到购物车过程中的交互，实施例还预先构造服务器端针对添加操作的响应请求类AddCartItemAction：添加操作的响应请求类AddCartItemAction使用异步交互模式响应浏览器的添加操作请求。具体添加过程中，在浏览器与服务器之间的http会话内处理操作如下：

1.首先解析浏览器发送的用户请求参数中的虚拟商品标识码；

2.然后从http会话管理容器中获取本次http会话中的购物车对象shoppingcart；

3.在http会话管理容器中根据虚拟商品标识码找到已经存在的虚拟商品对象变量Obj；

4.修改虚拟商品对象变量Obj的inCart属性：将inCart属性置为true，并将虚拟商品对象变量Obj组装为一个购物车条目CartItem对象放入shoppingcart对象中；

5.将shoppingcart对象重新放入http会话管理容器中；

6.根据执行结果反馈返回码给浏览器。

相应地，在从购物车删除商品的过程中的交互中，设定向服务器端发送从购物车中删除虚拟商品的请求，服务器端使用异步交互模式响应浏览器的添加操作请求。具体添加过程中，在浏览器与服务器之间的http会话内处理操作如下：

1.从http会话管理容器中获取本次http会话中的购物车对象shoppingcart；

2.在http会话管理容器中根据虚拟商品标识码找到已经存在的虚拟商品对象变量Obj；

3.修改虚拟商品对象变量Obj的inCart属性：将inCart属性置为false，并将虚拟商品对象变量Obj的购物车条目CartItem对象从shoppingcart对象中移除；

4.将shoppingcart对象重新放入http会话管理容器中；

5.根据执行结果反馈返回码给浏览器。

(3)浏览器请求发送与接收响应机制设定：

为了便于实现添加商品到购物车过程中的交互，设定利用javascript语言中的XMLHTTPRequest对象向服务器端的AddCartItemAction类发送添加虚拟商品到购物车中的请求(携带用户请求参数发送)，发送完后接收从AddCartItemAction反馈的返回码，如果返回码表示成功添加，则将表示“购买”按钮的HTML节点中(即虚拟商品对象变量Obj在页面上显示对应的节点)的a标签的class属性设置为空，同时将img标签的src属性设为黑白图标图片，可以通过将彩色图标图片路径改为黑白图标图片路径实现。标签的变化过程见图3。具体实施时，也可设置用灰色图标图片提出用户不可购买，只需与彩色图标图片有明显区别方便辨认即可。

相应地，在购物车删除商品过程的交互过程中，与添加商品到购物车过程中的交互过程相似，设定利用javascript语言中的XMLHTTPRequest对象向服务器端发送从购物车中删除虚拟商品的请求，发送完后接收从服务器端反馈的返回码，如果返回码表示成功删除，则将表示“购买”按钮的HTML节点中的a标签的class属性设置为“buyPhoto”，同时将img标签的src属性设为彩色图标图片。

进行以上设定后，购物车交互遵循设定即可。

参见图1，实施例中，客户添加虚拟商品到购物车，虚拟商品由购买到已购买状态，有关交互过程如下：

A1.浏览器加载从服务器端取得的HTML页面，加载时从http会话管理容器中读取虚拟商品对象变量Obj的inCart属性，如果为true：其中所有的a标签class属性为“buyPhoto”，img标签的src属性指向彩色图标图片；否则a标签class属性为空，img标签的src属性指向黑白色图标图片。

A2.用户在浏览器点击“购买”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端，包括虚拟商品标识码。

这个过程是一个异步交互过程，过程中使用了javascript语言的XMLHttpRequest对象，用户在浏览器端不需要等待这个点击“购买”操作的结果，可以进行其他操作。

A3.服务器端收到浏览器发出的请求后，从用户请求参数中解析获取代表虚拟商品标识码的变量A：然后完成三个操作：

1.在http会话管理容器中根据变量A找到虚拟商品对象变量Obj，将变量Obj装配为一个购物车条目对象并添加到http会话管理容器中的购物车对象中。

2.将变量Obj的inCart属性由false转换置为true，即在服务器端记录了相应虚拟商品是否已经存在于购物车中。

3.向浏览器返回表示执行结果的返回码。

A4.当浏览器收到服务器端传回的执行结果代码后，检查结果就可知虚拟商品对象变量Obj代表的虚拟商品是否已经添加到购物车中，如果添加成功或已经存在于购物车中，则将虚拟商品对应的a标签的class属性设置为空，同时将img标签的src属性指向黑白色图标图片。此时已经不能再购买虚拟商品，“购买”图标为黑白色。

实施例中，客户删除虚拟商品到购物车时，有关交互过程为：

B1.浏览器从服务器加载网络购物车的HTML页面，从http会话管理容器中读取虚拟商品对象变量Obj的inCart属性，购物车中存在的虚拟商品的class属性为“空”，此时可以删除虚拟商品。

B2.用户在网络购物车的HTML页面中，点击“删除”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端，包含虚拟商品标识码。

B3.服务器端根据虚拟商品标识码在http会话管理容器中的购物车对象中找到对应的购物车条目对象，并从购物车对象的条目列表中移除这个条目对象。但是并不删除虚拟商品对象变量Obj，只是将Obj的inCart属性置为false。同时，该虚拟商品对应a标签的class属性恢复为“buyPhoto”。

B4.浏览器端刷该虚拟商品的HTML页面，则刚才已经购买过的虚拟商品重新显示为可购买状态，由于class属性为“buyPhoto”，img标签的src属性指向彩色图标图片，“购买”图标为彩色。

实施例通过标记限制class＝“可购买”时，“添加”按钮就是可以点击的，反之会变成灰色，为未激活按钮，失去购买操作的效用。采用现有JAVASCRIPT技术即可实现这种激活触发，从而不允许将虚拟商品添加到购物车后继续购买同一件虚拟商品。在网络购物车的HTML页面中不提供用户输入数量的文本输入框，则可以控制用户在购物车中无法修改虚拟商品的购买数量。

Claims (4)

1.一种网络购物车的异步交互方法，其特征在于：对每一种虚拟商品在展示该虚拟商品的HTML页面的HTML标签上设定一个“可购买”标记属性；当浏览器从服务器端加载展示该虚拟商品的HTML页面时通过“可购买”标记属性标识该虚拟商品是否处于可购买状态；

当客户通过浏览器在展示该虚拟商品的HTML页面点击该虚拟商品的“购买”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端；服务器端采用异步交互模式响应用户请求参数，根据用户请求参数在本次http会话中的购物车对象中添加该虚拟商品，将展示该虚拟商品的HTML页面中“可购买”标记属性修改为标识不可购买状态，同时修改“购买”按钮外观提示用户该虚拟商品不可重复购买；

当客户通过浏览器在网络购物车的HTML页面点击该虚拟商品的“删除”按钮时，浏览器将用户请求参数采用异步发送模式发送到服务器端，服务器端采用异步交互模式响应用户请求参数，根据用户请求参数在本次http会话中的购物车对象中删除该虚拟商品，将展示该虚拟商品的HTML页面中“可购买”标记属性恢复，同时恢复“购买”按钮外观提示用户可以继续购买该商品。

2.根据权利要求1所述网络购物车的异步交互方法，其特征在于：用户请求参数通过javascript语言的XMLHttpRequest对象使用异步发送模式发送到服务器端，所述用户请求参数包括该虚拟商品的标识码。

3.根据权利要求1或2所述网络购物车的异步交互方法，其特征在于：服务器端在本次http会话中的购物车对象中添加该虚拟商品成功时，发送表示成功添加的返回码到浏览器；添加该虚拟商品不成功时，浏览器发送的用户请求参数在服务器端将视为无效请求不予处理，服务器端发送表示未成功添加的返回码到浏览器，浏览器发出消息提示告诉用户出现了错误。

4.根据权利要求1或2所述网络购物车的异步交互方法，其特征在于：所述修改“购买”按钮外观提示用户该虚拟商品不可重复购买，是将“购买”按钮外观由彩色图标修改为黑白图标；所述恢复“购买”按钮外观提示用户可以继续购买该商品，是将“购买”按钮外观由黑白图标恢复为彩色图标。

Images