AJAX（Asynchronous JavaScript and XML）是一種用于在Web應用程序中通過異步方式與服務器進行通信的技術。它允許我們在不刷新整個頁面的情況下更新部分頁面內容，提高用戶體驗。在使用AJAX時，我們通常會發送一個HTTP請求并等待服務器的響應，并在收到響應后使用返回的數據來更新頁面。本文將詳細介紹如何通過AJAX獲得返回的數據。

在AJAX中，我們可以使用XMLHttpRequest對象來創建并發送HTTP請求。下面是一個簡單的例子，通過發送一個GET請求來獲取服務器返回的數據：

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();

在上面的代碼中，我們創建了一個XMLHttpRequest對象，并通過open()方法指定了要發送的請求類型、URL和是否使用異步方式。然后，我們定義了一個onreadystatechange事件處理程序，它會在狀態改變時被調用。當readyState的值為4（即請求已完成）并且status的值為200（即請求成功）時，我們將服務器返回的數據保存到response變量中，并在控制臺輸出這個數據。

當我們向服務器發送了請求并接收到了響應后，可以使用這些數據來更新頁面的內容。例如，我們可以將服務器返回的數據作為一個段落的文本內容：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
var paragraph = document.getElementById("paragraph");
paragraph.innerHTML = response;
}
};

在上面的例子中，我們使用了一個ID為"paragraph"的元素來展示服務器返回的數據。我們先獲取到這個元素，然后將服務器返回的數據賦值給該元素的innerHTML屬性。這樣，頁面上的這個段落就會被更新為服務器返回的數據。

另一種常見的用例是使用服務器返回的數據來動態地創建、修改或刪除頁面元素。例如，假設我們有一個電影列表，并且通過AJAX從服務器獲取電影數據。然后，我們可以根據服務器返回的數據來創建電影卡片：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var movies = JSON.parse(xhr.responseText);
var movieList = document.getElementById("movieList");
movies.forEach(function(movie) {
var card = document.createElement("div");
card.classList.add("card");
card.innerHTML = movie.title + " - " + movie.genre;
movieList.appendChild(card);
});
}
};

在上面的代碼中，我們假設服務器返回的數據是一個包含電影對象的數組。我們首先將JSON格式的響應解析為JavaScript對象，然后使用forEach()方法遍歷數組中的每個電影對象。對于每個電影對象，我們創建一個div元素，為其添加一個名為"card"的CSS類，并將電影的標題和類型作為文本內容。最后，我們將這個卡片添加到ID為"movieList"的元素中，以在頁面上動態創建電影卡片。

通過上述示例，我們可以看到AJAX如何通過異步方式與服務器進行通信，并如何使用服務器返回的數據來更新或動態創建頁面內容。AJAX使得我們能夠在不刷新整個頁面的情況下實現與服務器的數據交互，為Web應用程序的開發提供了更加靈活和高效的方式。