AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下與服務器進行數據交互的技術。通過AJAX，我們可以在后臺獲取數據，并將數據傳遞給前端頁面進行展示。本文將介紹如何使用AJAX獲取值并傳值，同時通過舉例說明加深理解。

要使用AJAX獲取值并傳值，首先需要創建一個XMLHttpRequest對象，該對象用于發送HTTP請求和接收服務器的響應。下面是獲取值的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
console.log(response);
}
};
xhr.send();

在上面的例子中，我們創建了一個GET請求，并將URL設置為'example.php'。通過監聽xhr對象的readyState和status屬性，當請求完成且響應狀態為200時，將服務器響應的數據保存在response變量中，并通過console.log()輸出到控制臺。

在實際應用中，我們通常需要將獲取到的值傳遞給頁面的某個元素或者其他的AJAX請求。下面是一個傳值的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById('result').innerHTML = response;
}
};
xhr.send();

在上面的例子中，我們假設頁面中有一個id為'result'的元素，我們將獲取到的值response賦值給該元素的innerHTML屬性，從而在頁面上展示獲取到的值。

除了GET請求，我們還可以使用POST請求進行值的傳遞。下面是一個使用POST請求傳值的示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'example.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;
console.log(response);
}
};
var data = 'name=John&age=25';
xhr.send(data);

在上面的例子中，我們通過setRequestHeader()方法設置請求頭，將請求的Content-type設置為'application/x-www-form-urlencoded'。注意，對于POST請求，我們需要將傳遞的數據放在send()方法中作為參數傳入。

綜上所述，通過AJAX獲取值并傳值是一種在前端頁面與服務器進行數據交互的常用方法。通過創建XMLHttpRequest對象，調用open()方法設置請求類型和URL，監聽readyState和status屬性判斷請求是否完成，我們可以獲取到服務器的響應結果，并將其傳遞給頁面上的元素或其他AJAX請求。