AJAX是一種前端技術，用于實現兩個頁面之間的數據交互。它可以讓用戶在不刷新整個頁面的情況下，動態獲取數據和更新頁面內容。

舉一個例子來解釋AJAX的工作原理。假設我們正在開發一個電商網站，并且有一個商品列表頁面和一個購物車頁面。當用戶在商品列表頁面上點擊“添加到購物車”按鈕時，我們可以使用AJAX來實現將商品添加到購物車頁面的效果。在點擊按鈕時，AJAX會通過HTTP請求將商品ID發送到后臺服務器，并在服務器端處理添加到購物車的邏輯。然后，服務器會返回一個響應，告訴我們添加到購物車是否成功。在接收到響應后，我們可以使用JavaScript代碼動態地更新購物車頁面，將新添加的商品顯示在購物車中。

為了實現這個功能，我們需要在前端頁面中使用AJAX的核心對象——XMLHttpRequest（XHR）。這個對象使我們能夠發送HTTP請求，并在接收到響應后執行相應的操作。下面是一個使用XHR對象進行數據交互的簡單示例：

// 創建一個XHR對象
var xhr = new XMLHttpRequest();
// 配置HTTP請求的類型、URL和異步屬性
xhr.open('POST', 'http://www.example.com/add-to-cart', true);
// 設置請求頭部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 注冊事件處理程序，當接收到響應時執行相應的操作
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 更新購物車頁面
var response = JSON.parse(xhr.responseText);
var cartItems = response.cartItems;
for (var i = 0; i< cartItems.length; i++) {
// 插入購物車商品
document.getElementById('cart').innerHTML += '<div>' + cartItems[i].name + '</div>';
}
} else {
console.error('AJAX請求失敗：' + xhr.status);
}
}
};
// 發送HTTP請求
xhr.send('productId=12345');

以上代碼中，我們首先創建了一個XHR對象，并使用open()方法配置了一個POST請求，指定了請求的URL、異步屬性和請求頭部信息。然后，通過設置onreadystatechange事件處理程序的回調函數，我們可以在接收到服務器響應時執行相應的操作。在響應處理函數中，我們首先檢查HTTP請求的狀態是否為DONE（即請求已完成），然后再根據HTTP狀態碼判斷請求是否成功。最后，我們可以使用響應數據來更新頁面內容。

AJAX的優勢不僅在于它可以實現頁面內容的動態更新，還可以減少不必要的數據傳輸。例如，在上述的例子中，當用戶點擊“添加到購物車”按鈕時，我們只需要將商品ID發送給服務器，而不是整個商品信息。這樣可以大大減少網絡傳輸的數據量，提高網頁加載的速度和用戶體驗。

總的來說，AJAX技術給我們帶來了更加靈活和交互性的網頁應用。通過使用XHR對象，我們可以實現兩個頁面之間的數據交互，從而實現動態更新頁面內容和提升用戶體驗的效果。