Ajax实例-购物车

一、概述

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"?>
");
    xml.append("<cart generated=""+System.currentTimeMillis()+"" total=""+getCartTotal()+"">
");

    /*遍历购物车中的每种物品，取出各种物品的名称、数量，拼接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()+"">
");
      xml.append("<name>");
      xml.append(item.getName());
      xml.append("</name>
");
      xml.append("<quantity>");
      xml.append(itemQuantity);
      xml.append("</quantity>
");
      xml.append("</item>
");
    }
    
    xml.append("</cart>
");
    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;  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;  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/