AJAX是一種常用的網(wǎng)頁交互技術，能夠在不刷新整個頁面的情況下，更新部分網(wǎng)頁內(nèi)容。其中，使用AJAX提交form表單并彈窗提示是一種常見的應用場景。通過使用AJAX提交表單，可以實現(xiàn)更加流暢的用戶體驗，并提高網(wǎng)頁的響應速度。

舉個例子，假設我們有一個登錄功能的表單，用戶輸入用戶名和密碼后點擊提交按鈕。傳統(tǒng)的做法是，用戶點擊提交按鈕后，整個頁面會刷新，然后顯示登錄的結(jié)果。而使用AJAX提交表單后，用戶點擊提交按鈕后，頁面不會刷新，而是通過AJAX發(fā)送請求進行驗證，然后在彈窗中顯示登錄的結(jié)果，這樣可以提高用戶的操作效率。

在編寫代碼的時候，我們首先需要給表單添加一個id屬性，以便通過JavaScript選擇該表單進行提交，并給提交按鈕添加一個點擊事件。代碼如下所示：

<form id="loginForm" method="post">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="submit" id="submitButton">登錄</button>
</form>
<script>
var form = document.getElementById("loginForm");
var submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php"); // 替換為實際的后端接口地址
// 設置請求頭信息
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 獲取表單數(shù)據(jù)
var formData = new FormData(form);
// 發(fā)送AJAX請求
xhr.send(formData);
// 處理AJAX響應
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert("登錄成功");
} else {
alert("登錄失敗");
}
}
};
});
</script>

在上述代碼中，我們首先通過getElementById方法獲取到表單和提交按鈕的DOM元素。然后給提交按鈕添加一個點擊事件，當點擊提交按鈕時，會執(zhí)行相應的代碼。

在點擊事件的處理函數(shù)中，我們使用XMLHttpRequest對象創(chuàng)建一個AJAX請求，并通過open方法設置請求方法和后端接口地址。然后通過setRequestHeader方法設置請求頭信息，在這里我們設置Content-Type為application/x-www-form-urlencoded，表示表單數(shù)據(jù)以URL編碼的形式進行傳輸。

接下來，我們通過FormData對象獲取表單數(shù)據(jù)，并使用send方法發(fā)送AJAX請求。在響應的處理中，我們檢查響應的readyState和status，以確定請求狀態(tài)。如果readyState為XMLHttpRequest.DONE，表示請求已完成；如果status為200，表示請求成功，我們可以彈窗提示登錄成功；否則，我們可以彈窗提示登錄失敗。

總之，使用AJAX提交form表單并彈窗提示，可以提高用戶的交互體驗和網(wǎng)頁的響應速度。通過避免頁面的刷新，用戶可以更加流暢地進行操作，并在彈窗中得到相應的反饋信息。這種技術在各種表單提交的場景中都有廣泛的應用。