Ajax是一種用于創建動態網頁的技術，它允許我們通過JavaScript在后臺與服務器進行數據交互，而不需要刷新整個頁面。這使得我們能夠以更快的速度從服務器中獲取數據并將其展示給用戶。

一個常見的應用場景是從服務器獲取JSON（JavaScript Object Notation）格式的數據。JSON是一種輕量級的數據交換格式，它易于理解和生成，并且可以方便地用于前后端的數據交互。通過Ajax，我們可以使用JavaScript獲取并解析JSON數據，然后利用這些數據進行頁面的更新和渲染。

假設我們正在開發一個在線商城的網站，我們想要從服務器獲取所有產品的信息，并顯示在網頁上。我們可以使用Ajax來完成這個任務。首先，我們需要創建一個用于發送Ajax請求的JavaScript函數，如下所示：

function getProducts() {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求的HTTP方法和URL
xhr.open('GET', '/api/products', true);
// 設置響應的數據格式為JSON
xhr.setRequestHeader('Content-Type', 'application/json');
// 當請求完成時執行的函數
xhr.onload = function() {
if (xhr.status === 200) {
// 將響應的數據解析為JSON對象
var products = JSON.parse(xhr.responseText);
// 在網頁上展示產品信息
displayProducts(products);
} else {
console.error('請求失敗，狀態碼為：' + xhr.status);
}
};
// 發送請求
xhr.send();
}

在上面的代碼中，我們先創建了一個XMLHttpRequest對象，該對象可用于發送和接收數據。然后，我們使用open方法設置請求的HTTP方法為GET，URL為'/api/products'。接下來，我們使用setRequestHeader方法設置請求的數據格式為JSON。在請求完成后的回調函數中，我們首先檢查響應的狀態碼是否為200，表示請求成功。如果成功，我們使用JSON.parse方法將響應的文本解析為JSON對象，然后調用displayProducts函數來展示產品信息。如果請求失敗，則打印錯誤消息。

接下來，我們需要編寫displayProducts函數來展示產品信息：

function displayProducts(products) {
// 將產品信息添加到網頁中
var container = document.getElementById('product-container');
for (var i = 0; i< products.length; i++) {
var product = products[i];
var div = document.createElement('div');
div.textContent = product.name + ' - ' + product.price;
container.appendChild(div);
}
}

在上面的代碼中，我們首先獲取一個用于容納產品信息的DOM元素，通過getElementById方法。然后，我們遍歷產品列表，并為每個產品創建一個