使用AJAX构建电子商务平台：商品展示、购物车等

<!-- 商品展示容器 -->
<div id="productContainer">
  <!-- 商品列表 -->
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>商品标题 1</h3>
    <p>商品描述...</p>
    <button onclick="addToCart(1)">加入购物车</button>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>商品标题 2</h3>
    <p>商品描述...</p>
    <button onclick="addToCart(2)">加入购物车</button>
  </div>
  <!-- 更多商品 -->
</div>

<script>
  // 获取商品展示容器
  var productContainer = document.getElementById('productContainer');

  // 异步加载商品数据
  function loadProducts() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.example.com/api/products', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 解析商品数据并动态更新页面
          var products = JSON.parse(xhr.responseText);
          updateProductList(products);
        } else {
          console.error('获取商品数据失败：', xhr.status);
        }
      }
    };
    xhr.send();
  }

  // 动态更新商品列表
  function updateProductList(products) {
    var productHtml = '';
    products.forEach(function(product) {
      productHtml += `
        <div class="product">
          <img src="${product.image}" alt="${product.title}">
          <h3>${product.title}</h3>
          <p>${product.description}</p>
          <button onclick="addToCart(${product.id})">加入购物车</button>
        </div>
      `;
    });
    productContainer.innerHTML = productHtml;
  }

  // 初始加载一次商品数据
  loadProducts();
</script>

<!-- 购物车容器 -->
<div id="cartContainer">
  <!-- 购物车内容 -->
  <div class="cart-item">
    <img src="product1.jpg" alt="Product 1">
    <h4>商品标题 1</h4>
    <p>数量：2</p>
    <button onclick="removeFromCart(1)">移除</button>
  </div>
  <div class="cart-item">
    <img src="product2.jpg" alt="Product 2">
    <h4>商品标题 2</h4>
    <p>数量：1</p>
    <button onclick="removeFromCart(2)">移除</button>
  </div>
  <!-- 更多购物车内容 -->
</div>

<script>
  // 获取购物车容器
  var cartContainer = document.getElementById('cartContainer');

  // 异步加载购物车数据
  function loadCart() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.example.com/api/cart', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 解析购物车数据并动态更新页面
          var cartItems = JSON.parse(xhr.responseText);
          updateCart(cartItems);
        } else {
          console.error('获取购物车数据失败：', xhr.status);
        }
      }
    };
    xhr.send();
  }

  // 动态更新购物车内容
  function updateCart(cartItems) {
    var cartHtml = '';
    cartItems.forEach(function(cartItem) {
      cartHtml += `
        <div class="cart-item">
          <img src="${cartItem.image}" alt="${cartItem.title}">
          <h4>${cartItem.title}</h4>
          <p>数量：${cartItem.quantity}</p>
          <button onclick="removeFromCart(${cartItem.id})">移除</button>
        </div>
      `;
    });
    cartContainer.innerHTML = cartHtml;
  }

  // 初始加载一次购物车数据
  loadCart();
</script>