在現代Web應用程序中，動態數據交互和頁面無刷新更新已經成為一種常見的需求。為了實現這樣的功能，開發人員通常會使用AJAX（Asynchronous JavaScript and XML）技術。AJAX通過使用JavaScript和XMLHttpRequest對象，使得在Web應用程序中能夠異步地向服務器發送請求和接收響應，從而實現頁面的無刷新更新。

在一個典型的場景中，假設有一個電子商務網站，其中有一個商品詳情頁面，用戶可以選擇不同的商品規格，并點擊"加入購物車"按鈕將商品加入購物車。為了避免頁面的重新加載，我們可以使用AJAX技術將商品添加到購物車，并通過異步方式更新購物車的數量。

// 前端代碼示例
function addToCart(productId) {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 處理服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新購物車數量
document.getElementById('cartCount').innerHTML = xhr.responseText;
}
}
// 發送AJAX請求
xhr.open('POST', '/addToCart', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('productId=' + productId);
}

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象xhr，然后通過設置xhr.onreadystatechange函數來處理服務器的響應。當xhr.readyState為4（即響應已完成）并且xhr.status為200（即響應成功）時，我們更新了購物車數量。接下來，我們通過xhr.open方法指定了請求的方法（POST）和請求的URL（/addToCart），并通過xhr.setRequestHeader方法設置請求頭信息。最后，我們使用xhr.send方法發送了一個包含商品ID的POST請求。

在服務器端，我們可以使用Java Servlet來處理這個POST請求，并將商品添加到購物車中：

// 后端代碼示例
@WebServlet("/addToCart")
public class AddToCartServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 從請求中獲取商品ID
String productId = request.getParameter("productId");
// 將商品添加到購物車中
Cart cart = getCartFromSession(request.getSession());
cart.addProduct(productId);
// 將購物車中的商品數量作為響應返回給前端
response.getWriter().write(String.valueOf(cart.getProductCount()));
}
private Cart getCartFromSession(HttpSession session) {
Cart cart = (Cart) session.getAttribute("cart");
if (cart == null) {
cart = new Cart();
session.setAttribute("cart", cart);
}
return cart;
}
}

在這段代碼中，我們首先使用@WebServlet注解來指定Servlet的URL為"/addToCart"，當前后端代碼的映射關系就建立起來了。在doPost方法中，我們通過request.getParameter方法獲取了前端發送的商品ID，并將該商品添加到購物車中。接著，我們通過response.getWriter().write方法將購物車中的商品數量作為響應返回給前端。

通過以上的前后端代碼示例，我們可以看到，通過AJAX和Servlet的交互過程非常簡潔和高效。前端通過XMLHttpRequest對象發送請求，后端通過HttpServletRequest對象接收請求，然后將響應內容通過HttpServletResponse對象發送給前端。

總的來說，AJAX和Servlet的交互使得Web應用程序能夠以無刷新的方式更新頁面內容，提升了用戶體驗。無論是購物車的更新，還是其他需要動態交互的場景，AJAX和Servlet的組合都能提供良好的解決方案。