Ajax（Asynchronous JavaScript and XML）是一種在前端和后端之間進行異步數據交換的技術。它能夠在不刷新整個頁面的情況下，獲取到后端返回的數據，并且將數據展示在頁面上，從而提升用戶體驗。在本文中，我們將探討如何使用 Ajax 來從后端獲取 JSON 數據，并使用這些數據來進行界面的展示和交互。

假設我們有一個簡單的待辦事項列表網站，用戶可以在網站上添加、刪除和完成各種待辦事項。網站的后端使用 JSON 格式來存儲待辦事項的數據。我們希望在用戶點擊按鈕時，通過 Ajax 來獲取最新的待辦事項列表并展示在頁面上。

下面是一段示例代碼，展示了如何使用 jQuery 來實現這個功能：

$(document).ready(function() {// 當用戶點擊按鈕時，觸發 Ajax 請求$('#getTodosButton').click(function() {$.ajax({url: '/todos',type: 'GET',dataType: 'json',success: function(data) {// 成功獲取到數據后，更新頁面上的待辦事項列表$('#todoList').empty();for (var i = 0; i< data.length; i++) {$('#todoList').append('
' + data[i].title + '
');}},error: function() {alert('獲取待辦事項列表失敗。');}});});});

在上面的代碼中，我們首先使用 jQuery 的$(document).ready()函數來確保頁面加載完畢后才執行 JavaScript 代碼。接著，當用戶點擊按鈕時，觸發了一個 Ajax 請求。請求的 URL 是 '/todos'，請求類型是 'GET'，并指定了數據類型為 'json'。

在成功獲取到數據后，我們使用$('#todoList').empty()函數來清空原有的待辦事項列表，并使用一個循環來遍歷返回的 JSON 數據，將每個待辦事項的標題插入到頁面的待辦事項列表中。

如果請求失敗，我們使用alert()函數來顯示一個提示框。

通過上述代碼，我們實現了從后端獲取 JSON 數據，并將其展示在頁面上。用戶在點擊按鈕時，無需刷新整個頁面，只需要通過 Ajax 請求即可更新待辦事項列表。

以此類推，我們還可以在用戶完成某個待辦事項時，使用 Ajax 請求將此完成狀態更新到后端，并反饋給用戶已完成。總之，Ajax 可以使頁面在與后端進行數據交互時更加快速和動態，從而提高用戶的操作體驗。