AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下更新部分頁面內容的技術。它通過在后臺與服務器進行少量的數據交換，實現異步加載和更新頁面的目的。
AJAX 可以在不刷新整個頁面的情況下加載新的內容，這在許多場景中非常有用。例如，當用戶填寫一個表單并點擊提交按鈕時，AJAX 可以幫助我們在不刷新整個頁面的情況下驗證表單內容，并在同一個頁面下顯示驗證結果。
// 例如，以下是使用 AJAX 在同一個 JSP 頁面上進行表單驗證的示例
function validateForm() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("validationResult").innerHTML = this.responseText;
}
};
xhr.open("POST", "formValidation.jsp", true);
xhr.send(formData);
}在上面的代碼中，當用戶點擊 submit 按鈕時，JavaScript 函數 validateForm() 將使用 XMLHttpRequest 對象發送 POST 請求到一個名為 formValidation.jsp 的 JSP 頁面。該頁面將處理表單驗證邏輯，并返回驗證結果。在 JavaScript 回調函數中，我們將通過 innerHTML 屬性將驗證結果顯示在頁面上。
除了表單驗證外，AJAX 還可以用于加載動態內容或獲取服務器數據。例如，我們可以使用 AJAX 來加載一個聊天應用中的新消息，而不需要刷新整個聊天界面。
// 以下是使用 AJAX 加載新的聊天消息的示例
function loadNewMessages() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var messages = JSON.parse(this.responseText);
for (var i = 0; i< messages.length; i++) {
var message = messages[i];
// 在頁面上添加新消息
}
}
};
xhr.open("GET", "getNewMessages.jsp", true);
xhr.send();
}
// 每隔一段時間調用函數以加載新消息
setInterval(function() {
loadNewMessages();
}, 5000);以上代碼示例定義了一個 JavaScript 函數 loadNewMessages()，它會通過 AJAX 定期發送 GET 請求到一個名為 getNewMessages.jsp 的 JSP 頁面，并獲取新的聊天消息。在回調函數中，我們解析服務器返回的消息數據，并將其添加到聊天界面中。
綜上所述，AJAX 在 JSP 頁面中的應用不僅可以實現表單驗證，還可以加載動態內容和從服務器獲取數據。它提供了一種更流暢和高效的用戶體驗方式，使得網站和應用程序變得更加靈活和互動。