在前端開發中，Ajax 是一種強大的技術，可以實現無刷新加載數據的效果。我們可以使用 Ajax 來顯示指定的數據，從而提升用戶體驗。本文將介紹如何使用 Ajax 來實現這一效果。

假設我們有一個網頁上展示了一些商品信息，當用戶點擊不同的按鈕時，我們希望能夠顯示對應的商品。這時，我們可以通過 Ajax 來實現局部刷新，只更新需要改變的部分。

首先，我們需要使用 JavaScript 來監聽用戶的點擊事件，并發送 Ajax 請求獲取對應的商品信息。下面是一段示例代碼：

document.querySelector('#button1').addEventListener('click', function() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.querySelector('#productContainer').innerHTML = this.responseText;
}
};
xhttp.open('GET', 'getProduct1.php', true);
xhttp.send();
});

在上述代碼中，我們首先通過querySelector方法選擇了按鈕元素，并使用addEventListener方法監聽了按鈕的點擊事件。當用戶點擊按鈕時，會執行回調函數，其中就包含了 Ajax 請求的代碼。

在代碼中，我們創建了一個XMLHttpRequest對象，用于發送 Ajax 請求。通過設置onreadystatechange事件監聽函數，我們可以在請求狀態發生改變時執行對應的處理。當請求狀態為 4 且狀態碼為 200 時，代表請求成功，我們將獲取到的商品信息設置在productContainer元素的內部 HTML 代碼中。

上述示例代碼中的 URL'getProduct1.php'是一個虛擬的示例，你需要根據實際情況替換為對應的地址。在該地址中，你可以通過后端編寫的代碼獲取到要顯示的商品信息，并將其渲染為 HTML 代碼返回給前端頁面。

如果你有多個按鈕需要顯示不同的商品，可以通過類似的方式為每個按鈕添加點擊事件監聽，并在回調函數中分別發送不同的請求。例如：

document.querySelector('#button1').addEventListener('click', function() {
// 發送請求獲取商品1的信息
});
document.querySelector('#button2').addEventListener('click', function() {
// 發送請求獲取商品2的信息
});

通過上述的代碼，當用戶點擊按鈕1時，會發送對應的請求來獲取商品1的信息，而點擊按鈕2時則會獲取商品2的信息。我們可以根據實際需求添加更多的按鈕和對應的事件監聽。

通過以上的代碼示例，我們可以發現，使用 Ajax 可以實現無刷新加載指定數據的效果。通過發送不同的 Ajax 請求，我們可以獲取不同的數據，并實時更新到頁面上。這種方式大大提升了用戶體驗，使用戶能夠更快捷地找到自己所需的數據。

總結來說，通過使用 Ajax 技術，我們可以輕松地實現在網頁中顯示指定數據的效果。只需要使用 JavaScript 監聽用戶的點擊事件，并通過發送 Ajax 請求來獲取對應的數據，然后將數據更新到對應的頁面元素中即可。