AJAX（Asynchronous JavaScript and XML）是一種在無需頁面刷新的情況下發送請求、獲取數據和更新頁面的技術。它通過JavaScript與服務器進行異步通信，從而使用戶能夠在不中斷當前頁面的情況下獲取新數據。在這篇文章中，我們將探討如何使用AJAX將數據發送到Java Servlet，并且通過一些實例來詳細說明。
發送GET請求
首先，我們來看一個簡單的例子：我們有一個文本框和一個按鈕，當用戶輸入一段文本并點擊按鈕時，將發送一個GET請求到Servlet，并將文本框中的值作為參數傳遞給Servlet。下面是HTML代碼：
<input type="text" id="textValue" /> <button onclick="sendRequest()">發送請求</button>
接下來，我們編寫JavaScript函數來處理發送請求的過程：
function sendRequest() {
var inputValue = document.getElementById("textValue").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "servletName?param=" + inputValue, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 對返回的數據進行處理
}
};
xhr.send();
}在這段代碼中，我們首先獲取文本框中的值并存儲在變量inputValue中。然后，我們創建一個XMLHttpRequest對象，并使用open方法來指定請求的類型和URL。在這個例子中，我們發送的是GET請求，URL是"servletName"，并將參數作為查詢字符串附加在URL之后。接下來，我們定義了onreadystatechange事件處理程序，它會在請求狀態發生變化時被調用。當請求的狀態為4（完成）且狀態碼為200（成功）時，我們可以獲取到服務器返回的數據，并對其進行處理。最后，我們調用send方法來發送請求。
發送POST請求
除了發送GET請求，我們還可以使用AJAX發送POST請求。接下來我們通過一個例子來說明這一點：假設我們有一個表單，用戶在這個表單中填寫了一些信息并點擊提交按鈕，我們需要將這些信息發送到Servlet。下面是HTML代碼：
<form id="myForm" onsubmit="sendRequest(event)"> <input type="text" name="name" /> <input type="email" name="email" /> <input type="submit" value="提交" /> </form>
同樣，我們編寫JavaScript函數來處理發送請求的過程：
function sendRequest(event) {
event.preventDefault();
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "servletName", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 對返回的數據進行處理
}
};
xhr.send(formData);
}在這個例子中，我們使用了form的submit事件來觸發發起請求的函數，并傳遞了事件對象event作為參數。在函數中，我們首先調用preventDefault方法來阻止表單的默認提交行為。然后，我們獲取到表單元素，并創建了一個FormData對象，將表單數據傳遞給它。接下來，我們創建了一個XMLHttpRequest對象，并使用open方法來指定請求的類型和URL。在這個例子中，我們發送的是POST請求，URL是"servletName"。然后，我們定義了onreadystatechange事件處理程序，它會在請求狀態發生變化時被調用。最后，我們調用send方法來發送請求，并將FormData對象作為參數傳遞給它。
處理服務器響應
當我們發送一個請求到Servlet后，Servlet會處理請求并返回數據。在前面的例子中，我們提到了在onreadystatechange事件處理程序中獲取服務器返回的數據，并對其進行處理。下面是一個處理服務器響應的例子：
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = xhr.responseText;
// 對返回的數據進行處理
} else {
console.log("請求失敗");
}
}
};在這段代碼中，我們首先判斷請求的狀態是否為4（完成），如果是，則繼續進行下一步判斷。如果狀態碼為200（成功），我們可以通過xhr.responseText獲取到服務器返回的數據，并對其進行處理。如果狀態碼不是200，則表示請求失敗。
通過這篇文章，我們學習了如何使用Ajax發送請求到Java Servlet，并使用一些實例進行了詳細說明。無論是發送GET請求還是POST請求，我們都可以通過Ajax與Servlet進行通信，并在不中斷當前頁面的情況下獲取新數據。
參考文獻：