AJAX（Asynchronous JavaScript and XML）是一種用于在后臺發送數據和接收結果的技術。通過使用AJAX，我們可以在不刷新整個頁面的情況下，向服務器發送請求，并且在后臺處理數據之后，獲取并顯示返回的結果。本文將介紹如何使用AJAX傳值并獲取后臺返回的結果，并通過舉例說明其用法。

假設我們正在開發一個簡單的登錄注冊系統。在用戶輸入用戶名和密碼之后，我們需要將這些數據傳遞給后臺進行驗證，并根據驗證結果顯示不同的信息。下面是一段示例的HTML代碼：

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

在上述例子中，我們使用了一個表單來獲取用戶的用戶名和密碼，并添加了一個按鈕，點擊按鈕時會觸發login()函數。接下來，我們將使用AJAX傳遞用戶名和密碼給后臺，并接收后臺返回的結果。

<script>function login() {
// 獲取用戶名和密碼的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求的類型和URL
xhr.open("POST", "login.php", true);
// 設置請求頭信息
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 定義回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 從后臺獲取返回的結果
var result = xhr.responseText;
// 顯示返回的結果
alert(result);
}
};
// 發送用戶名和密碼給后臺
xhr.send("username=" + username + "&password=" + password);
}
</script>

在上述例子中，我們首先獲取了用戶名和密碼的值，并創建了一個XMLHttpRequest對象（即XHR對象）。之后，我們使用open()方法設置請求的類型（這里是POST）和URL（這里是login.php）。接著，我們使用setRequestHeader()方法設置請求頭信息，告訴服務器傳遞的數據類型。然后，我們定義了一個回調函數，在響應狀態改變時會被觸發。如果請求已經成功，并且服務器返回了200狀態碼，我們從后臺獲取返回的結果，并顯示在彈窗中。最后，我們使用send()方法發送用戶名和密碼給后臺。

接下來，我們來看一下后臺接收到傳遞過來的數據，并進行驗證的例子。下面是一個簡單的PHP代碼片段：

<?php
$username = $_POST['username'];
$password = $_POST['password'];
// 進行用戶名和密碼的驗證
if ($username === 'admin' && $password === '123456') {
echo '登錄成功';
} else {
echo '用戶名或密碼錯誤';
}
?>

在這個例子中，我們首先獲取了通過POST方法傳遞過來的用戶名和密碼，然后進行了一個簡單的驗證。如果用戶名和密碼都為預設的值時，返回字符串"登錄成功"，否則返回"用戶名或密碼錯誤"。

通過這個例子，我們可以看到如何使用AJAX傳值并在后臺獲取結果。當用戶點擊登錄按鈕時，AJAX會將用戶名和密碼傳遞給后臺進行驗證，然后根據返回的結果，我們可以展示相應的信息給用戶。AJAX的使用可以大大提升用戶體驗，并減少對整個頁面的刷新。