Ajax

开发平台：
Java

index.jsp：源码内容
							<%--
    Document   : index
    Created on : 2010-1-11, 9:51:09
    Author     : TFPC
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.*,Entity.Item" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   <script type="text/javascript" src="js/loadjs.js"></script>
   <script>
    function shoplist(){                //显示购物清单
      　document.getElementById("shoplist").style.display="";
       }
    function shop(){                     //继续购物
      　document.getElementById("shoplist").style.display="none";
       }
    var request=getXMLHttp();
    function additem(num,price){                 //添加物品至购物单
        //使用Ajax传递数据后得到用户的购买清单
      if(document.getElementById(num).value){        
        alert("单价为"+price);
        var url="additem?itemid="+document.getElementById(num).name+
          "&num="+document.getElementById(num).value+"&price="+price;
        request.open("GET",url,true); 
        request.onreadystatechange=function(){                   //回调函数
            if(request.readyState == 4){
                if(request.status == 200){            
            var text=eval('('+request.responseText+')');         //动态操作dom元素
            alert("你已购买"+text.name);
            var newtr=document.createElement("tr");
            var td1=document.createElement("td");
            td1.appendChild(document.createTextNode(text.name));
            newtr.appendChild(td1);
            var td2=document.createElement("td");
            td2.appendChild(document.createTextNode(text.num))
            newtr.appendChild(td2);
            var td3=document.createElement("td");
            td3.appendChild(document.createTextNode(text.price))
            newtr.appendChild(td3);
            var td4=document.createElement("td");
            td4.appendChild(document.createTextNode(text.sum))
            newtr.appendChild(td4);
            document.getElementById("listtable").appendChild(newtr);
                } }
      }//回调结束
       request.send(null);
       if(comfirm("是否查看购物车？")){
           shoplist()
       }
   }else{
         alert("请输入购买数量！");
         return null;
      }
    }
   </script>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1 align="center">欢迎购物</h1>
        <div align="center" id="shop">
            <input type="button"  value="查看购物车" onclick="shoplist()"><br>                     
          <table border="1">
              <tr><th>商品名称</th><th>单价</th><th>购买数量</th><th>添加至购物车</th></tr>
              <tr>
              <td>面包</td><td>1</td>
              <td><input type="text" name="bread" id="num1"></td>
              <td>
                  <input type="button" value="添加" onclick="additem('num1',1)"/>
              </td>
              </tr>
              <tr>
              <td>牛奶</td><td>4</td>
              <td><input type="text" name="milk" id="num2"></td>
              <td>
                  <input type="button" value="添加" onclick="additem('num2',4)"/>
              </td>
              </tr>
              <tr>
              <td>香蕉</td><td>6</td>
              <td><input type="text" name="banana" id="num3"></td>
              <td>
                  <input type="button" value="添加" onclick="additem('num3',6)"/>
              </td>
              </tr>
          </table>
        </div>
        <div align="center" id="shoplist" style="display: none;">
            <table id="listtable" border="1">              
              你已经购买了下列产品：
              <tr><th>商品名称</th><th>商品数量</th><th>商品单价</th><th>商品总价</th></tr>
              
          </table>
          <input type="button"  value="继续购物" onclick="shop()"><br>
           <input type="button"  value="付款"/>
        </div>
    </body>
</html>

						