AJAX（Asynchronous JavaScript and XML）是一種用于創建快速、動態網頁的技術，能夠實現前端與后臺之間的數據交互。通過 AJAX 技術，我們可以在不刷新整個頁面的情況下，讀取后臺數據，并將其顯示在網頁中。本文將介紹如何使用 AJAX 讀取后臺數據。

在使用 AJAX 讀取后臺數據之前，我們需要先創建一個后臺 API 接口，用于提供數據。假設我們要讀取一個報名表的數據，后臺接口的地址為 /api/enrollment，返回的數據格式是 JSON。接下來，我們將使用 jQuery 提供的 AJAX 方法來讀取這個接口的數據。

首先，我們需要在 HTML 頁面中引入 jQuery 庫：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下來，我們可以編寫一段 JavaScript 代碼，使用 AJAX 方法來讀取后臺數據：

<script>
$.ajax({
url: '/api/enrollment',
method: 'GET',
success: function(data) {
// 在這里處理后臺返回的數據
},
error: function() {
// 發生錯誤時的處理邏輯
}
});
</script>

在上面的代碼中，我們通過 jQuery 的 AJAX 方法指定了要請求的 URL 和請求方法（GET）。當 AJAX 請求成功返回數據時，會執行 success 回調函數，并將后臺返回的數據作為參數傳遞給它。我們可以在這個回調函數中處理后臺數據，例如將數據顯示在頁面上：

$.ajax({
// ...
success: function(data) {
// 假設后臺返回的數據格式為 [{name: '張三', age: 20}, {name: '李四', age: 25}]
for (var i = 0; i < data.length; i++) {
var person = data[i];
var name = person.name;
var age = person.age;
// 在頁面上創建一個新的 <div> 元素，顯示姓名和年齡
$('<div>').text('姓名：' + name + '，年齡：' + age).appendTo('body');
}
},
// ...
});

在上面的例子中，我們通過遍歷后臺返回的數據，創建了一系列包含姓名和年齡的

<enrollments>
<enrollment>
<name>張三</name>
<age>20</age>
</enrollment>
<enrollment>
<name>李四</name>
<age>25</age>
</enrollment>
</enrollments>

$.ajax({
// ...
success: function(data) {
var xmlDoc = $.parseXML(data);
var $xml = $(xmlDoc);
$xml.find("enrollment").each(function() {
var name = $(this).find("name").text();
var age = $(this).find("age").text();
$('<div>').text('姓名：' + name + '，年齡：' + age).appendTo('body');
});
},
// ...
});