在現代web應用程序中，動態加載和更新數據是非常常見的需求。AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交互的技術，可以實現實時獲取數據并將其顯示在頁面上，而無需刷新整個頁面。特別是在處理列表類型的數據時，AJAX的優勢更加明顯。本文將介紹如何使用AJAX獲取列表數據，并給出一些實例。

對于一個在線商城網站來說，展示商品列表是至關重要的。傳統的方式是通過在后臺執行查詢并將查詢結果渲染到頁面上來展示商品。這種方式在每次查詢時需要重新加載并刷新整個頁面，導致用戶體驗不佳。而使用AJAX，我們可以在不刷新頁面的情況下實時獲取并展示商品列表，大大提高了用戶體驗。

// HTML
<div id="productList"></div>
// JavaScript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/products', true);
xhr.onload = function() {
if (xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
var list = document.getElementById('productList');
for (var i = 0; i < products.length; i++) {
var product = products[i];
var item = document.createElement('div');
item.textContent = product.name;
list.appendChild(item);
}
}
};
xhr.send();

上述代碼創建了一個XMLHttpRequest對象，并使用GET方式請求服務器上的一個API（假設返回的數據是一個JSON數組）。當請求成功返回后，通過JSON.parse方法將返回的文本解析為一個數組，并以追加(div元素)的方式展示在頁面上。

舉個例子，假設我們正在開發一個社交媒體應用程序，我們想要獲取用戶的朋友列表并在頁面上顯示出來。使用AJAX獲取并展示用戶的朋友列表是一種更加高效和便捷的方式。

// HTML
<div id="friendList"></div>
// JavaScript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/friends', true);
xhr.onload = function() {
if (xhr.status === 200) {
var friends = JSON.parse(xhr.responseText);
var list = document.getElementById('friendList');
for (var i = 0; i < friends.length; i++) {
var friend = friends[i];
var item = document.createElement('div');
item.textContent = friend.name;
list.appendChild(item);
}
}
};
xhr.send();

上述代碼通過AJAX請求一個API并獲取返回的用戶朋友列表。然后，將該列表逐一展示在頁面上。

使用AJAX獲取列表類型的數據能夠極大地提高用戶體驗，并減少不必要的數據加載和頁面刷新。通過示例代碼，我們展示了如何使用AJAX獲取商品列表和用戶朋友列表，并將其展示在頁面上。讓我們在開發web應用程序時積極采用AJAX技術，為用戶帶來更加流暢和高效的體驗。