AJAX（Asynchronous JavaScript and XML）是一種在前端開發中常用的技術，它可以在不刷新整個頁面的情況下，通過異步請求從服務器獲取數據。在實際開發中，經常會遇到需要獲取數據并將其展示在頁面上的需求。本文將通過舉例說明，介紹如何使用AJAX獲取data的值，并給出相關代碼示例。

假設我們有一個網站，用戶可以通過一個表單輸入一個城市名，然后點擊一個按鈕，頁面會顯示該城市的天氣信息。在這種情況下，我們可以通過AJAX獲取一個天氣API的數據，并將其展示在頁面上。

首先，我們需要在頁面中創建一個表單和一個按鈕，用于用戶輸入城市名并觸發AJAX請求。代碼如下：

<form id="cityForm">
<input type="text" id="cityInput" placeholder="請輸入城市名">
<button type="button" id="submitButton">查詢</button>
</form>

接下來，我們需要使用AJAX發送請求并獲取數據。代碼如下：

function getWeatherData(city) {
// 使用AJAX發送GET請求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weather.com/weather-info?city=' + city, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，獲取返回的數據
var data = JSON.parse(xhr.responseText);
// 將數據展示在頁面上
document.getElementById('weatherInfo').innerText = data.weather;
}
};
xhr.send();
}

在上面的代碼中，我們使用了XMLHttpRequest對象發送GET請求，請求的URL包含了城市名參數。當請求的readyState狀態變為DONE，并且HTTP狀態碼為200時，表示請求成功，此時我們可以從responseText中獲取到返回的JSON數據。然后，我們可以將其中的天氣信息顯示在頁面上，比如將其賦值給ID為"weatherInfo"的元素的innerText屬性。

最后，我們需要為按鈕添加點擊事件，觸發AJAX請求。代碼如下：

document.getElementById('submitButton').addEventListener('click', function() {
var city = document.getElementById('cityInput').value;
getWeatherData(city);
});

在上面的代碼中，我們為按鈕添加了一個點擊事件處理函數。當按鈕被點擊時，我們從輸入框中獲取城市名，并將其作為參數傳入getWeatherData函數中，觸發AJAX請求并獲取數據。

通過上述的代碼示例，我們可以實現通過AJAX獲取數據并將其展示在頁面上的功能。當用戶輸入一個城市名并點擊查詢按鈕后，頁面會實時顯示該城市的天氣信息。這樣，我們可以提升用戶體驗，實現了無需刷新整個頁面即可獲取最新數據的效果。