Ajax執(zhí)行完成之后才往下執(zhí)行

由于Javascript是單線程的語言，所以在執(zhí)行耗時操作時，會阻塞瀏覽器的其他操作。當(dāng)我們需要從服務(wù)器端獲取數(shù)據(jù)時，傳統(tǒng)的方法是使用同步請求，即請求發(fā)送后，瀏覽器會一直等待服務(wù)器的響應(yīng)，這樣會導(dǎo)致頁面的卡頓和用戶體驗(yàn)的下降。而使用Ajax技術(shù)可以實(shí)現(xiàn)在同一頁面上發(fā)送異步請求，當(dāng)請求完成后再進(jìn)行后續(xù)操作，提高頁面的響應(yīng)速度。

舉個例子來說明，假設(shè)我們有一個簡單的網(wǎng)頁上有一個按鈕，點(diǎn)擊按鈕時會向服務(wù)器發(fā)送一個AJAX請求，并在完成后顯示服務(wù)器返回的數(shù)據(jù)。如果我們使用同步請求，那么當(dāng)我們點(diǎn)擊按鈕時，整個頁面都會被鎖定，直到服務(wù)器返回?cái)?shù)據(jù)為止，用戶體驗(yàn)會受到很大影響。而如果使用異步請求，當(dāng)我們點(diǎn)擊按鈕時，頁面會繼續(xù)響應(yīng)其他操作，比如可以繼續(xù)滾動頁面，輸入文字等，同時在請求完成后再顯示數(shù)據(jù)，用戶體驗(yàn)會更流暢。

要實(shí)現(xiàn)Ajax請求完成后才繼續(xù)執(zhí)行后續(xù)的操作，可以使用回調(diào)函數(shù)。回調(diào)函數(shù)是在異步請求完成后執(zhí)行的函數(shù)，通過將后續(xù)操作作為回調(diào)函數(shù)傳入，可以保證在請求完成時再執(zhí)行后續(xù)操作。

function getData(callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open("GET", "example.com/api/data", true);
xhr.send();
}
getData(function(data) {
console.log(data);
// 后續(xù)操作
});

在上面的例子中，我們定義了一個名為getData的函數(shù)，該函數(shù)接受一個名為callback的參數(shù)，這個參數(shù)是一個函數(shù)。在函數(shù)內(nèi)部，我們通過XMLHttpRequest對象發(fā)送一個GET請求，并在請求完成后執(zhí)行callback函數(shù)，并將服務(wù)器返回的數(shù)據(jù)作為參數(shù)傳入。然后我們調(diào)用getData函數(shù)，將后續(xù)操作作為回調(diào)函數(shù)傳入，當(dāng)請求完成后，會自動執(zhí)行后續(xù)操作。

使用回調(diào)函數(shù)可以讓我們方便地控制代碼的執(zhí)行順序。在實(shí)際的開發(fā)中，我們通常會在請求數(shù)據(jù)時顯示一個加載動畫，然后在請求完成后隱藏動畫并顯示數(shù)據(jù)。這樣可以提供更好的用戶體驗(yàn)。

總結(jié)一下，通過Ajax執(zhí)行完成之后才往下執(zhí)行，我們可以提高頁面的響應(yīng)速度，提升用戶體驗(yàn)。使用回調(diào)函數(shù)可以方便地控制代碼的執(zhí)行順序，使得后續(xù)操作在請求完成后執(zhí)行。