在web開發中，局部分頁刷新是一項非常重要的技術，它使得網頁能夠動態地更新局部內容，而不需要重新加載整個頁面。其中，ajax（Asynchronous JavaScript and XML）是一種常用的技術，可以實現局部分頁刷新的效果。
舉例來說，假設我們正在開發一個電商網站，其中有一個商品展示頁面，用戶可以根據不同的商品分類進行篩選。傳統的做法是每次用戶選擇不同的分類時，都需要重新加載整個頁面以顯示相應的商品列表。然而，使用ajax可以使得頁面只更新商品列表部分的內容，而其它部分（如導航欄、頁腳等）保持不變，提升了用戶的使用體驗。
實現局部分頁刷新的過程如下：
1. 綁定事件：監聽用戶的操作事件，例如點擊按鈕或選擇選項等。 2. 發送請求：根據用戶的操作，使用ajax發送請求到后臺服務器。 3. 處理響應：后臺服務器根據請求，返回相應的數據。 4. 更新頁面：前端接收到后臺返回的數據后，使用JavaScript或jQuery等技術，將數據更新到相應的DOM元素中，實現局部刷新效果。
以下是一個簡單的例子來演示如何使用ajax實現局部分頁刷新：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="product-list">
<h2>商品列表</h2>
<ul>
<li>商品A</li>
<li>商品B</li>
<li>商品C</li>
</ul>
</div>
<div id="category">
<h2>商品分類</h2>
<select id="category-select">
<option value="all">全部</option>
<option value="electronics">電子產品</option>
<option value="clothing">服裝</option>
</select>
<button id="filter-btn">篩選</button>
</div>
<script>
$(document).ready(function(){
$('#filter-btn').click(function(){
var selectedCategory = $('#category-select').val(); // 獲取用戶選擇的分類
$.ajax({
url: '/products', // 后臺接口地址
type: 'GET',
data: {category: selectedCategory}, // 發送給后臺的數據，例如選擇的分類
success: function(response){
$('#product-list ul').empty(); // 清空商品列表
$.each(response, function(index, product){ // 遍歷返回的商品數據
$('#product-list ul').append('<li>' + product.name + '</li>'); // 將商品添加到列表中
});
},
error: function(xhr, status, error){
console.log(error);
}
});
});
});
</script>
</body>
</html>在上述示例中，當用戶點擊篩選按鈕后，通過ajax向后臺發送請求，并且傳遞了用戶選擇的商品分類。后臺服務器根據請求的數據進行處理，返回相應的商品列表數據。前端接收到后臺返回的數據后，使用$.each()方法遍歷數據并動態地添加到#product-list的ul元素中，實現局部刷新效果。
總結來說，ajax是一種強大的技術，可以實現局部分頁刷新效果。通過監聽用戶的操作，向后臺發送請求，前端能夠動態地更新局部內容，從而提升用戶體驗。通過上述的例子，我們可以開始使用ajax來實現局部分頁刷新，讓網頁具有更好的交互性與響應性。