AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個(gè)頁面的情況下，與服務(wù)器進(jìn)行異步通信的技術(shù)。在前端開發(fā)中，我們經(jīng)常會(huì)遇到需要獲取表單提交的數(shù)據(jù)，并實(shí)時(shí)更新頁面展示的需求。通過使用AJAX技術(shù)，我們可以實(shí)現(xiàn)在后臺(tái)處理表單提交的數(shù)據(jù)，而無需刷新整個(gè)頁面，提升用戶體驗(yàn)。

舉個(gè)例子來說明，假設(shè)我們有一個(gè)用戶注冊(cè)的表單，其中包含姓名、郵箱和密碼等字段。用戶填寫完表單后，點(diǎn)擊提交按鈕，我們可以通過AJAX發(fā)送表單數(shù)據(jù)到一個(gè)后臺(tái)處理的腳本，該腳本負(fù)責(zé)將數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫中。在后臺(tái)處理完畢后，我們可以獲取服務(wù)器返回的響應(yīng)，根據(jù)響應(yīng)的結(jié)果，更新前端頁面的內(nèi)容。如果注冊(cè)成功，我們可以顯示一條成功提示信息；如果注冊(cè)失敗，則顯示相應(yīng)的錯(cuò)誤信息。

// HTML部分
<form id="register-form" action="register.php" method="post">
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="郵箱">
<input type="password" name="password" placeholder="密碼">
<button type="submit">注冊(cè)</button>
</form>
// JavaScript部分
const form = document.getElementById("register-form");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
const formData = new FormData(form); // 創(chuàng)建FormData對(duì)象，將表單數(shù)據(jù)包裝起來
const xhr = new XMLHttpRequest(); // 創(chuàng)建AJAX對(duì)象
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 注冊(cè)成功，更新頁面內(nèi)容
const response = JSON.parse(xhr.responseText);
document.getElementById("success-message").textContent = response.message;
} else {
// 注冊(cè)失敗，更新頁面內(nèi)容
document.getElementById("error-message").textContent = "注冊(cè)失敗，請(qǐng)重試。";
}
}
};
xhr.open("POST", form.action, true); // 設(shè)置AJAX請(qǐng)求的方法、URL和異步標(biāo)志
xhr.send(formData); // 發(fā)送表單數(shù)據(jù)
});

在上述代碼中，我們首先通過JavaScript獲取到注冊(cè)表單的DOM元素，并添加了一個(gè)submit事件監(jiān)聽器。當(dāng)用戶點(diǎn)擊注冊(cè)按鈕時(shí)，該事件監(jiān)聽器會(huì)被觸發(fā)。我們使用了event.preventDefault()方法，阻止了表單的默認(rèn)提交行為。接下來，我們創(chuàng)建了一個(gè)FormData對(duì)象，用于將表單數(shù)據(jù)進(jìn)行包裝。然后，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，該對(duì)象用于與服務(wù)器進(jìn)行交互。

在XHR對(duì)象的onreadystatechange事件中，我們判斷請(qǐng)求的狀態(tài)。當(dāng)請(qǐng)求的狀態(tài)為4（即已完成）時(shí)，我們?cè)倥袛喾?wù)器返回的響應(yīng)狀態(tài)碼。如果狀態(tài)碼為200，表示注冊(cè)成功，我們可以解析服務(wù)器返回的JSON數(shù)據(jù)，并根據(jù)里面的消息更新頁面內(nèi)容。如果狀態(tài)碼不是200，表示注冊(cè)失敗，我們將顯示相應(yīng)的錯(cuò)誤信息。

在這個(gè)例子中，我們使用AJAX技術(shù)獲取了表單提交的數(shù)據(jù)，并實(shí)時(shí)更新頁面內(nèi)容。用戶無需等待整個(gè)頁面的刷新，即可獲知注冊(cè)是否成功，并得到相應(yīng)的提示信息。通過AJAX，我們實(shí)現(xiàn)了更好的用戶體驗(yàn)。

綜上所述，通過AJAX可以輕松地獲取表單提交的數(shù)據(jù)，而無需刷新整個(gè)頁面。我們可以根據(jù)服務(wù)器返回的響應(yīng)，實(shí)時(shí)更新頁面內(nèi)容，提升用戶體驗(yàn)。在實(shí)際開發(fā)中，我們可以根據(jù)具體的需求和場(chǎng)景，靈活運(yùn)用AJAX技術(shù)，為用戶帶來更好的交互和體驗(yàn)。