在Web開發中，頁面的自動刷新是一項非常重要的功能。傳統的頁面刷新會導致整個頁面內容都重新加載，這對于用戶體驗來說是非常不友好的。而使用Ajax技術可以實現局部頁面的自動刷新，只刷新需要的部分內容，提升了用戶的使用體驗。

舉個例子來說明。假設我們正在開發一個電商網站，用戶可以通過點擊商品列表中的某個商品查看商品的詳細信息。傳統的做法是，當用戶點擊商品時，整個頁面都會重新加載，包括頁面的頭部、導航欄、側邊欄等。這樣的過程比較慢，會給用戶帶來很差的體驗。

<script>
function getProductDetails(productId) {
// 發送Ajax請求獲取商品詳情
$.ajax({
url: "/api/product-details",
method: "GET",
data: { productId: productId },
success: function(response) {
// 將獲取到的商品詳情更新到頁面中
$("#product-details").html(response);
}
});
}
// 假設點擊商品時會觸發該函數
function handleClick(productId) {
getProductDetails(productId);
}
</script>

上述示例中，我們使用了jQuery來發送Ajax請求獲取商品詳情，并將獲取到的數據更新到頁面的#product-details元素中。這樣，當用戶點擊商品時，只有商品詳情部分的內容會被刷新，整個頁面不會重新加載，提升了用戶體驗。通過這種方式，我們可以在不刷新整個頁面的情況下，實現頁面內容的實時更新。

除了向服務器發送請求獲取數據，Ajax還可以用于向服務器發送一些操作的請求，例如更新購物車數量、點贊或取消點贊等。這些操作通常只需要更新頁面的某一小部分內容。

<script>
// 更新購物車數量
function updateCartCount(productCount) {
// 發送Ajax請求更新購物車數量
$.ajax({
url: "/api/update-cart-count",
method: "POST",
data: { productCount: productCount },
success: function(response) {
// 更新頁面顯示的購物車數量
$("#cart-count").text(response);
}
});
}
// 假設點擊“添加到購物車”按鈕時會觸發該函數
function addToCart() {
// 假設獲取到當前購物車數量
var currentCount = parseInt($("#cart-count").text());
// 更新購物車數量
updateCartCount(currentCount + 1);
}
</script>

上述示例中，用戶點擊“添加到購物車”按鈕后，只有購物車數量這一部分內容會被更新。通過Ajax請求，我們向服務器發送了一個操作請求，并將更新后的購物車數量展示在頁面上。通過這種方式，我們可以實現購物車數量的實時更新，而無需刷新整個頁面。

總結來說，Ajax自動刷新局部頁面可以帶來良好的用戶體驗。通過發送Ajax請求獲取數據或向服務器發送操作請求，我們可以實現局部頁面內容的實時更新。這避免了整個頁面的重新加載，提升了用戶的使用體驗。無論是電商網站、社交媒體還是其他Web應用，都可以通過使用Ajax實現局部頁面的自動刷新。