AJAX（Asynchronous JavaScript and XML）是一種基于web技術的開發方法，能夠實現無刷新頁面交互。在使用AJAX進行數據請求與響應的過程中，我們常常需要添加“loading”效果來提高用戶體驗。本文將介紹如何使用AJAX添加loading效果，并結合具體案例進行說明。
在添加loading效果之前，我們先了解一下AJAX和loading的使用場景。假設我們正在開發一個實時聊天室，當用戶點擊發送按鈕后，需要向服務器發送一條消息并顯示發送中的loading效果。當服務器返回響應后，loading效果消失，同時顯示發送成功或發送失敗的提示信息。這個過程需要使用AJAX來實現數據請求與響應的無刷新交互。
接下來，讓我們看一下如何使用AJAX來添加loading效果。首先，我們需要創建一個loading圖標的CSS樣式。例如：
.loading {
display: inline-block;
width: 30px;
height: 30px;
background: url("loading.gif") no-repeat center center;
background-size: cover;
}其中，loading.gif是一個加載動畫的圖片，可以根據實際需要替換。
接著，我們需要在發送AJAX請求之前顯示loading效果，當請求完成后，隱藏loading效果。以下是一個通過JavaScript代碼來實現該效果的示例：
function sendMessage() {
var message = document.getElementById("message").value;
var loadingIcon = document.getElementById("loading");
if (message !== "") {
loadingIcon.style.display = "inline-block";
// 使用AJAX發送數據請求
// ...
// 請求完成后隱藏loading效果
// ...
}
}在上述示例中，我們首先獲取輸入框中的消息內容，并獲取loading圖標的元素。然后檢查消息內容是否為空，如果不為空，則顯示loading圖標。接下來，使用AJAX發送數據請求的代碼需要根據實際情況來實現，在請求完成后，我們需要根據服務器的返回結果來決定是顯示發送成功還是發送失敗的提示信息。當請求完成后，無論成功與否，我們都需要隱藏loading圖標：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
loadingIcon.style.display = "none";
if (xhr.status === 200) {
// 請求成功，顯示發送成功的提示信息
// ...
} else {
// 請求失敗，顯示發送失敗的提示信息
// ...
}
}
};在上述代碼中，我們使用xhr.onreadystatechange事件來監聽AJAX請求的狀態變化。當請求狀態為4（即請求完成）時，隱藏loading圖標。同時，我們通過xhr.status來判斷請求的狀態碼，如果為200則表示請求成功，可以顯示發送成功的提示信息，否則可以顯示發送失敗的提示信息。
綜上所述，我們可以使用AJAX來添加loading效果，提高用戶體驗。通過動態顯示loading圖標，用戶可以清晰地知道數據請求正在處理中，同時還可以根據服務器的返回結果來顯示相應的提示信息。無論是開發實時聊天室還是其他需求，都可以根據這個操作來實現loading效果的添加。