AJAX（Asynchronous JavaScript and XML）是一種能夠在不刷新整個頁面的情況下，異步地向服務器發送請求并更新頁面內容的技術。英文全稱中的XML已經過時，實際上AJAX使用的是現代的數據格式，如JSON。

在Web開發中，表單的提交是一項常見的操作，但傳統的表單提交會引起整個頁面的刷新。AJAX技術可以解決這個問題，使表單的提交變得更加靈活，用戶體驗更加流暢。

假設我們有一個簡單的登錄表單，在用戶點擊登錄按鈕后，使用AJAX進行表單提交，并根據服務器的返回結果進行頁面內容的更新。

<form id="login-form">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="submit" id="login-button">登錄</button>
</form>

首先，我們需要給登錄按鈕綁定點擊事件，以便在用戶點擊按鈕時觸發表單的提交。

document.getElementById('login-button').addEventListener('click', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var form = document.getElementById('login-form');
var formData = new FormData(form); // 創建FormData對象，用于包裝表單數據
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方式、URL和是否異步
xhr.open('POST', '/login', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 監聽請求狀態變化事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 請求已完成
if (xhr.status === 200) { // 服務器返回成功
var response = JSON.parse(xhr.responseText);
// 根據服務器返回的結果更新頁面內容
if (response.success) {
alert('登錄成功');
} else {
alert('登錄失敗');
}
} else {
alert('請求失敗');
}
}
}
// 發送請求
xhr.send(formData); // 將FormData對象作為請求的數據發送給服務器
});

在上述代碼中，我們創建了一個XMLHttpRequest對象，用于發送異步請求。然后設置了請求方式為POST，請求的URL為/login，是否異步為true，即異步請求。

接下來，我們使用setRequestHeader方法設置請求頭，指定請求的Content-Type為application/x-www-form-urlencoded，表示將表單數據進行URL編碼。

在XMLHttpRequest對象的onreadystatechange事件中，我們判斷請求的狀態是否為4（即請求已完成），如果請求成功（狀態碼為200），則解析服務器返回的響應數據并根據結果更新頁面內容。

最后，調用send方法將FormData對象作為請求的數據發送給服務器，完成表單的異步提交。

通過使用AJAX技術，我們可以在不刷新頁面的情況下，實現表單的異步提交和頁面內容的動態更新。例如，在登錄表單中，我們可以根據服務器返回的結果顯示不同的提示信息，從而提供更好的用戶體驗。