AJAX（Asynchronous JavaScript and XML）是一種用于實現異步刷新的技術。它通過在后臺與服務器進行少量數據交換，實現頁面的局部更新，而不需要重新加載整個頁面。這種方式可以提升網站的用戶體驗，減少對服務器的壓力，并實現實時數據的展示和交互。

舉例來說，在一個電商網站中，當用戶點擊“添加到購物車”按鈕時，頁面不會刷新，而是通過AJAX技術向服務器發送一個異步請求，將商品信息添加到購物車中，并通過AJAX獲取最新的購物車信息，然后將其更新至頁面的購物車圖標上。這樣一來，用戶可以繼續瀏覽其他商品，同時購物車圖標也會實時更新已添加的商品數量。這種實時、局部的更新方式大大提升了用戶的購物體驗。

AJAX的原理是通過JavaScript的XMLHttpRequest對象來實現與服務器的通信。需要注意的是，AJAX并非僅限于使用XML作為數據交換的格式，而是廣義上的一種異步刷新技術。現在的實踐中，JSON已經成為了更常見的數據格式。

下面我們將詳細介紹AJAX的實現原理：

1. 創建XMLHttpRequest對象：

var xhr = new XMLHttpRequest();

2. 打開與服務器的連接：

xhr.open('GET', 'http://example.com/data', true);

在這一步中，我們指定了與服務器通信的方法（GET或POST）、請求的URL以及通信方式是否為異步（true為異步，false為同步）。

3. 設置回調函數：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理從服務器返回的數據
}
};

回調函數會在接收到服務器響應的時候被觸發，我們可以在里面對返回的數據進行處理，例如更新頁面的內容。

4. 發送請求：

xhr.send();

這一步會將請求發送至服務器，并等待服務器響應。在請求發送之后，頁面不會等待服務器響應而阻塞，它會繼續執行其他的操作。

5. 服務器響應：

// 服務器返回的數據示例
{
"name": "Apple iPhone 11",
"price": "$999"
}

服務器接收到請求后，根據請求的處理邏輯返回相應的數據。在這個例子中，服務器返回了一個JSON對象，包含了商品的名稱和價格信息。

6. 更新頁面：

var response = JSON.parse(xhr.responseText);
document.getElementById('product-name').innerText = response.name;
document.getElementById('product-price').innerText = response.price;

在接收到服務器響應后，我們可以解析返回的數據，并將其應用到頁面的相應元素上。這樣一來，頁面的內容就被實時地更新了。

總結起來，AJAX實現異步刷新的原理是通過創建XMLHttpRequest對象與服務器進行通信，并通過回調函數處理服務器返回的數據。將數據應用到頁面的相應元素上，實現局部的實時更新。通過這種方式，我們可以提升網站的用戶體驗，減少對服務器的壓力，并實現實時數據的展示和交互。