一、概述
1.当添加或删除商品时，购物车会立即更新数据
2.思路：
（1）建立商品类Item.java，存有商品属性name,prince,code(商品编码)等
（2）建立商品目录类Catalog.java，便于CRUD操作时，判断是否存在该品种商品
（3）建立购物车类Cart.java,保存用户已选购的商品各类及其数量，HashMap<Item,Integer>存储，提供toXml()把存储的内容拼接成xml格式。把cart对象放在session中，以保存用户在会话期间的购物数据，且方便servlet的CRUD操作，及调用toXml()返回给request
(4)建立CartServlet.java处理请求
3.类图
4.序列图
二、代码
1.Item.java
package developerworks.ajax.store; import java.math.BigDecimal; //商品
public class Item {
private String code;
private String name;
private String description;
private int price; public Item(String code,String name,String description,int price) {
this.code=code;
this.name=name;
this.description=description;
this.price=price;
} public String getCode() {
return code;
} public String getName() {
return name;
} public String getDescription() {
return description;
} public int getPrice() {
return price;
} public String getFormattedPrice() {
return "$"+new BigDecimal(price).movePointLeft(2);
} public boolean equals(Object o) {
if (this == o) return true;
if (this == null) return false;
if (!(o instanceof Item)) return false;
return ((Item)o).getCode().equals(this.code);
}
}
2.Catalog.java
package developerworks.ajax.store; import java.util.*; //商品目录
public class Catalog { private static Map<String,Item> items; static {
items = new HashMap<String,Item>();
items.put("hat001",new Item("hat001","Hat","Stylish bowler hat (SALE!)",1999));
items.put("dog001",new Item("dog001","Dog","Chocolate labrador puppy",7999));
items.put("sou001",new Item("sou001","Soup","Can of tasty tomato soup",199));
items.put("cha001",new Item("cha001","Chair","Swivelling office chair", 4999));
items.put("str001",new Item("str001","String","Metric tonne of bailing twine", 1999));
items.put("qua001",new Item("qua001","Quark","Everyone's favorite sub-atomic particle", 49));
} public Collection<Item> getAllItems() {
return items.values();
} public boolean containsItem(String itemCode) {
return items.containsKey(itemCode);
} public Item getItem(String itemCode) {
return items.get(itemCode);
} }
3.Cart.java
package developerworks.ajax.store; import java.math.BigDecimal;
import java.util.*; /**
* A very simple shopping Cart
*/
public class Cart { //HashMap<Item,Integer>中，Item用来表示购物车的哪种物品，Integer表示该物品的数量
private HashMap<Item,Integer> contents; /**
* Creates a new Cart instance
*/
public Cart() {
contents = new HashMap<Item,Integer>();
} /**
* Adds a named item to the cart
* @param itemName The name of the item to add to the cart
*/
public void addItem(String itemCode) { Catalog catalog = new Catalog(); if (catalog.containsItem(itemCode)) {
Item item = catalog.getItem(itemCode); int newQuantity = 1; //查看要添加的item在现在的购物车中是否已经存在
if (contents.containsKey(item)) {
Integer currentQuantity = contents.get(item); //若存在则数量加1就行
newQuantity += currentQuantity.intValue();
}
//更新物品数量
contents.put(item, new Integer(newQuantity));
}
} /**
* Removes the named item from the cart
* @param itemName Name of item to remove
*/
public void removeItems(String itemCode) { contents.remove(new Catalog().getItem(itemCode));
} /**
* @return XML representation of cart contents
*/
public String toXml() {
StringBuffer xml = new StringBuffer();
xml.append("<?xml version=\"1.0\"?>\n");
xml.append("<cart generated=\""+System.currentTimeMillis()+"\" total=\""+getCartTotal()+"\">\n"); /*遍历购物车中的每种物品，取出各种物品的名称、数量，拼接xml
<item code="xx">
<name>xx</name>
<quantity>xx</quantity>
</item>
*/
for (Iterator<Item> I = contents.keySet().iterator() ; I.hasNext() ; ) {
Item item = I.next();
int itemQuantity = contents.get(item).intValue(); xml.append("<item code=\""+item.getCode()+"\">\n");
xml.append("<name>");
xml.append(item.getName());
xml.append("</name>\n");
xml.append("<quantity>");
xml.append(itemQuantity);
xml.append("</quantity>\n");
xml.append("</item>\n");
} xml.append("</cart>\n");
System.out.println(xml);
return xml.toString();
} //算总价
private String getCartTotal() {
int total = 0; //取出购物车的每种物品
for (Iterator<Item> I = contents.keySet().iterator() ; I.hasNext() ; ) {
Item item = I.next();
//取出购物车中每种物品的数量
int itemQuantity = contents.get(item).intValue(); //每种物品的总价=单价*数量
total += (item.getPrice() * itemQuantity);
} return "$"+new BigDecimal(total).movePointLeft(2);
}
}
4.CartServlet.java
package developerworks.ajax.servlet; import developerworks.ajax.store.Cart;
import javax.servlet.http.*; import java.util.Enumeration; public class CartServlet extends HttpServlet { /**
* Updates Cart, and outputs XML representation of contents
*/
public void doPost(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException { Enumeration headers = req.getHeaderNames();
while (headers.hasMoreElements()) {
String header =(String) headers.nextElement();
System.out.println(header+": "+req.getHeader(header));
} Cart cart = getCartFromSession(req); //接收在req.send("action=add&item="+itemCode)指定的参数
String action = req.getParameter("action");
String item = req.getParameter("item"); if ((action != null)&&(item != null)) { if ("add".equals(action)) {
cart.addItem(item); } else if ("remove".equals(action)) {
cart.removeItems(item); }
} String cartXml = cart.toXml();
res.setContentType("text/xml");
//cartXml的值会赋给responseXML属性返回给request
res.getWriter().write(cartXml);
} public void doGet(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException {
// Bounce to post, for debugging use
// Hit this servlet directly from the browser to see XML
doPost(req,res);
} private Cart getCartFromSession(HttpServletRequest req) { //把购物车保存在session中
HttpSession session = req.getSession(true);
Cart cart = (Cart)session.getAttribute("cart"); if (cart == null) {
cart = new Cart();
session.setAttribute("cart", cart);
} return cart;
}
}
5.cart.js
// Timestamp of cart that page was last updated with
var lastCartUpdate = 0; /*
* Adds the specified item to the shopping cart, via Ajax call
* itemCode - product code of the item to add
*/
function addToCart(itemCode) { var req = newXMLHttpRequest(); /*XMLHttpRequest的 readyState属性是一个数值，它指出请求生命周期的状态。它从 0（代表“未初始化”）变化到 4（代表“完成”）。每次 readyState变化时，readystatechange事件就触发，由 onreadystatechange属性指定的事件处理函数就被调用。*/
req.onreadystatechange = getReadyStateHandler(req, updateCart); //在web.xml中有匹配了cart.do的servlet
req.open("POST", "cart.do", true); /*
HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：
<method> <request-URL> <version>
<headers> <entity-body> application/x-www-form-urlencoded是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）： POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8 title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title'] 可以获取到 title 的值，$_POST['sub'] 可以得到 sub 数组。
很多时候，我们用 Ajax 提交数据时，也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。
*/
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("action=add&item="+itemCode);
} /*
* 令一种产品的数量减1
*/
function removeToCart(itemCode) { var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler(req, updateCart); //在web.xml中有匹配了cart.do的servlet
req.open("POST", "cart.do", true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("action=remove&item="+itemCode);
} /*
* Update shopping-cart area of page to reflect contents of cart
* described in XML document.
*/
/*由于servlet调用res.getWriter().write(cartXml);
所以cartXml的值会赋给requestXML属性返回的给request,具体返回的xml格式如下：
<car generated="xxxxxx" total="$xxxx"">
<item code="xx">
<name>xx</name>
<quantity>xx</quantity>
</item>
<item code="xx">
<name>xx</name>
<quantity>xx</quantity>
</item>
</car>
*/
/*更新购物车*/
function updateCart(cartXML) {
var cart = cartXML.getElementsByTagName("cart")[0];
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
var contents = document.getElementById("contents");
//把次取出id为"contents"的UL时，都把它的html内容清空，否则旧内容与新内容会叠加
contents.innerHTML = ""; var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) { var item = items[I]; //得到<name>xx</name>的值
var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
//得到<quantity>xx</quantity>的值
var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue; var listItem = document.createElement("li");
listItem.appendChild(document.createTextNode(name+" x "+quantity));
contents.appendChild(listItem);
} } document.getElementById("total").innerHTML = cart.getAttribute("total");
}
6.ajax1.js
/*
* Returns an new XMLHttpRequest object, or false if the browser
* doesn't support it
*/
function newXMLHttpRequest() { var xmlreq = false; // Create XMLHttpRequest object in non-Microsoft browsers
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try {
// Try to create XMLHttpRequest in later versions
// of Internet Explorer xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // Failed to create required ActiveXObject try {
// Try version supported by older versions
// of Internet Explorer xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // Unable to create an XMLHttpRequest by any means
xmlreq = false;
}
}
} return xmlreq;
} /*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes it XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/ /*getReadyStateHandler()像这样被调用：handlerFunction = getReadyStateHandler(req, updateCart)。在这个示例中，getReadyStateHandler()返回的函数将检查在 req变量中的 XMLHttpRequest是否已经完成，然后用响应的 XML 调用名为 updateCart的函数。*/
function getReadyStateHandler(req, responseXmlHandler) { // Return an anonymous function that listens to the XMLHttpRequest instance
return function () { // If the request's status is "complete"
if (req.readyState == 4) { // Check that we received a successful response from the server
if (req.status == 200) { // Pass the XML payload of the response to the handler function.
responseXmlHandler(req.responseXML); } else { // An HTTP problem has occurred
alert("HTTP error "+req.status+": "+req.statusText);
}
}
}
}
7.index.jsp
<%@ page import="java.util.*" %>
<%@ page import="developerworks.ajax.store.*" %>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="ajax1.js"></script>
<script type="text/javascript" language="javascript" src="cart.js"></script>
</head>
<body>
<div style="float: left; width: 500px">
<h2>Catalog</h2>
<table border="1">
<thead><th>Name</th><th>Description</th><th>Price</th><th></th></thead>
<tbody>
<%
for (Iterator<Item> I = new Catalog().getAllItems().iterator() ; I.hasNext() ; ) {
Item item = I.next();
%>
<tr><td><%= item.getName() %></td><td><%= item.getDescription() %></td><td><%= item.getFormattedPrice() %></td><td><button onclick="addToCart('<%= item.getCode() %>')">Add to Cart</button></td>
<td><button onclick="removeToCart('<%= item.getCode() %>')">Delete to Cart</button></td></tr>
<% } %>
</tbody>
</table>
<div style="position: absolute; top: 0px; right: 0px; width: 250px">
<h2>Cart Contents</h2>
<ul id="contents">
</ul>
Total cost: <span id="total">$0.00</span>
</div>
</body>
</html>
8.web.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4"> <display-name>Ajax Shopping-Cart WebApp</display-name> <servlet>
<servlet-name>Cart</servlet-name>
<servlet-class>developerworks.ajax.servlet.CartServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet> <servlet-mapping>
<servlet-name>Cart</servlet-name>
<url-pattern>/cart.do</url-pattern>
</servlet-mapping>
</web-app>
三、运行结果
转自：http://www.ibm.com/developerworks/cn/java/j-ajax1/