AJAX 是用于創建快速動態網頁的技術。它可以在不重新加載整個網頁的情況下，通過與服務器進行通信，實現對部分網頁內容的更新。其中，使用 AJAX 在表單提交（submit）中應用，可以有效地提升用戶體驗。

舉個例子，假設我們正在開發一個電商網站。用戶在購物車頁面點擊“結算”按鈕后，通常會彈出一個表單讓用戶填寫收貨地址、付款方式等信息。在傳統的網頁開發中，當用戶點擊提交按鈕后，整個頁面會重新加載，這會導致用戶需要重新填寫之前已經填寫好的相關信息。然而，使用 AJAX 可以避免這個問題。

下面，我們通過示例代碼來說明如何使用 AJAX 在提交表單時提升用戶體驗：

<form id="checkout-form" method="POST" action="/checkout">
<input type="text" name="address" placeholder="輸入收貨地址" />
<input type="text" name="payment" placeholder="選擇付款方式" />
<button type="submit" id="submit-btn">提交訂單</button>
</form>
<script>
document.getElementById("checkout-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單提交的默認行為
var formElement = document.getElementById("checkout-form");
var formData = new FormData(formElement);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/checkout", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 接收到服務器響應后的后續處理
console.log(xhr.responseText);
}
};
xhr.send(formData); // 發送表單數據到服務器
}, false);
</script>

在這段代碼中，首先給表單的提交按鈕添加了一個名為`submit-btn`的 id。然后，通過 JavaScript 給表單元素添加了一個事件監聽器，當表單提交時會觸發回調函數。在回調函數中，我們首先使用`event.preventDefault()`方法阻止了表單提交的默認行為。接下來，我們通過`getElementById`方法獲取到表單對象，并使用`FormData`對象獲取到表單中的所有數據。然后，創建了一個 XMLHttpRequest 對象，并使用`open`方法指定了要發送請求的目標 URL 和請求方式。接著，我們設置了一個`onreadystatechange`事件監聽器，在服務器響應的狀態碼為 200 且 readyState 為 DONE 時，將服務器返回的響應數據打印到控制臺。最后，我們調用`send`方法將表單數據發送到服務器。

通過以上代碼，當用戶點擊“提交訂單”按鈕后，網頁會通過 AJAX 技術將表單數據傳送到服務器，并處理服務器的響應，而不會整個頁面重新加載。這樣用戶就不需要重新填寫之前已填寫好的信息，提升了用戶提交表單的體驗。

總而言之，使用 AJAX 在表單提交中應用可以有效地改善用戶體驗。在實際的網頁開發中，我們可以根據具體需求，結合 AJAX 的優勢，靈活應用在不同的場景中，從而提供更好的用戶交互體驗。