AJAX（Asynchronous JavaScript and XML）是一種用于在無需刷新整個頁面的情況下，在后臺與服務器進行數據交互并獲取數據的技術。通過AJAX，我們可以在不刷新頁面的情況下，實時更新頁面的內容，提供更加流暢和用戶友好的體驗。

假設我們有一個商品列表頁面，用戶點擊其中一個商品，希望能夠獲取該商品的詳細信息并展示在頁面上。使用傳統的方式，在用戶點擊商品后，頁面將會刷新，跳轉到該商品的詳情頁面，這樣會造成頁面的重新加載和用戶不必要的等待時間。使用AJAX，我們可以通過異步的方式，動態地獲取商品的詳細信息，并將其展示在已有的頁面上，提供更好的用戶體驗。

在這個例子中，我們假設我們的商品詳情數據是以JSON格式存儲在服務器端。我們需要使用AJAX來異步獲取這些數據，并將其展示在商品列表頁面上。首先，我們需要創建一個XMLHttpRequest對象，該對象用于發起HTTP請求，獲取服務器端的數據。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/product/123', true);
xhr.send();

上述代碼中，我們使用了GET方法發起一個HTTP請求，請求的URL是"/product/123"，這是一個假設的商品詳情的URL。發送請求的時候，我們將第三個參數設置為true，表示使用異步的方式發送請求。這樣，在請求發送之后，我們可以執行其他的JavaScript代碼，而無需等待服務器返回響應。

接下來，我們需要監聽XMLHttpRequest對象的readystatechange事件，以便在數據返回后對返回的數據進行處理和展示。

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var product = JSON.parse(xhr.responseText);
// 在頁面上展示商品詳情
document.getElementById('product-details').innerHTML = '商品名稱：' + product.name + '，價格：' + product.price + '，描述：' + product.description;
} else {
console.error('請求出錯，狀態碼：' + xhr.status);
}
}
};

在上述代碼中，我們首先檢查XMLHttpRequest對象的readyState屬性的值，如果該值等于XMLHttpRequest.DONE，表示請求已經完成。然后，我們檢查XMLHttpRequest對象的status屬性，如果該值等于200，表示請求成功。在成功的情況下，我們可以使用JSON.parse函數將服務器返回的JSON字符串解析為JavaScript對象，并將商品的詳細信息展示在頁面上。

通過使用AJAX，我們可以以異步的方式獲取商品的詳細信息，并將其展示在已有的頁面上，提供更好的用戶體驗。相較于傳統的方式，使用AJAX可以減少頁面的刷新和等待時間，提高用戶的滿意度。無論是在商品詳情頁面還是在其他場景中，AJAX的應用都可以有助于改善網頁的交互和性能。