在網頁開發中，有時需要向服務器發送請求并獲取數據，在傳統的同步請求中，瀏覽器會等待服務器返回數據后再繼續執行后續的操作。然而，這種同步請求會阻塞瀏覽器的其他操作，導致用戶體驗不佳。為了解決這個問題，Ajax 異步請求應運而生。同步和異步是指請求發送和響應返回的順序關系，本文將詳細介紹 Ajax 異步和同步的設置。

在 Ajax 中，我們可以使用XMLHttpRequest對象發送請求。

// 創建一個 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 同步請求
xhr.open('GET', 'http://example.com/data', false);
xhr.send();
console.log(xhr.responseText);
// 異步請求
xhr.open('GET', 'http://example.com/data', true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};

上述代碼展示了同步和異步請求的區別。在同步請求中，代碼會一直等待服務器返回的數據，并執行后續操作。而在異步請求中，代碼不會等待服務器返回的數據，而是先繼續執行后續操作，當服務器返回響應時，再執行回調函數。

可以使用以下例子更好地理解異步和同步的區別。假設有一個評論功能，當用戶點擊提交按鈕后，頁面需要向服務器發送請求以保存評論，并在保存完成后將新評論添加到頁面上。

// 同步請求
function syncSubmit() {
var comment = document.getElementById('commentInput').value;
xhr.open('POST', 'http://example.com/save-comment', false);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ comment: comment }));
// 添加新評論到頁面上
addComment(comment);
}
// 異步請求
function asyncSubmit() {
var comment = document.getElementById('commentInput').value;
xhr.open('POST', 'http://example.com/save-comment', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 添加新評論到頁面上
addComment(comment);
}
};
xhr.send(JSON.stringify({ comment: comment }));
}

在同步請求的例子中，當用戶點擊提交按鈕后，頁面會等待服務器返回的響應，并在返回后添加新評論到頁面上。這意味著用戶必須等待服務器處理完成，才能繼續瀏覽頁面。

而在異步請求的例子中，當用戶點擊提交按鈕后，頁面會立即繼續響應其他操作，不需要等待服務器返回的響應。當服務器處理完成并返回響應時，調用回調函數將新評論添加到頁面上。這樣用戶無需等待服務器處理完成，可以繼續瀏覽頁面，提升了用戶體驗。

總結來說，Ajax 異步請求能夠提升用戶體驗，因為頁面不會被阻塞，用戶無需等待服務器返回的數據。相比之下，同步請求阻塞了頁面，用戶必須等待服務器處理完成才能進行其他操作。