AJAX（Asynchronous JavaScript and XML）是一種在 web 開發中常用的技術，可以實現頁面的異步刷新，提升用戶體驗。然而，有時候我們需要將原本同步的 AJAX 請求轉化為異步的方式，以避免頁面的卡頓和阻塞。本文將介紹如何將 AJAX 同步請求轉化為異步請求，并通過舉例說明其使用。

AJAX 同步請求是指在發送請求后，腳本會一直等待服務器返回數據并在接收到數據后執行后續代碼。這種方式會導致頁面長時間等待，用戶體驗較差。而異步請求則是在發送請求后，繼續執行后續代碼，不等待服務器返回數據。當服務器返回響應時，會觸發一個回調函數來處理數據。使用異步請求可以提升頁面的響應速度，并允許多個請求同時發送。

下面我們通過一個簡單的例子來說明如何將 AJAX 同步請求轉化為異步請求：

<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', false); // 同步請求
xhr.send();
return xhr.responseText;
}
function displayData(data) {
var container = document.getElementById('data-container');
container.innerHTML = data;
}
var result = getData();
displayData(result);
</script>

以上代碼中的 AJAX 請求是同步的，即在調用 `xhr.send()` 發送請求后，代碼會一直等待服務器返回數據，然后將返回的數據存儲在 `xhr.responseText` 中，最后通過調用 `displayData` 函數來展示數據。這種同步方式會導致頁面停止響應，直到請求完成。

為了將以上的同步請求轉化為異步請求，我們只需將 `xhr.open` 函數的第三個參數設置為 `true` ，代表該請求是異步的：

<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 異步請求
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
displayData(xhr.responseText);
}
};
xhr.send();
}
function displayData(data) {
var container = document.getElementById('data-container');
container.innerHTML = data;
}
getData();
</script>

在以上代碼中，我們將 `xhr.open` 函數的第三個參數設置為 `true`，表示發送異步請求。然后，我們定義一個 `xhr.onreadystatechange` 回調函數來監聽服務器的響應，如果請求完成且響應狀態碼為 200，就調用 `displayData` 函數來展示數據。最后，我們直接調用 `getData` 函數來發送請求。

通過以上的改動，我們成功將原本的同步 AJAX 請求轉化為異步請求。這樣，在請求發送之后，代碼會繼續執行后續任務，不會阻塞頁面的響應。

總結來說，將 AJAX 同步請求轉化為異步請求可以提升頁面的響應速度和用戶體驗。通過設置 `xhr.open` 函數的第三個參數為 `true`，并使用回調函數來處理服務器的響應，我們可以實現異步請求的功能。在實際開發中，根據不同的需求和接口，選擇適當的同步或異步方式可以優化網頁性能并改善用戶體驗。