AJAX（Asynchronous JavaScript and XML）是一種前端技術，通過異步請求與服務器交互，無需刷新整個頁面就能獲取數據并將其展示在網頁上。對于獲取列表數據，AJAX提供了便捷的方法，使得頁面加載更快，用戶體驗更好。本文將介紹如何利用AJAX獲取列表數據，并通過舉例來說明。
在使用AJAX獲取列表數據之前，需要確保已經有一個數據源或者后端接口提供數據。假設有一個后端接口提供如下的列表數據：
[
{
"name": "John",
"age": 20,
"gender": "male"
},
{
"name": "Amy",
"age": 25,
"gender": "female"
},
{
"name": "Peter",
"age": 30,
"gender": "male"
}
]接下來，我們使用AJAX向后端發送請求，獲取列表數據，并在網頁上展示。使用jQuery的AJAX方法可以簡化AJAX請求的寫法，如下所示：
$.ajax({
url: '/api/list',
method: 'GET',
success: function(data) {
// 處理獲取的列表數據
displayList(data);
},
error: function() {
alert('請求失敗！');
}
});
function displayList(data) {
var list = $('#list');
data.forEach(function(item) {
var listItem = $('<li>').text(item.name + ', ' + item.age + ', ' + item.gender);
list.append(listItem);
});
}上述代碼中，我們通過調用$.ajax方法發送GET請求到指定的URL，如果請求成功，會觸發success回調函數，將返回的列表數據傳入displayList函數。該函數通過遍歷列表數據，創建一個li元素并將數據添加到li元素中，最后將li元素添加到id為list的元素中。
在網頁上需要一個容器來展示列表數據，假設容器的HTML結構如下：
<ul id="list"></ul>
接下來，我們將列表數據展示在網頁上：
<!DOCTYPE html> <html> <head> <title>獲取列表數據</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXE+a8pbM2lBXdJ8nKoYBkZ80v7dD8lqcCDdF+jzUr5a+v3oRXvVgt+LDzzyhL"></script> <script src="scripts.js"></script> </head> <body> <ul id="list"></ul> </body> </html>
在上述代碼中，我們引入了jQuery庫和scripts.js腳本文件，其中scripts.js文件包含了之前編寫的AJAX代碼和展示列表數據的邏輯。當頁面加載完成后，AJAX請求會自動發送到后端，并根據返回的列表數據動態地將數據展示在id為list的容器中。
通過以上的步驟，我們成功地利用AJAX獲取了后端提供的列表數據，并在網頁上展示。這種方式無需刷新整個頁面，用戶可以實時地看到最新的數據，提升了用戶體驗。當然，以上只是一個簡單的示例，實際應用中，可能會根據具體需求進行更復雜的數據處理和展示。