Ajax異步加載是一種常用的前端技術，可以極大地提升用戶體驗。在使用Spring MVC框架的Web應用中，結合Ajax異步加載可以實現動態刷新頁面內容的功能，從而減少了不必要的數據傳輸，提高了響應速度。本文將介紹如何在Spring MVC中使用Ajax異步加載，并通過舉例來說明其實際應用。

考慮一個電商網站的商品展示頁面，其中有一個商品列表，需要在用戶選擇不同的條件時進行動態刷新。傳統的做法是通過提交表單，在后臺重新生成整個頁面并返回給前端，這樣會產生大量的冗余數據傳輸，同時也會增加服務器的負擔。現在我們可以使用Ajax異步加載的方式，只更新需要改變的部分，提高頁面的加載速度和用戶體驗。

<script>
function refreshProductList() {
$.ajax({
url: "/product/list",
type: "GET",
data: {
category: $("#category").val(),
priceRange: $("#priceRange").val()
},
success: function(data) {
$("#productList").html(data);
}
});
}
$(document).ready(function() {
$("#category, #priceRange").change(function() {
refreshProductList();
});
});
</script>

在上述代碼中，我們使用了jQuery的ajax方法來發送GET請求，獲取產品列表的HTML內容，并將其插入id為productList的元素中。在頁面加載完成后，我們通過監聽類別（category）和價格范圍（priceRange）的變化來調用refreshProductList函數，實現動態刷新。

在后臺，我們使用Spring MVC來處理請求，并根據條件查詢數據庫，返回符合條件的產品列表。

@RequestMapping(value = "/product/list", method = RequestMethod.GET)
public String getProductList(
@RequestParam(required = false) String category,
@RequestParam(required = false) String priceRange,
Model model) {
List<Product> productList = productService.getProductList(category, priceRange);
model.addAttribute("productList", productList);
return "productList";
}

在上述代碼中，我們使用了Spring MVC的@RequestMapping注解來指定對應的URL和請求方式。通過@RequestParam注解來獲取前端傳遞的參數，然后根據條件查詢數據庫，將查詢結果封裝到Model中，并指定邏輯視圖名為productList。這樣，Spring MVC會自動將productList映射到對應的視圖文件。

在視圖文件中，我們只需要使用Thymeleaf等模版引擎將查詢結果進行展示即可。

<table>
<tr th:each="product : ${productList}">
<td th:text="${product.name}"></td>
<td th:text="${product.price}"></td>
</tr>
</table>

通過以上的步驟，我們實現了基于Ajax異步加載的動態刷新商品列表功能。無論是用戶改變了類別還是價格范圍，都可以通過異步請求后臺獲取最新的商品列表，并將其展示給用戶，而無需刷新整個頁面。

除了商品列表的動態刷新，Ajax異步加載在Spring MVC中還可以應用于許多其他場景，比如：用戶評論的追加、購物車的實時更新、用戶個人信息的修改等等。通過合理地運用Ajax異步加載，可以有效地提升用戶體驗，提高Web應用的性能。

綜上所述，Ajax異步加載在Spring MVC中的應用非常廣泛且有力地推動了Web應用的發展。通過舉例說明，我們了解了如何使用Ajax異步加載實現動態刷新商品列表的功能。希望本文能夠對你理解和應用Ajax異步加載有所幫助。