AJAX是一種用于在不刷新整個頁面的情況下，通過JavaScript與服務器進行數據交互的技術。它可以用于獲取表單數據，實現動態更新頁面的效果。在本文中，我們將討論如何使用AJAX獲取表單數據，并通過舉例說明其用法。

通常，在提交表單時，頁面會刷新并向服務器發送請求。但是，使用AJAX，我們可以在不刷新頁面的情況下獲取表單數據，并將其發送給服務器進行處理。這樣，用戶就不需要等待頁面刷新，可以更快地處理并顯示結果。

假設我們有一個簡單的HTML表單，其中包含姓名和電子郵件字段，如下所示：

<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email"><br>
<input type="button" value="提交" onclick="submitForm()">
</form>

我們定義了一個JavaScript函數submitForm()來處理表單數據。在函數中，我們使用XMLHttpRequest對象創建一個AJAX請求，并將請求發送到服務器。以下是一個簡單的示例：

function submitForm() {
var form = document.getElementById("myForm");
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 處理服務器返回的響應數據
console.log(this.responseText);
}
};
xhttp.open("POST", "server.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name + "&email=" + email);
}

在這個例子中，我們首先使用getElementById()方法獲取表單元素及其值。然后，我們創建了一個XMLHttpRequest對象xhttp，并將其onreadystatechange事件設置為一個回調函數。當AJAX請求的狀態變為4（已完成）且狀態碼為200（成功）時，回調函數將被調用。在此回調函數中，我們可以處理服務器返回的響應數據。

接下來，我們使用open()方法指定請求的類型（POST）、URL和異步標志。然后，我們可以使用setRequestHeader()方法設置請求頭，該請求頭指定了發送數據的類型。最后，我們使用send()方法將表單數據發送給服務器。

通過上述示例，我們可以看到通過AJAX獲取表單數據的過程。使用AJAX，我們可以快速地獲取表單數據并將其發送給服務器進行處理，而無需刷新整個頁面。這使得我們可以創建更流暢和高效的用戶體驗，并節省用戶的時間。