在 WEB 開發中，經常會遇到需要頁面動態刷新的需求。傳統的頁面刷新會導致整個頁面重新加載，這可能會給用戶帶來不好的體驗，所以需要一種方法可以實現局部刷新。Ajax（Asynchronous JavaScript and XML）就是一種可以實現局部刷新的技術。

使用 Ajax 技術實現局部刷新，可以在不重新加載整個頁面的情況下，通過與服務器進行異步通信，將新的數據或頁面部分，以 JSON、XML 或 HTML 的形式更新到當前頁面，從而使用戶能夠獲得更好的交互體驗。

例如，我們假設有一個在線商城的商品列表頁面。用戶可以通過點擊某個分類，來獲取該分類下的商品列表。傳統的做法是每次用戶點擊分類時，都會重新加載整個頁面，然后再向服務器請求獲取對應分類的商品列表數據。而使用 Ajax 技術可以實現局部刷新，只更新商品列表部分，從而提升用戶的使用體驗和頁面加載速度。

$.ajax({
url: "get-product-list.php",
type: "GET",
data: {
category: "electronics"
},
success: function(response) {
// 更新商品列表部分
$("#product-list").html(response);
},
error: function() {
console.log("Failed to get product list.");
}
});

在上面的示例中，我們使用了 jQuery 的 $.ajax() 方法來發送了一個 GET 請求，使用 data 參數傳遞了要獲取的分類信息。在服務器端接收到請求后，根據分類信息獲取對應的商品列表數據，并將其以 HTML 的形式返回給客戶端。客戶端在 success 回調函數中接收到服務器返回的響應數據后，使用 $("#product-list").html(response) 方法將返回的 HTML 內容更新到頁面中的商品列表部分。

Ajax 的局部刷新功能不僅局限于更新頁面的一部分內容，還可以實現其他更復雜的功能。例如，可以在用戶填寫表單時，不刷新整個頁面，而是只發送表單數據給服務器進行驗證，然后根據服務器的響應結果，動態更新頁面上的錯誤提示信息。這種方式可以避免用戶填寫一長串表單后由于驗證失敗而造成的重新填寫。

$("#submit-btn").click(function() {
var formData = {
username: $("#username").val(),
password: $("#password").val(),
};
$.ajax({
url: "validate-form.php",
type: "POST",
data: formData,
success: function(response) {
// 更新錯誤提示信息
$("#error-message").html(response);
},
error: function() {
console.log("Failed to validate form.");
}
});
});

在上面的示例中，我們通過點擊 submit 按鈕觸發了一個事件處理函數。在事件處理函數中，我們獲取了用戶名和密碼的值，并將它們封裝成一個對象 formData。然后使用 $.ajax() 方法向服務器發送了一個 POST 請求，將表單數據作為 data 參數傳遞給服務器。在服務器端收到請求后進行驗證，并將驗證結果以 HTML 的形式返回給客戶端。客戶端在 success 回調函數中接收到服務器返回的響應數據后，使用 $("#error-message").html(response) 方法將返回的 HTML 內容更新到頁面中的錯誤提示信息部分。

總之，Ajax 技術可以實現局部刷新，提升用戶體驗。通過與服務器進行異步通信，可以在不重新加載整個頁面的情況下，動態更新頁面的一部分內容。無論是更新商品列表、顯示錯誤提示信息，還是其他更復雜的功能，使用 Ajax 技術可以使 WEB 應用程序更加靈活和高效。