AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下更新部分頁面內容的技術。通過AJAX，我們可以從后臺異步獲取商品列表數據，提升用戶體驗，增加網站的交互性和實用性。本文將介紹如何使用AJAX獲取后臺的商品列表數據，并以一個簡單的商品顯示頁面為例進行說明。
首先，我們需要在前端頁面中使用JavaScript編寫AJAX請求的代碼。可以使用原生JavaScript或者各種JavaScript庫（如jQuery）來實現。以下是一個使用原生JavaScript編寫的AJAX請求獲取后臺商品列表數據的例子：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/products', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
// 在這里可以對返回的商品數據進行處理，比如將商品列表顯示在頁面上
}
};
xhr.send();在上面的代碼中，我們使用XMLHttpRequest對象創建一個AJAX請求，并指定請求的URL和請求方式。這里使用的是GET請求，請求的URL是'http://example.com/api/products'。當服務器返回響應時，我們通過onreadystatechange事件監聽器來處理響應數據。當readyState等于4且status等于200時，表示請求成功，我們將返回的商品數據解析為JSON格式，并可以對數據進行進一步處理或顯示。
接下來，讓我們來看看如何在后臺服務器中實現返回商品列表數據的API。假設我們使用Node.js和Express來構建服務器端應用。以下是一個簡單的示例代碼：
var express = require('express');
var app = express();
// 設置允許跨域訪問
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// 商品列表API
app.get('/api/products', function(req, res) {
var products = [
{ id: 1, name: '商品A', price: 10 },
{ id: 2, name: '商品B', price: 20 },
{ id: 3, name: '商品C', price: 30 }
];
res.json(products);
});
// 啟動服務器
app.listen(3000, function() {
console.log('服務器已啟動，監聽端口3000');
});在上面的代碼中，我們使用Express框架創建了一個簡單的服務器應用。首先，我們使用app.use中間件設置允許跨域訪問，以便前端頁面可以跨域請求該API。然后，我們定義了一個'/api/products'的GET路由，當請求該路由時，服務器會返回一個包含了三個商品對象的JSON數組。
現在，我們已經完成了前端和后臺的代碼，接下來我們可以在一個HTML頁面中引入前端的AJAX代碼，通過AJAX請求后臺的商品列表數據，并在頁面上展示。以下是一個簡單的展示商品列表的HTML頁面：
<!DOCTYPE html>
<html>
<head>
<title>商品列表</title>
</head>
<body>
<h1>商品列表</h1>
<ul id="product-list"></ul>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/products', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
var productList = document.getElementById('product-list');
products.forEach(function(product) {
var li = document.createElement('li');
li.textContent = product.name + ' - ￥' + product.price;
productList.appendChild(li);
});
}
};
xhr.send();
</script>
</body>
</html>在上面的代碼中，我們使用了一個無序列表（ul）來展示商品列表，該列表的ID為'product-list'。通過JavaScript代碼，我們獲取返回的商品數據，遍歷商品數組，并將每個商品的名稱和價格顯示為li元素的文本內容，并將li元素追加到商品列表中（ul元素）。
通過使用AJAX技術，我們可以實現在不刷新整個頁面的情況下，異步獲取后臺的商品列表數據，并將數據實時顯示在前端頁面上。這種方式能夠提升用戶體驗，增加網站的交互性和實用性。希望本文所提供的示例代碼和說明能夠對讀者理解和應用AJAX獲取后臺商品列表數據有所幫助。