1.web.xml文件配置
<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>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
2.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>Add</th>Remove<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 οnclick="addToCart('<%= item.getCode() %>')">Add to Cart</button></td><td><button οnclick="RemoveCart('<%= item.getCode() %>')">Remove from 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>
3.ajax1.js生成 newXMLHttpRequest,getReadyStateHandler
/*
* 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;
}
}
}
else
{
xmlreq=new XMLHttpRequest();
}
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
*/
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);
}
}
}
}
4.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();//创建request对象
req.onreadystatechange = getReadyStateHandler(req, updateCart);//设置回调函数。
req.open("POST", "cart.do", true);//请求页
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("action=add&item="+itemCode);
}
function RemoveCart(itemCode) {
var req = newXMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req, updateCart);
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.
*/
function updateCart(cartXML) {
var cart = cartXML.getElementsByTagName("cart")[0];
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
var contents = document.getElementById("contents");
contents.innerHTML = "";
var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) {
var item = items[I];
var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
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");
}
5.cartSevlet.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);
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");
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) {
HttpSession session = req.getSession(true);
Cart cart = (Cart)session.getAttribute("cart");
if (cart == null) {
cart = new Cart();
session.setAttribute("cart", cart);
}
return cart;
}
}