AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上實現異步加載內容的技術。它允許網頁在不刷新的情況下與服務器進行通信，并根據服務器返回的數據更新網頁內容。其中，實現loading效果是AJAX常見的應用之一。通過在頁面加載期間顯示loading動畫或進度條，用戶可以清楚地了解正在加載的過程，提高用戶體驗。
例如，在一個網頁中，當用戶點擊某個按鈕觸發AJAX請求時，可以顯示一個loading動畫，提示用戶正在等待服務器響應。具體的實現方式如下：
// HTML代碼
......
// JavaScript代碼
function fetchData() {
// 顯示loading動畫
document.getElementById("loading").style.display = "block";
// 發送AJAX請求
...
// 請求完成后隱藏loading動畫
document.getElementById("loading").style.display = "none";
}上述代碼中，首先在HTML中定義了一個id為"loading"的
元素，其中包含一個loading動畫的圖片。然后，在執行AJAX請求之前，將該
的display屬性設置為"block"，使其顯示出來；當請求完成后，再將其display屬性設置為"none"，使其隱藏起來。
除了顯示loading動畫，還可以通過進度條的方式展示AJAX請求的進度。進度條可以是一個動態的條，通過變化的寬度顯示請求的進度。我們可以通過設置CSS樣式和動態計算進度來實現進度條的效果。具體的實現方式如下：
// HTML代碼
......
// JavaScript代碼
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onloadstart = function() {
// 顯示進度條
document.getElementById("progress").style.width = "0%";
};
xhr.onprogress = function(event) {
// 計算進度并更新進度條寬度
var progress = Math.round((event.loaded / event.total) * 100);
document.getElementById("progress").style.width = progress + "%";
};
xhr.onloadend = function() {
// 隱藏進度條
document.getElementById("progress").style.width = "100%";
setTimeout(function() {
document.getElementById("progress").style.width = "0%";
}, 1000);
};
xhr.send();
}上述代碼中，首先在HTML中定義了一個id為"progress"的
元素，用于顯示進度條。然后，在AJAX請求的不同階段，分別設置了相應的事件處理函數：在請求開始時，將進度條的寬度設置為0%；在請求進行中，根據當前加載的數據大小和總數據大小計算進度，并更新進度條的寬度；在請求完成后，先將進度條的寬度設置為100%，然后通過setTimeout函數將其寬度重新設置為0%，以達到淡出的效果。
綜上所述，通過使用AJAX技術，并借助loading動畫或進度條等效果，可以明確地告訴用戶當前頁面正在加載中，提高用戶的等待體驗。