Ajax（Asynchronous JavaScript and XML）是一種在網頁中實現實時數據交互的技術，能夠在不刷新整個頁面的情況下更新部分頁面內容。而JSP（JavaServer Pages）是一種使用Java編寫的動態網頁技術。結合兩者，我們可以通過Ajax和JSP來實現頁面的部分刷新，提升用戶體驗。
舉個例子來說明，假設我們有一個在線聊天室的網頁，用戶可以在網頁上發送消息并接收其他用戶的消息。當有新的消息發送時，我們希望能夠實時地將新消息顯示在網頁上，而不需要用戶主動刷新頁面。這個時候，我們就可以使用Ajax和JSP來實現局部刷新。
首先，我們可以編寫一個JSP頁面來顯示聊天消息。在頁面加載時，我們通過JSP腳本從服務器獲取最新的聊天記錄，并將其顯示在頁面上。為了實現實時更新，我們可以使用定時器來定期向服務器請求更新的聊天記錄。通過Ajax技術，我們可以使用JavaScript發送異步請求到服務器，并將服務器返回的數據更新到頁面中的相應區域。
// JSP頁面代碼示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>聊天室</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
// 定時器，每隔1秒請求最新聊天記錄
setInterval(function() {
$.ajax({
url: "getChatRecords.jsp",
success: function(data) {
// 更新頁面中的聊天記錄區域
$("#chatRecords").html(data);
}
});
}, 1000);
</script>
</head>
<body>
<h1>聊天室</h1>
<div id="chatRecords">
<%-- 這里顯示最新的聊天記錄 --%>
<%@ include file="getChatRecords.jsp" %>
</div>
<form action="sendChatMessage.jsp" method="post">
<input type="text" name="message" placeholder="請輸入消息" />
<input type="submit" value="發送" />
</form>
</body>
</html>在上面的示例代碼中，我們使用了jQuery的ajax函數來發送異步請求。每隔1秒，該函數會向服務器發送一個請求，請求的URL是getChatRecords.jsp。服務器返回的數據會通過success回調函數傳遞給JavaScript，并在頁面的chatRecords區域進行更新。
接下來，我們來看一下getChatRecords.jsp的代碼。該JSP頁面獲取最新的聊天記錄，并將其輸出到頁面上。
// getChatRecords.jsp代碼示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 這里從數據庫或文件中獲取最新的聊天記錄 --%>
<% String chatRecords = getLatestChatRecords(); %>
<% if (chatRecords != null) { %>
<%= chatRecords %>
<% } %>在上面的代碼中，我們通過調用getLatestChatRecords()方法從數據庫或文件中獲取最新的聊天記錄，并將其存儲在一個字符串變量chatRecords中。然后，我們使用JSP的<%= %>標簽將變量的值輸出到頁面上。
通過以上的代碼示例，我們可以實現一個簡單的在線聊天室，能夠實時地獲取最新的聊天記錄并更新到頁面中。這樣，用戶就能夠在不刷新整個頁面的情況下，獲取到其他用戶發送的消息，并實時顯示在自己的頁面上。
總結起來，通過使用Ajax和JSP結合的方式，我們可以實現頁面的部分刷新，提升用戶體驗。無論是聊天室、新聞網站還是在線商城，都可以利用這種技術來實現動態的頁面更新，使用戶能夠更加方便、快速地獲取到最新的信息。