Ajax是一種網頁開發技術，可以在不刷新整個頁面的情況下通過發送異步請求和接收數據來更新部分頁面內容。而Json（JavaScript Object Notation）是一種用于數據交換的輕量級格式。通過將這兩種技術結合起來，我們可以利用Ajax請求Json數據并在網頁上展示出來。這種方式非常適合用于實時更新數據的場景，例如股票行情、天氣預報等。

那么，如何使用Ajax請求Json數據呢？下面我們以一個簡單的實例來說明。

假設我們有一個電商網站，需要在頁面上展示最新的商品信息。為了實現這個功能，我們可以通過Ajax請求獲取商品信息的Json數據，并將其渲染到頁面上。首先，我們需要使用JavaScript創建一個Ajax請求：

var request = new XMLHttpRequest(); // 創建一個新的Ajax請求對象
request.open('GET', '/api/products', true); // 指定請求的方式、地址和是否異步
request.send(); // 發送請求

上述代碼中，我們通過調用XMLHttpRequest對象的open方法指定了請求的方式（GET）、地址（/api/products）和是否異步（true）。然后，通過調用send方法發送請求。接下來，我們需要在服務器端提供一個返回商品信息的API：

// Mockup API
app.get('/api/products', function(req, res) {
var products = [
{ id: 1, name: 'iPhone X', price: 999 },
{ id: 2, name: 'iPad Pro', price: 799 },
{ id: 3, name: 'MacBook Pro', price: 1499 }
];
res.json(products); // 將商品信息以Json格式返回
});

上述代碼中，我們使用Node.js創建一個簡單的API來模擬返回商品信息。在實際開發中，服務器端API的實現方式會根據具體情況而有所不同。最后，我們需要在前端代碼中處理服務器返回的Json數據，并將其展示到網頁上：

request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) { // 請求成功
var products = JSON.parse(request.responseText); // 將返回的Json數據轉換為JavaScript對象
var productList = document.getElementById('product-list');
products.forEach(function(product) {
var listItem = document.createElement('li'); // 創建一個
元素
listItem.textContent = product.name + ' - $' + product.price; // 設置
元素的內容
productList.appendChild(listItem); // 將
元素添加到商品列表中
});
}
};

上述代碼中，我們通過判斷Ajax請求的狀態來確認請求是否成功完成。當請求成功完成（readyState為4，status為200）時，我們通過JSON.parse方法將返回的Json數據轉換為JavaScript對象。接著，我們通過DOM操作創建商品列表（使用

和
• 元素）、設置每個商品的內容，并將其添加到商品列表中。最終，我們可以在網頁上看到最新的商品信息。

  總結來說，通過結合Ajax、Json和API，我們可以實現實時展示最新數據的功能。無論是電商網站、新聞網站還是社交媒體平臺，都可以通過這種方式來獲取并展示最新的信息。通過Ajax請求Json數據，我們可以避免刷新整個頁面，提升用戶體驗，同時也能減輕服務器的負擔。