AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術。它可以實現在不刷新整個頁面的情況下，向服務器發送請求并獲取響應數據，在前端頁面上進行局部更新。AJAX可以用于修改表單并實時更新，提高用戶體驗和頁面性能。

首先，我們來看一個簡單的例子來說明如何使用AJAX修改表單并實時更新。假設有一個注冊表單，包含用戶名、密碼和電子郵件地址三個輸入框。當用戶在用戶名輸入框中輸入文本時，我們希望通過AJAX實時檢查該用戶名是否已存在，并在頁面上給出相應的提示。

在HTML代碼中，我們需要為用戶名輸入框綁定一個事件監聽器，當輸入框的內容發生變化時，觸發一個AJAX請求。以下是一個示例的HTML代碼片段：

<input type="text" id="username" name="username" onchange="checkUsername()">
<span id="usernameInfo"></span>

在JavaScript代碼中，我們定義了一個名為checkUsername()的函數，用于發送AJAX請求并處理服務器返回的數據。以下是一個示例的JavaScript代碼片段：

function checkUsername() {
var username = document.getElementById("username").value;
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義請求的類型、URL和是否異步處理
xhr.open("POST", "/check_username.php", true);
// 設置請求頭
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 注冊回調函數，處理服務器返回的數據
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var usernameInfo = document.getElementById("usernameInfo");
if (response.exists) {
usernameInfo.innerHTML = "該用戶名已存在";
} else {
usernameInfo.innerHTML = "該用戶名可用";
}
}
};
// 發送請求
xhr.send("username=" + encodeURIComponent(username));
}

在服務器端，我們需要編寫一個用于接收AJAX請求并返回相應數據的腳本。以下是一個示例的PHP代碼片段（文件名為check_username.php）：

<?php
$username = $_POST["username"];
// 進行用戶名驗證的邏輯判斷
// ...
$response = array();
$response["exists"] = true; // 假設用戶名已存在
echo json_encode($response);
?>

在上面的例子中，當用戶在用戶名輸入框中輸入文本時，會觸發checkUsername()函數。該函數首先獲取輸入框的值，然后創建一個XMLHttpRequest對象，并使用open()方法指定請求的類型、URL和是否異步處理。接下來，將要發送的數據格式設置為"application/x-www-form-urlencoded"，并通過setRequestHeader()方法設置請求頭。

然后，我們通過onreadystatechange事件注冊回調函數，在服務器返回的數據被接收時進行處理。在回調函數中，我們首先檢查XMLHttpRequest對象的readyState是否等于4（表示響應已完成），并且status是否等于200（表示成功處理請求）。如果滿足這兩個條件，就說明服務器返回的數據可用。

在回調函數中，我們首先將服務器返回的數據（它的格式為JSON）解析為JavaScript對象，然后根據該對象中的exists屬性來判斷用戶名是否已存在，并在頁面上給出相應的提示。

總結起來，通過AJAX修改表單并實時更新是一種有效的方式，可以改善用戶體驗和頁面性能。通過在前端頁面上綁定事件監聽器，觸發AJAX請求并使用XMLHttpRequest對象發送請求到服務器端，并通過回調函數處理服務器返回的數據，我們可以實現在不刷新整個頁面的情況下，對表單進行局部更新。