AJAX（Asynchronous JavaScript and XML）是一種網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行數(shù)據(jù)通信，實(shí)現(xiàn)頁(yè)面無(wú)刷新更新內(nèi)容的功能。在進(jìn)行AJAX請(qǐng)求的過(guò)程中，如果數(shù)據(jù)量較大或者服務(wù)器響應(yīng)時(shí)間較長(zhǎng)，可能會(huì)導(dǎo)致頁(yè)面出現(xiàn)卡頓現(xiàn)象。為了提高用戶(hù)體驗(yàn)，我們可以通過(guò)加載loading動(dòng)畫(huà)來(lái)提示用戶(hù)正在等待數(shù)據(jù)的加載過(guò)程。

當(dāng)用戶(hù)進(jìn)行某個(gè)操作，需要等待服務(wù)器返回?cái)?shù)據(jù)時(shí)，我們可以在頁(yè)面中預(yù)先準(zhǔn)備一個(gè)loading動(dòng)畫(huà)，并在AJAX請(qǐng)求開(kāi)始前顯示該動(dòng)畫(huà)，等數(shù)據(jù)加載完成后再將動(dòng)畫(huà)隱藏。下面是一個(gè)例子，演示了如何使用AJAX加載loading動(dòng)畫(huà)。

<p>// 定義一個(gè)全局變量，表示是否正在執(zhí)行AJAX請(qǐng)求
var isLoading = false;
// 展示loading動(dòng)畫(huà)
function showLoading() {
document.getElementById('loading').style.display = 'block';
}
// 隱藏loading動(dòng)畫(huà)
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
// 發(fā)起AJAX請(qǐng)求
function makeAJAXRequest() {
// 如果上一次請(qǐng)求還未完成，則不再發(fā)起新的請(qǐng)求
if (isLoading) {
return;
}
isLoading = true;
showLoading();
// 發(fā)起AJAX請(qǐng)求的代碼
...
// 數(shù)據(jù)成功加載后，隱藏loading動(dòng)畫(huà)
hideLoading();
isLoading = false;
}

在上面的代碼中，我們首先定義了一個(gè)isLoading變量，用來(lái)表示是否正在執(zhí)行AJAX請(qǐng)求。然后，我們定義了showLoading函數(shù)和hideLoading函數(shù)，分別用來(lái)顯示和隱藏loading動(dòng)畫(huà)。最后，我們定義了makeAJAXRequest函數(shù)，用于發(fā)起AJAX請(qǐng)求。

在makeAJAXRequest函數(shù)中，我們首先判斷isLoading變量的值，如果上一次請(qǐng)求還未完成，則不再發(fā)起新的請(qǐng)求。如果可以發(fā)起新的請(qǐng)求，我們將isLoading標(biāo)記為true，并調(diào)用showLoading函數(shù)展示loading動(dòng)畫(huà)。

接下來(lái)是AJAX請(qǐng)求的代碼，在這里可以根據(jù)具體需求使用XMLHttpRequest對(duì)象或者jQuery框架的$.ajax方法來(lái)發(fā)起請(qǐng)求，獲取數(shù)據(jù)。

在數(shù)據(jù)成功加載后，我們調(diào)用hideLoading函數(shù)隱藏loading動(dòng)畫(huà)，并將isLoading標(biāo)記為false，表示請(qǐng)求已完成。

以上就是使用AJAX加載loading的方法，通過(guò)顯示和隱藏loading動(dòng)畫(huà)，我們可以給用戶(hù)提供更好的體驗(yàn)，讓用戶(hù)知道數(shù)據(jù)正在加載，避免頁(yè)面長(zhǎng)時(shí)間無(wú)響應(yīng)的現(xiàn)象。