AJAX学习

最新推荐文章于 2024-08-25 09:57:22 发布

fjfdszj

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量494

点赞数

文章标签： ajax xmlhttprequest action function string javascript

本文链接：https://blog.csdn.net/fjfdszj/article/details/2680565

版权

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;
}
}

fjfdszj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习

1.web.xml文件配置 Ajax Shopping-Cart WebApp Cart developerworks.ajax.servlet.CartServlet 1 Cart /cart.do index.jsp 2.index.jsp主页http://www.w3.org/TR/xhtml1/DTD/xhtm
复制链接

扫一扫