AJAX 购物车 www.corange.cn修改功能并通过测试
主要功能cookie购物车 添加了cookie保存时间 点击后显示添加到购物车ajax返回添加到购物车同时返回购物车当前产品数量
本例按下「放入购物车」按钮后，会在服务器端执行记录动作，完成后响应消息给到画面上，则，原本「放入购物车」按钮就变成「已加入购物车图」。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="AJAX Asynchronous JavaScript + XML Asynchronous Javascript And XML DOM Document Object Mode CSS CSS2 CSS3" />
<meta name="description" content="AJAX Asynchronous JavaScript + XML Asynchronous Javascript And XML DOM Document Object Mode CSS CSS2 CSS3" />
<meta name="Author" content="Audi" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<link href="font.css" rel="stylesheet" type="text/css" />
<title>AJAX 购物车</title>
<style type="text/css">
input.submit
{
font-size:80%;
padding:5px 2em 0px 2em;
background:url(../images/btnBG.jpg);
border:3px double;
border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
}
input.submit:hover
{
color:#900;
background:url(/images/btnBG2.jpg);
border:3px double;
border-color: #6d5 #5b5 #459455 #5b5;
}
</style>
<script type="text/javascript">
<!--
var xmlHttp;
function createXHR(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlHttp) {
alert('您使用的瀏覽器不支援 XMLHTTP 物件');
return false;
}
}
function sendRequest(url){
createXHR();
xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange=catchResult;
xmlHttp.send(null);
}
function catchResult(){
if (xmlHttp.readyState==4){
s=xmlHttp.responseText;
if (xmlHttp.status == 200) {
document.getElementById(s).innerHTML='<img src="058/btn_cart.gif" width="129" height="32" align="absmiddle" />';
var cart_count = document.getElementById('cart_count');
getCartNumber();
}else{
alert('執行錯誤,代碼:'+xmlHttp.status+'\('+xmlHttp.statusText+'\)');
}
}
}
function init(){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlhttp) {
alert('您使用的瀏覽器不支援 XMLHTTP 物件');
return false;
}
var url='058-getCookies.php?ts='+new Date().getTime();
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 ){
if (xmlhttp.status == 200) {
var bID=xmlhttp.responseText.split(',');
for (var i=0;i<bID.length;i++){
document.getElementById(bID[i]).innerHTML='<img src="058/btn_cart.gif" width="129" height="32" align="absmiddle" />';
var cart_count = document.getElementById('cart_count');
getCartNumber();
}
}else{
alert('執行錯誤,代碼:'+xmlHttp.status+'\('+xmlHttp.statusText+'\)');
}
}
};
xmlhttp.send(null);
//var bID='<%=Request.Cookies("shoppingCart")%>'.split(',');
//
//for (var i=0;i<bID.length;i++){
// document.getElementById(bID[i]).innerHTML='<img src="058/btn_cart.gif" width="129" height="32" align="absmiddle" />';
//}
}
//-->
</script>
</head>
<body onload="init();">
<form method="post" name="prod" >http://www.corange.cn//uploadfiles/0622_14419.rar