Ajax是一種用于實現(xiàn)不刷新整個頁面的異步數(shù)據(jù)交互技術(shù)。通過Ajax，我們可以在不刷新頁面的情況下向服務(wù)器發(fā)送請求并接收響應(yīng)。在Ajax中，我們可以使用同步和異步刷新兩種方式來更新頁面的數(shù)據(jù)。同步刷新是一種在發(fā)送請求時等待服務(wù)器響應(yīng)完成之后再更新頁面數(shù)據(jù)的方式，而異步刷新則是一種在發(fā)送請求之后不直接等待服務(wù)器響應(yīng)，而是繼續(xù)執(zhí)行其他代碼，當(dāng)接收到服務(wù)器響應(yīng)后再回調(diào)函數(shù)中更新頁面數(shù)據(jù)的方式。

我們來看一個簡單的例子來說明同步和異步刷新的區(qū)別。假設(shè)我們有一個網(wǎng)頁中包含一個按鈕和一個用于顯示時間的元素：

<button id="refreshBtn">點擊刷新時間</button>
<span id="timeDisplay"></span>

當(dāng)我們點擊按鈕時，希望能夠?qū)崟r更新時間。下面是一個使用Ajax實現(xiàn)的同步刷新的例子：

const refreshBtn = document.getElementById("refreshBtn");
const timeDisplay = document.getElementById("timeDisplay");
refreshBtn.addEventListener("click", function() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "/getTime", false); // 發(fā)送同步請求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const time = xhr.responseText;
timeDisplay.innerText = time;
}
};
xhr.send();
});

在這個例子中，我們在點擊按鈕時，創(chuàng)建了一個XMLHttpRequest對象，并打開了一個GET請求，請求的URL為"/getTime"。通過設(shè)置open方法的第三個參數(shù)為false，我們指定了這是一個同步請求。然后，我們設(shè)置了一個onreadystatechange事件處理函數(shù)，當(dāng)請求狀態(tài)為4（即請求完成）且響應(yīng)狀態(tài)為200（即成功接收到響應(yīng)）時，我們將響應(yīng)的內(nèi)容作為時間顯示在元素中。

上面的代碼中使用的同步請求方式，并不推薦在實際開發(fā)中使用。因為同步請求會阻塞頁面，直到響應(yīng)完成之后才能繼續(xù)執(zhí)行其他代碼，這可能會導(dǎo)致頁面卡頓。相反，異步刷新則是Ajax中更常用的方式。下面是一個使用異步刷新的例子：

refreshBtn.addEventListener("click", function() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "/getTime", true); // 發(fā)送異步請求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const time = xhr.responseText;
timeDisplay.innerText = time;
}
};
xhr.send();
});

在這個例子中，我們將open方法的第三個參數(shù)設(shè)置為true，指定這是一個異步請求。這樣，在發(fā)送請求后，頁面不會等待響應(yīng)完成，而是直接繼續(xù)執(zhí)行后續(xù)代碼。當(dāng)接收到響應(yīng)后，在onreadystatechange事件處理函數(shù)中更新頁面數(shù)據(jù)。

通過比較同步刷新和異步刷新的例子，我們可以看到異步刷新的優(yōu)勢。同步刷新會導(dǎo)致頁面等待服務(wù)器響應(yīng)而出現(xiàn)卡頓的情況，而異步刷新則可以在發(fā)送請求后繼續(xù)執(zhí)行其他代碼，提升了頁面的流暢度。

總的來說，通過Ajax可以實現(xiàn)同步和異步刷新。同步刷新通過等待服務(wù)器的響應(yīng)再更新頁面，而異步刷新則先發(fā)送請求，不直接等待響應(yīng)，而是繼續(xù)執(zhí)行其他代碼，待接收到響應(yīng)后再通過回調(diào)函數(shù)更新頁面數(shù)據(jù)。在實際開發(fā)中，我們通常使用異步刷新來提升用戶體驗。