Ajax（Asynchronous JavaScript and XML）是一種在Web應用程序中向服務器發送請求并在不刷新整個頁面的情況下獲取數據的技術。通過使用Ajax，我們可以通過發送異步請求與服務器進行交互，從而實現頁面數據的實時更新和控制。舉個例子，假設我們有一個在線電商網站，當用戶點擊某個商品類別時，我們可以使用Ajax發送請求到服務器，獲取該類別下的所有商品數據，然后將其展示給用戶，無需刷新整個頁面。

要發送Ajax請求，我們需要使用JavaScript編寫一段代碼，并與HTML頁面進行交互。下面是一個基本的Ajax請求的代碼示例：

<script>
function fetchData() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
// 處理服務器返回的數據
}
};
xmlhttp.open("GET", "https://example.com/api/products", true);
xmlhttp.send();
}
</script>

在這個示例中，我們定義了一個名為fetchData的函數，當該函數被調用時，它會創建一個XMLHttpRequest對象，并通過open方法設置請求的方法（這里是GET）和URL地址。然后，我們使用send方法發送請求到服務器。當服務器返回響應時，我們可以通過readyState和status屬性來判斷請求的狀態，并處理服務器返回的數據。在這個例子中，我們使用JSON.parse方法將服務器返回的響應文本解析為JavaScript對象，你可以根據自己的需求來處理這些數據。

為了更好地理解Ajax請求如何工作，我們可以進一步探討一個更具體的例子。假設我們正在開發一個天氣應用程序，它可以根據用戶輸入的城市名稱，向服務器發送請求，并獲取該城市的實時天氣信息。以下是一種可能的實現方式：

<input id="cityInput" type="text" placeholder="輸入城市名稱">
<button onclick="getWeather()">獲取天氣</button>
<p id="weatherDisplay"></p>
<script>
function getWeather() {
var city = document.getElementById("cityInput").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var weatherText = "城市：" + response.city + " 天氣：" + response.weather;
document.getElementById("weatherDisplay").innerText = weatherText;
}
};
xmlhttp.open("GET", "https://example.com/api/weather?city=" + city, true);
xmlhttp.send();
}
</script>

在這個示例中，我們通過使用input元素和button元素來接收用戶的輸入。當用戶點擊獲取天氣按鈕時，JavaScript代碼會從輸入框中獲取城市名稱，并將其作為查詢參數添加到URL中。然后，發送Ajax請求到服務器，并處理服務器返回的響應。最后，我們將天氣信息顯示到頁面上的weatherDisplay段落元素中。

通過使用Ajax，我們可以實現更高效、更動態的Web應用程序。通過將數據的獲取和展示分離，我們可以實現實時更新和靈活控制數據的操作。不僅如此，Ajax還可以減少對服務器的請求和響應時間，提升用戶體驗。