AJAX是一種在網頁中異步加載數據的技術，可以實現無刷新的數據交互。在網頁中使用AJAX時，為了提高用戶體驗，通常需要顯示一個加載中的圖案，以提示用戶正在等待數據的加載。本文將詳細介紹如何使用Ajax技術來顯示加載中的圖案，并通過舉例說明其實現過程。
要在網頁中顯示加載中的圖案，可以使用CSS樣式來實現。首先，需要創建一個
元素來包裹數據內容，然后通過CSS樣式來設置該
元素的背景圖案為加載中的圖標。當調用Ajax進行數據請求時，可以通過JavaScript來動態修改
元素的顯示狀態，從而達到顯示加載中圖案的效果。
HTML代碼：
<div id="loading" class="loading"> </div>
CSS代碼：
.loading {
background-image: url('loading.gif');
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}在以上代碼示例中，我們創建了一個id為"loading"的
元素，并將其設置為.position: absolute;以使其處于絕對定位狀態。通過設置display: none;來隱藏該元素，等待加載的時候通過JavaScript來進行顯示。
當需要通過Ajax請求數據時，可以在數據請求的開始和結束時分別進行顯示和隱藏加載中的圖案。以下是一個使用JavaScript和jQuery庫來實現的示例代碼：
JavaScript代碼：
function getData() {
$.ajax({
url: 'data.php',
type: 'GET',
beforeSend: function() {
$('#loading').show();
},
success: function(data) {
// 數據請求成功，處理返回的數據
},
complete: function() {
$('#loading').hide();
}
});
}在以上代碼示例中，我們通過在Ajax請求中的beforeSend和complete回調函數中分別調用jQuery的show()和hide()方法來顯示和隱藏加載中的圖案。在數據請求發送之前，先調用show()方法來顯示圖案；在數據請求完成后，無論請求成功還是失敗，都調用hide()方法來隱藏圖案。這樣就能夠在數據請求過程中正確地顯示和隱藏加載中的圖案。
總結起來，通過使用CSS樣式和JavaScript的show()和hide()方法，我們可以很方便地實現在網頁中顯示加載中的圖案。這種提示用戶等待數據加載的方式，可以提高用戶體驗，讓用戶在等待數據加載的過程中不會感到無聊或者焦慮。