近年來，隨著Web應用的發展，頁面的用戶體驗變得越來越重要。一個好的用戶體驗不僅需要頁面加載速度快，還需要避免用戶刷新整個頁面來獲取新數據。在此背景下，Ajax局部刷新頁面數據成為了一種流行的解決方案。本文將重點介紹Ajax局部刷新頁面數據的原理和應用場景，并結合舉例進行詳細說明。

首先，我們來了解一下Ajax的原理。Ajax（Asynchronous JavaScript and XML）是一種通過JavaScript進行異步數據交互的技術。通過Ajax，我們可以在不刷新整個頁面的情況下向服務器發送請求，獲取新的數據，并通過JavaScript動態修改頁面的部分內容。這意味著用戶可以在不中斷當前操作的情況下，獲取最新的數據并更新頁面展示，極大地提升了用戶的體驗。

舉例來說，假設我們正在開發一個電商網站的商品詳情頁。在傳統的開發方式中，當用戶選擇商品顏色或尺寸時，需要刷新整個頁面才能顯示對應的庫存信息和價格。這無疑會引起頁面的閃爍和加載延遲，給用戶帶來不良的體驗。

<!-- 傳統方式 -->
<select id="colorSelector" onchange="changeColor()">
<option value="red">紅色</option>
<option value="blue">藍色</option>
<option value="green">綠色</option>
</select>
<select id="sizeSelector" onchange="changeSize()">
<option value="small">小號</option>
<option value="medium">中號</option>
<option value="large">大號</option>
</select>
<div id="stockInfo">
<span id="stock">庫存：100</span>
<span id="price">價格：100元</span>
</div>
<script>
function changeColor() {
// 模擬發送請求獲取庫存信息和價格
// ...
// 修改頁面顯示
document.getElementById("stock").innerText = "庫存：" + stock;
document.getElementById("price").innerText = "價格：" + price + "元";
}
function changeSize() {
// 模擬發送請求獲取庫存信息和價格
// ...
// 修改頁面顯示
document.getElementById("stock").innerText = "庫存：" + stock;
document.getElementById("price").innerText = "價格：" + price + "元";
}
</script>