AJAX（Asynchronous JavaScript and XML）是一種常用的網頁開發技術，可以實現在不刷新整個頁面的情況下與服務端進行數據交互。通過使用AJAX技術，可以提升用戶交互體驗，同時減輕服務器的負載。本文將會介紹如何使用AJAX接收服務端返回的數據，并給出相應的代碼示例。

在使用AJAX接收服務端返回數據時，需要通過XMLHttpRequest對象來發送請求并接收響應。下面是一個簡單的示例，演示如何使用AJAX向服務端發送請求并接收數據：

var xhr = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xhr.open('GET', '/api/data', true); // 指定請求地址和方法
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // 請求完成且成功接收響應
var data = xhr.responseText; // 獲取響應數據
console.log(data); // 打印響應數據
}
};
xhr.send(); // 發送請求

在上面的代碼中，通過XMLHttpRequest對象創建了一個AJAX請求，并指定了請求的地址和方法。當readyState屬性變為4（即請求完成）且status屬性為200（即成功接收響應）時，使用responseText屬性獲取服務端返回的數據。

接下來，我們將使用一個簡單的例子來說明如何使用AJAX接收服務端返回的數據。假設我們有一個接口，可以通過發送GET請求獲取車輛的實時位置信息。我們希望在網頁中實時顯示車輛的位置。以下是相應的代碼：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/vehicle-location', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var vehicle = data.vehicle;
var latitude = vehicle.latitude;
var longitude = vehicle.longitude;
// 在網頁中顯示車輛的位置信息
document.getElementById('latitude').innerHTML = '緯度：' + latitude;
document.getElementById('longitude').innerHTML = '經度：' + longitude;
}
};
xhr.send();

在上面的代碼中，我們通過調用JSON.parse()方法將服務端返回的JSON格式的數據轉換為JavaScript對象。然后，我們從這個對象中提取出車輛的緯度和經度，并將其顯示在網頁中。這樣，我們就實現了實時顯示車輛位置的功能。

在實際的開發中，我們經常會遇到需要在用戶輸入數據時動態獲取服務端返回的數據的情況。例如，我們要在用戶輸入關鍵字時自動提示相關的搜索結果。下面是一個示例：

var inputElement = document.getElementById('keyword');
inputElement.addEventListener('input', function() {
var keyword = this.value;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/search?keyword=' + encodeURIComponent(keyword), true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var results = data.results;
displayResults(results);
}
};
xhr.send();
});
function displayResults(results) {
var listElement = document.getElementById('search-results');
listElement.innerHTML = '';
results.forEach(function(result) {
var listItem = document.createElement('li');
listItem.innerText = result;
listElement.appendChild(listItem);
});
}

在上面的代碼中，我們通過監聽用戶輸入框的input事件，獲取用戶輸入的關鍵字。然后，我們通過AJAX向服務端發送GET請求，將關鍵字作為查詢參數傳遞給服務端。最后，將服務端返回的搜索結果顯示在網頁中。這樣，我們就實現了實時搜索的功能。

總之，AJAX是一種非常有用的網頁開發技術，能夠使我們在不刷新整個頁面的情況下與服務端進行數據交互。通過使用AJAX接收服務端返回的數據，我們可以實現各種各樣的功能，提升用戶交互體驗。希望本文所介紹的內容能夠對你深入了解AJAX并應用于實際項目開發有所幫助。