AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它使用JavaScript和XML來實現異步通信，可以在不刷新整個頁面的情況下更新部分頁面內容。然而，當進行較長時間的同步請求時，用戶可能會感到不耐煩，因為沒有任何反饋顯示請求正在進行中。為了解決這個問題，我們可以通過在同步請求期間添加一個加載動畫來提供反饋給用戶。

現在，讓我們來看一個例子。假設我們有一個按鈕，當用戶點擊該按鈕時，我們使用AJAX發送一個同步請求來獲取服務器上的某些數據。我們可以通過將一個加載動畫添加到頁面并在請求開始和結束時顯示或隱藏它來提供加載反饋。

// HTML
<button id="getDataBtn">獲取數據</button>
<div id="loading"></div>
// CSS
#loading {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

首先，我們在頁面上添加了一個按鈕和一個用于顯示加載動畫的div元素。加載動畫被設置為絕對定位，并在頁面居中。我們還使用CSS創建了一個旋轉動畫，使加載動畫呈現旋轉的效果。

// JavaScript
const getDataBtn = document.getElementById('getDataBtn');
const loading = document.getElementById('loading');
getDataBtn.addEventListener('click', function() {
showLoading(); // 顯示加載動畫
getDataFromServer(); // 發送同步請求
});
function showLoading() {
loading.style.display = 'block';
}
function hideLoading() {
loading.style.display = 'none';
}
function getDataFromServer() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', false); // 使用同步請求
xhr.send();
// 請求結束后隱藏加載動畫
xhr.onload = function() {
hideLoading();
};
}

在JavaScript中，當用戶點擊獲取數據按鈕時，我們首先調用showLoading函數來顯示加載動畫，并通過getDataFromServer函數發送同步請求。在請求結束后，我們使用回調函數隱藏加載動畫。這樣，在用戶等待服務器響應期間，將顯示加載動畫，給予用戶一個視覺上的反饋，告訴他們請求正在進行中。

通過使用上述的加載動畫技術，我們可以改善用戶體驗，保持用戶的興趣，并使他們對請求的進度有一個概念。不僅如此，這種方法還可以增加頁面的可用性，因為在同步請求期間，用戶無法與頁面的其他部分進行交互。

總結起來，當使用AJAX進行同步請求時，我們可以通過向頁面添加一個加載動畫來提供反饋給用戶。這種方法可以改善用戶體驗，使他們對請求的結果保持耐心，并增加頁面的可用性。通過將加載動畫顯示在頁面上，我們可以使用戶了解到請求正在進行中，從而提供了更好的用戶體驗。