Ajax（Asynchronous JavaScript and XML）是一種用于創建動態網頁應用的技術。它的主要作用是通過在后臺向服務器發送請求，并在不刷新整個網頁的情況下更新網頁內容。在這篇文章中，我們將探討如何使用Ajax獲取服務器響應，并在網頁中展示這些數據。通過多個示例和詳細解釋，我們將了解Ajax的工作原理和實際應用。

Ajax的核心是通過使用XMLHttpRequest對象（XHR）來與服務器進行通信。在發送請求之前，我們需要創建一個XHR對象并指定需要獲取數據的服務器的URL。然后，我們可以使用XHR對象來發送請求并處理響應。下面是一個簡單的示例，展示了如何使用Ajax獲取服務器的響應數據：

var xhr = new XMLHttpRequest(); // 創建XHR對象
xhr.open('GET', 'https://example.com/data.json', true); // 指定請求方法、URL和是否異步
xhr.onreadystatechange = function() { // 指定響應處理函數
if (xhr.readyState === 4 && xhr.status === 200) { // 檢查響應的狀態和狀態碼
var response = xhr.responseText; // 獲取響應數據
// 在網頁中展示響應數據
document.getElementById('data').innerHTML = response;
}
};
xhr.send(); // 發送請求

在上面的示例中，我們創建了一個XHR對象，并使用open方法指定了GET請求方法、服務器URL和通過異步方式獲取數據。然后，我們指定了一個回調函數，該函數在XHR對象的狀態發生變化時被調用。當XHR對象的readyState屬性為4（表示響應已完成）且status屬性為200（表示成功響應）時，我們可以使用responseText屬性來獲取服務器的響應數據。

讓我們看一個更復雜的示例，演示如何使用Ajax獲取JSON格式的數據并在網頁中展示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // 將JSON字符串解析為JavaScript對象
var html = '';
for (var i = 0; i < response.length; i++) {
html += '<li>' + response[i].name + '</li>'; // 構建展示數據的HTML
}
document.getElementById('list').innerHTML = html; // 在網頁中展示數據
}
};
xhr.send();

在這個示例中，我們假設服務器返回了一個JSON數組，每個對象包含一個名為name的屬性。我們首先通過JSON.parse方法將服務器響應的JSON字符串解析為JavaScript對象。然后，我們使用for循環遍歷該對象，并構建展示數據的HTML。最后，我們將HTML插入到id為list的HTML元素中，以在網頁中展示數據。

通過上面的示例，我們可以看到Ajax技術如何使網頁更加動態和交互。無論是獲取文本、HTML還是JSON數據，Ajax都能幫助我們實現無需刷新整個網頁的內容更新。希望通過這篇文章，你對Ajax獲取響應數據的原理和實際應用有了更深入的了解。