AJAX（Asynchronous JavaScript and XML）是一種用于前端和后端之間異步通信的技術。通過使用AJAX，可以實現無需刷新整個頁面而更新部分內容的功能。其中一個常見的應用場景是通過AJAX提交表單數據，并實時更新頁面。本文將介紹如何使用AJAX實現表單提交數據的功能。

假設我們有一個簡單的注冊表單，包含用戶名和密碼兩個字段。當用戶填寫完注冊表單并點擊提交按鈕時，表單數據將會被發送到服務器進行處理，同時頁面上會顯示注冊成功的消息。

<form id="registerForm"><label for="username">用戶名: </label><input type="text" id="username" name="username" required><br><label for="password">密碼: </label><input type="password" id="password" name="password" required><br><input type="submit" value="注冊"></form><p id="message"></p>

首先，我們需要使用JavaScript監聽表單的提交事件，并阻止表單默認的提交行為。然后，我們可以使用AJAX發送一個POST請求到服務器，將表單數據發送給后端處理。

var form = document.getElementById('registerForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/register', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
document.getElementById('message').innerHTML = '注冊成功！';
}
};
xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});

以上代碼通過addEventListener函數將一個匿名函數添加為表單的提交事件處理函數。在事件處理函數中，我們首先調用event.preventDefault()方法，阻止表單默認的提交行為。然后，我們獲取表單中用戶名和密碼輸入框的值，并創建一個XMLHttpRequest對象。

接下來，我們使用xhr.open函數設置請求的方法、URL和是否異步。在本例中，我們使用POST方法，將表單數據發送到/register路徑。然后，我們使用xhr.setRequestHeader函數設置請求頭的Content-Type屬性為"application/x-www-form-urlencoded"，以告訴服務器我們將發送表單數據。

之后，我們設置xhr.onreadystatechange函數，當XMLHttpRequest對象的readyState屬性值為4（即請求已完成）并且status屬性值為200（即請求成功）時，將注冊成功的消息顯示在message元素上。最后，我們調用xhr.send發送請求，并將表單數據作為參數傳遞。

總結起來，我們可以通過使用AJAX實現表單提交數據的功能。通過監聽表單的提交事件，阻止默認的提交行為，并使用AJAX發送POST請求，我們能夠將表單數據發送到服務器進行處理。在請求完成后，根據服務器的響應結果，我們可以更新頁面上的內容。