AJAX (Asynchronous JavaScript and XML) 是一種用于創建交互式網頁應用程序的技術，它可以實現無需刷新整個頁面的數據交換。通過使用 JSON (JavaScript Object Notation) 格式的數據，我們可以輕松地將數據從服務器傳遞到客戶端，并相應地更新網頁內容。本文將介紹如何使用 AJAX 和 JSON 實現頁面數據的動態刷新。

假設我們有一個簡單的網頁，顯示一個電商平臺上的商品列表。當用戶瀏覽商品列表時，我們希望能夠實時獲取最新的商品信息，并在網頁上進行更新。在傳統的方式中，每當用戶瀏覽到下一頁，點擊刷新按鈕，或者發起搜索請求時，整個頁面都會重新加載。然而，使用 AJAX 和 JSON，我們可以在后臺請求最新的商品數據，并通過 JavaScript 動態更新網頁內容，而無需刷新整個頁面。

// 網頁上的 JavaScript 代碼
function fetchProducts() {
// 使用 AJAX 發起請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 從服務器返回的 JSON 數據
var products = JSON.parse(xhr.responseText);
// 根據新的商品數據更新網頁內容
var productList = document.getElementById("productList");
productList.innerHTML = "";
for (var i = 0; i< products.length; i++) {
var productItem = document.createElement("li");
productItem.textContent = products[i].name;
productList.appendChild(productItem);
}
}
};
xhr.open("GET", "/api/products", true);
xhr.send();
}

上述代碼演示了如何使用 AJAX 和 JSON 實現刷新網頁內容。首先，我們定義了一個名為 fetchProducts 的 JavaScript 函數，用來獲取最新的商品信息。然后，我們使用 XMLHttpRequest 對象創建一個 AJAX 請求，并指定回調函數僅在請求完成并成功時被調用。在回調函數中，我們解析從服務器返回的 JSON 數據，并使用 JavaScript 動態更新網頁內容。

接下來，我們需要在服務器端提供一個能夠返回最新商品數據的 API。使用 Node.js 和 Express 框架，我們可以輕松地創建一個簡單的 API 端點。

// 服務器端的 JavaScript 代碼
const express = require("express");
const app = express();
app.get("/api/products", (req, res) =>{
// 從數據庫或其他數據源中獲取最新的商品數據
const products = [
{ name: "商品A", price: 10 },
{ name: "商品B", price: 20 },
{ name: "商品C", price: 30 }
];
// 將商品數據以 JSON 格式發送給客戶端
res.json(products);
});
app.listen(3000, () =>{
console.log("服務器正在監聽端口 3000");
});

上述代碼展示了一個基本的 Express 應用程序，它提供了一個名為 /api/products 的 GET 請求處理程序。在請求處理程序中，我們可以從數據庫或其他數據源中獲取最新的商品數據，并將其以 JSON 格式發送給客戶端。

最后，在網頁上使用 fetchProducts 函數，我們可以在前端部分發起 AJAX 請求，從服務器獲取最新的商品數據，并相應地更新網頁內容。與傳統的方式相比，我們實現了一種更加流暢和高效的頁面刷新方式。

總結而言，使用 AJAX 和 JSON 可以實現網頁數據的動態刷新，無需刷新整個頁面。通過從服務器獲取最新的數據，并使用 JavaScript 動態更新網頁內容，我們可以提供更加流暢和高效的用戶體驗。無論是在電商平臺上顯示最新的商品信息，還是在社交媒體上實時獲取最新的帖子，AJAX 和 JSON 都在現代網頁開發中扮演著重要的角色。