AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上進行異步數據傳輸的技術。通過AJAX，可以在不刷新整個網頁的情況下，通過后臺服務器發送請求并接收響應，從而實現動態更新網頁內容的效果。在本文中，我們將探討AJAX是如何進行數據傳輸的，并結合具體的示例進行說明。

AJAX通過使用JavaScript和XMLHttpRequest對象來實現數據的異步傳輸。JavaScript負責從頁面中獲取用戶的輸入和操作，然后使用XMLHttpRequest對象將這些數據發送到后臺服務器。服務器接收到數據后，進行相應的處理，并將結果返回給JavaScript。JavaScript再利用獲得的結果更新頁面的內容。這個過程可以與傳統的各種表單提交方式相比，更加簡潔高效。

下面我們以一個簡單的登錄表單為例來說明AJAX的數據傳輸過程。首先，我們需要一個HTML表單，其中包含用戶名和密碼的輸入框，以及一個提交按鈕。當用戶點擊提交按鈕時，我們將使用JavaScript來捕獲表單中的數據，并通過AJAX將它們發送到后臺服務器。

<form id="loginForm" action="login.php" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<br>
<input type="button" value="登錄" onclick="login()">
</form>

在上述HTML中，我們給提交按鈕添加了一個onclick事件，將其與login()函數關聯。接下來，我們來編寫login()函數的JavaScript代碼。

function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 根據服務器返回的響應結果進行相應的處理
}
};
xhr.send("username=" + username + "&password=" + password);
}

在上述JavaScript代碼中，我們首先獲取了用戶名和密碼的值，并使用XMLHttpRequest對象來發送請求。通過調用open()方法，我們指定了請求的方法（POST）、URL（"login.php"）和是否異步（true）。然后，我們設置了請求頭的Content-Type字段，以告訴服務器發送的數據的格式。接著，我們使用onreadystatechange事件來監聽XHR對象的狀態變化。當readyState等于4，標識服務器響應已經完成，并且status等于200，表示服務器響應成功，我們將獲取到的響應結果保存在response變量中，然后進行后續處理。

最后，我們使用send()方法將數據發送到服務器。在這個例子中，我們將用戶名和密碼以"username=value1&password=value2"的格式進行編碼，然后作為參數傳遞給send()方法。

綜上所述，AJAX通過使用JavaScript和XMLHttpRequest對象，實現了在網頁上進行異步數據傳輸的功能。通過捕獲用戶輸入的數據，并將其發送到后臺服務器，再利用服務器返回的結果來更新頁面的內容，AJAX為網頁開發提供了更加便捷高效的方式。