在現代的網頁開發中，我們經常會遇到需要異步加載數據的情況。這種情況下，為了提升用戶體驗，我們常常需要在頁面上顯示一個Loading動畫，以告知用戶數據正在加載中。AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交換的技術，它可以實現無刷新更新頁面內容。在使用AJAX異步加載時，顯示Loading動畫是一種非常常見的需求。

假設我們正在開發一個新聞網站，用戶在瀏覽新聞列表時，我們采用AJAX異步加載技術來實現無刷新更新新聞內容。在用戶點擊某個新聞時，我們向服務器請求該新聞的詳細內容，而在等待服務器響應的過程中，我們希望頁面顯示一個Loading動畫，以告知用戶數據正在加載中。

// HTML代碼
<div id="newsContent"></div>
<img id="loading" src="loading.gif" style="display: none;">
// JavaScript代碼
function loadNewsContent(newsId) {
var newsContentElement = document.getElementById("newsContent");
var loadingElement = document.getElementById("loading");
// 顯示Loading動畫
loadingElement.style.display = "block";
// 發送AJAX請求獲取新聞詳細內容
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 隱藏Loading動畫
loadingElement.style.display = "none";
// 將新聞詳細內容顯示在頁面上
newsContentElement.innerHTML = xhr.responseText;
}
};
xhr.open("GET", "/news/" + newsId, true);
xhr.send();
}

在這段代碼中，我們在HTML中定義了一個用于顯示新聞內容的<div>元素（具體樣式省略）。同時，我們還在頁面中添加了一個用于顯示Loading動畫的<img>標簽，并將其初始樣式設置為不可見（display: none;）。在JavaScript代碼中，首先通過getElementById方法獲取到<div>和<img>元素的引用。然后，在發送AJAX請求之前，我們將顯示Loading動畫的<img>元素的display屬性設置為block，使其在頁面中可見。等待服務器響應后，我們根據響應的結果進行相應的處理，并將Loading動畫隱藏起來。

除了上面的例子，AJAX異步加載時顯示Loading動畫的需求還有很多。比如，在一個電商網站上，用戶點擊某個商品的詳情頁面時，我們可以通過顯示Loading動畫告知用戶數據正在加載中；在一個社交網站上，用戶點擊某個好友的個人主頁時，我們也可以通過顯示Loading動畫告知用戶數據正在加載中。無論是哪種情況，通過顯示Loading動畫，可以讓用戶明確地感知到數據加載的過程，避免用戶對頁面失去耐心或產生困惑。

總之，通過在AJAX異步加載時顯示Loading動畫，我們可以提升用戶體驗，讓用戶明確地感知到數據正在加載中的狀態。這樣的動畫提示在各種網頁應用場景中都非常常見，它使得用戶能夠清楚地知道當前頁面正在進行操作，并在等待數據加載完畢的過程中保持耐心。