本文将讨论使用Ajax与Spring MVC进行交互的实例。Ajax（Asynchronous JavaScript and XML）是一种在没有重新加载整个页面的情况下，通过后台与服务器进行数据交互的技术。Spring MVC是一种基于MVC模式的轻量级Java框架，用于构建Web应用程序。

假设我们正在开发一个在线商城，我们希望在用户浏览商品时，能够实时获取商品的库存量。传统的方式是用户点击商品，然后等待整个页面重新加载，这样用户体验不佳。我们可以使用Ajax与Spring MVC来改进这个过程。

首先，我们需要在前端页面中引入jQuery库，以便使用其中的Ajax方法。假设我们在商品列表页面中有如下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".item").click(function(){
var productId = $(this).attr("data-id");
$.ajax({
url: "/product/checkStock",
type: "GET",
data: {productId: productId},
success: function(response){
$("#stock").text(response.stock);
}
});
});
});
</script>
<div class="item" data-id="1">商品1</div>
<div class="item" data-id="2">商品2</div>
<p>库存：<span id="stock"></span></p>

在上述代码中，我们通过jQuery选择器将所有商品列表项的class设置为"item"，并在每个列表项中设置一个自定义属性"data-id"，用于存储商品ID。当用户点击任意商品时，jQuery会捕获点击事件，并获取该商品的ID。然后，我们通过Ajax向后台发送GET请求，请求的URL是"/product/checkStock"。请求中包含商品ID作为参数，后台会根据商品ID查询库存量。一旦服务器返回响应，成功回调函数会将库存量更新到页面中。

下面是Spring MVC中对应的Controller代码：

@Controller
@RequestMapping("/product")
public class ProductController {
@Autowired
private ProductService productService;
@GetMapping("/checkStock")
@ResponseBody
public ResponseEntity<Map<String, Integer>> checkStock(@RequestParam Long productId) {
int stock = productService.getStock(productId);
Map<String, Integer> response = new HashMap<>();
response.put("stock", stock);
return ResponseEntity.ok(response);
}
}

在上述代码中，我们使用了Spring MVC的@Controller和@RequestMapping注解来将请求映射到checkStock()方法上。该方法使用@GetMapping和@RequestParam注解来接收GET请求，并获取前端Ajax传递的商品ID。通过调用ProductService中的方法，我们可以得到商品的库存量，并将结果封装到Map中作为JSON响应返回给前端页面。

总结一下，通过使用Ajax与Spring MVC，我们实现了在用户浏览商品时实时获取库存量的功能，而无需重新加载整个页面。这样不仅提升了用户体验，还减少了网络流量和服务器资源的消耗。