隨著互聯(lián)網(wǎng)的發(fā)展和普及，人們對(duì)于網(wǎng)頁(yè)的要求也越來(lái)越高。作為現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)的必備技術(shù)之一，Ajax（Asynchronous JavaScript and XML）在提高用戶體驗(yàn)方面發(fā)揮了重要作用。當(dāng)用戶在網(wǎng)頁(yè)上提交表單或點(diǎn)擊按鈕時(shí)，傳統(tǒng)的同步提交會(huì)導(dǎo)致整個(gè)頁(yè)面刷新，給用戶帶來(lái)等待的時(shí)間和不便。而通過(guò)Ajax技術(shù)，我們可以實(shí)現(xiàn)異步提交，同時(shí)使用加載動(dòng)畫給用戶一個(gè)良好的交互體驗(yàn)。

舉例來(lái)說(shuō)明，在一個(gè)購(gòu)物網(wǎng)站中，當(dāng)用戶點(diǎn)擊“加入購(gòu)物車”按鈕時(shí)，傳統(tǒng)的同步提交會(huì)導(dǎo)致整個(gè)頁(yè)面刷新，用戶需要耐心等待頁(yè)面重新加載。然而，如果我們使用Ajax技術(shù)，可以在后臺(tái)異步提交數(shù)據(jù)并更新購(gòu)物車數(shù)量，而無(wú)需刷新整個(gè)頁(yè)面。同時(shí)，我們可以為用戶顯示一個(gè)加載動(dòng)畫，告訴用戶正在處理請(qǐng)求，增加用戶的耐心和等待時(shí)間的感知。

// HTML代碼
加載中，請(qǐng)稍候...
// JavaScript代碼
function addToCart() {
var productId = document.getElementById("productId").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "addToCart.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("cartCount").innerHTML = xhr.responseText;
hideLoadingAnimation();
}
};
showLoadingAnimation();
xhr.send("productId=" + productId);
}
function showLoadingAnimation() {
document.getElementById("loading").style.display = "block";
}
function hideLoadingAnimation() {
document.getElementById("loading").style.display = "none";
}

在上面的代碼中，我們使用了一個(gè)

// PHP代碼（addToCart.php）