在Web開發中，我們經常需要向服務器發送數據并獲取服務器返回的數據。隨著互聯網的發展，用戶對于頁面交互的期望也越來越高，所以使用Ajax技術變得越來越普遍。Ajax能夠在不刷新整個頁面的情況下，異步地向服務器發送請求并接收響應數據，這使得用戶的操作更加流暢，用戶體驗更好。
為了實現表單數據的傳遞，我們通常會使用Ajax。通過Ajax，我們可以在用戶填寫完表單后，將表單數據發送給服務器進行處理，并實時獲取服務器返回的響應數據。下面我們來看一個具體的例子，假設我們有一個用戶注冊表單，其中包含用戶名、密碼和電子郵箱等字段。

<form id="registerForm">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email">
<br>
<button type="button" id="submitBtn">注冊</button>
</form>
<script>
var submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/register');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var form = document.getElementById('registerForm');
var formData = new FormData(form);
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
console.log(response);
// 這里可以根據服務器返回的數據進行相應的操作
}
}
});
</script>

在上面的例子中，我們首先創建了一個XMLHttpRequest對象，然后通過xhr.open方法指定要發送到服務器的URL。接著，通過xhr.setRequestHeader方法設置請求頭，告訴服務器我們要發送的數據格式是表單形式。然后，我們使用FormData對象對表單進行了包裝，通過xhr.send方法將數據發送到服務器端。
在服務器端，我們可以使用各種后端技術來處理接收到的表單數據，例如Java的Servlet、PHP等。在這里，我們只關注客戶端的實現，所以不再詳細介紹服務器端的代碼。
在xhr.onreadystatechange事件中，我們判斷xhr.readyState是否為4，表示請求已經完成。同時，我們還需要判斷xhr.status是否為200，表示請求成功。如果滿足這兩個條件，就表示數據已經提交成功，并且服務器返回了響應數據。我們可以通過xhr.responseText獲取服務器返回的數據，并進行相應的操作。
總之，通過Ajax可以很方便地實現表單數據的傳遞。我們可以使用XMLHttpRequest對象將表單數據發送到服務器端，并在接收到服務器響應后進行相應的處理。這使得用戶體驗更加流暢，提升了Web應用的交互效果。