在現代的Web開發中，Ajax（Asynchronous JavaScript and XML）已經成為一種非常常用的技術。它通過在后臺與服務器進行異步數據交換，使得我們可以在不刷新整個網頁的情況下更新部分內容。那么，Ajax底層的異步是怎么回事呢？
Ajax的底層異步是通過JavaScript中的XMLHttpRequest對象實現的。當我們在網頁中發起一個異步請求時，JavaScript會創建一個XMLHttpRequest對象，然后使用該對象與服務器進行通信。通過發送HTTP請求到服務器并接收服務器返回的數據，我們可以實現在不刷新頁面的情況下更新頁面中的數據。
讓我們來看一個簡單的例子來理解Ajax底層異步是如何工作的。假設我們有一個網頁，其中有一個按鈕，當我們點擊按鈕時，需要從服務器獲取一些數據并顯示在網頁上。在以前的開發中，我們會在點擊按鈕時刷新整個網頁來獲取數據并顯示，而現在我們可以使用Ajax來實現部分內容的更新。
假設我們的網頁中有以下代碼：

<button onclick="loadData()">點擊獲取數據</button>
<p id="data"></p>

當我們點擊按鈕時，會觸發一個名為loadData的JavaScript函數。在這個函數中，我們可以使用XMLHttpRequest對象來與服務器進行通信并獲取數據：

<script>
function loadData() {
var xhr = new XMLHttpRequest(); // 創建一個XMLHttpRequest對象
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { // 當狀態碼為200并且請求已經完成時
document.getElementById("data").innerHTML = xhr.responseText; // 將服務器返回的數據設置為"data"元素的內容
}
};
xhr.open("GET", "data.php", true); // 發送一個GET請求到"data.php"，使用異步模式
xhr.send(); // 發送請求
}
</script>

在這段代碼中，我們首先創建了一個XMLHttpRequest對象xhr，并設置了一個回調函數xhr.onreadystatechange。當xhr對象的狀態發生變化時，這個回調函數會被觸發。
在回調函數中，我們首先判斷xhr對象的readyState屬性是否為4（即請求已經完成），而且xhr對象的status屬性是否為200（即請求成功）。如果滿足這兩個條件，表示我們已經成功地從服務器獲取到了數據，并且可以將這些數據顯示在網頁上。
最后，我們通過調用xhr.open方法設置請求的方式和URL，并通過xhr.send方法發送請求到服務器。在這個例子中，我們發送了一個GET請求到"data.php"這個URL，并將異步模式設置為true。
通過以上的例子，我們可以看到，Ajax底層的異步是通過JavaScript中的XMLHttpRequest對象來實現的。我們可以使用該對象與服務器進行通信，并獲取到服務器返回的數據。在回調函數中，我們可以對這些數據進行處理，并將它們更新到網頁的相應位置，實現局部更新而不刷新整個頁面。
總結起來，Ajax底層的異步是通過XMLHttpRequest對象實現的。我們可以使用該對象與服務器進行通信，并在數據返回后對它們進行處理和更新。這種底層異步的機制帶來了更流暢的用戶體驗，并提供了更多的實時交互性。無論是在表單驗證、動態加載內容還是實時更新數據，在現代的Web開發中，Ajax已經變得不可或缺。