首先，讓我們看一個簡單的例子。假設我們有一個登錄表單，其中包含用戶名和密碼字段。傳統的方式是當用戶點擊登錄按鈕時，表單會被提交到服務器，服務器驗證用戶的信息，并返回一個響應。這個過程會導致頁面的刷新，并且用戶可能會在頁面加載期間看到一個白屏。這種體驗并不理想。

<form id="loginForm" method="POST" action="/login">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<input type="submit" value="登錄">
</form>

現在，我們可以使用AJAX來改進這個過程。通過使用JavaScript，我們可以捕獲表單提交事件，并阻止默認的表單提交行為。然后，我們可以將表單數據通過AJAX發送到服務器，并在接收到響應時更新頁面的內容。

document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var form = event.target; // 獲取表單元素
var formData = new FormData(form); // 創建FormData對象
var xhr = new XMLHttpRequest(); // 創建AJAX對象
xhr.open(form.method, form.action); // 配置AJAX請求
xhr.onload = function() {
if (xhr.status === 200) {
// 處理響應數據，更新頁面內容
}
};
xhr.send(formData); // 發送請求
});

在上面的代碼中，我們首先獲取表單元素，并在表單提交事件中阻止默認的提交行為。然后，我們創建了一個FormData對象，用于存儲表單數據。接下來，我們創建了一個XMLHttpRequest對象，并配置了請求的方法（根據表單元素的method屬性）和URL（根據表單元素的action屬性）。當AJAX請求的響應加載完成時，我們可以在xhr.onload回調函數中處理返回的數據，并更新頁面的內容。

通過使用AJAX提交表單，用戶可以在頁面不進行刷新的情況下進行數據交互。例如，用戶可以在登錄表單中輸入用戶名和密碼，并在點擊登錄按鈕后立即看到驗證結果，而無需等待頁面加載。這種體驗更加流暢和友好。

總結起來，AJAX提交表單是一種非常有用的技術，可以改善用戶體驗。它使用JavaScript和XMLHttpRequest對象來發送異步請求，并在接收到響應時更新頁面的內容。通過避免頁面的刷新，用戶可以實時地看到交互結果，提高了整體的用戶友好度。