在現代網站開發中，經常會遇到需要獲取用戶輸入數據的情況。而通過傳統的網頁提交方式，每次提交都需要刷新整個頁面，用戶體驗較差。為了改善這一情況，引入了AJAX（Asynchronous JavaScript and XML）技術。本文將以一個通過AJAX獲取表單數據的例子，詳細介紹AJAX的使用方法和效果。

假設我們有一個簡單的表單，包含姓名、年齡和性別等輸入框，用戶輸入完畢后點擊“提交”按鈕。傳統的做法是通過表單的提交事件，將數據發送到服務器端，然后進行處理并刷新整個頁面以顯示結果。然而，利用AJAX技術，我們可以在不刷新頁面的情況下，將表單數據發送到服務器并獲得處理結果。這提供了更流暢和友好的用戶體驗。

下面是一個代碼示例，演示如何使用AJAX獲取并處理表單數據：

<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"/><br/>
<label for="age">年齡：</label>
<input type="number" id="age" name="age"/><br/>
<label for="gender">性別：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br/>
<button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "process.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 處理返回的數據
console.log(response);
}
};
xhr.send(formData);
}
</script>

在這個例子中，我們首先創建了一個包含姓名、年齡和性別輸入框的表單。表單中的輸入框和提交按鈕都有對應的id，方便通過JavaScript獲取和操作。

在JavaScript部分，定義了一個名為“submitForm”的函數，該函數在提交按鈕被點擊時觸發。函數中首先通過getElementById方法獲取到表單，并通過FormData構造函數創建一個FormData對象，將表單數據包裝起來。

接下來，我們創建一個XMLHttpRequest對象（通常稱為XHR對象），并使用open方法指定請求類型、URL和是否異步發送。在本例中，我們使用POST方法發送數據到一個名為“process.php”的服務器端腳本。同時，我們也定義了一個onreadystatechange事件處理函數，用于處理服務器返回的數據。在此函數中，我們通過responseText屬性獲取到服務器返回的數據，并進行處理。

這只是一個簡單的例子，實際中我們還可以進行更復雜的數據處理，包括驗證表單數據、調用服務器端API以及響應服務器端的反饋等等。

通過使用AJAX技術，我們可以實現在不刷新頁面的情況下，獲取并處理表單數據。這樣可以提供更好的用戶體驗，減少不必要的刷新，提高網站的交互性。但同時，也需要注意AJAX的安全性和兼容性問題，確保在使用AJAX時不會引發安全漏洞，并兼容各種瀏覽器。