AJAX（Asynchronous JavaScript and XML）是一種在Web應用程序中實現異步通信的技術，它可以在不重新加載整個頁面的情況下，向服務器發送請求并接收響應。在實際的應用中，AJAX被廣泛用于實現動態加載數據和內容。本文將以實現黃金報價案例為例，介紹如何使用AJAX來實現實時的黃金報價信息的獲取和展示。

假設我們有一個簡單的網頁，其中展示了當前的黃金價格。傳統的方式是，當用戶打開網頁時，通過后臺服務器從API獲取黃金價格，然后將其渲染到頁面上。然而，由于黃金價格一直在不斷變動，這種方式無法實時反應當前的價格變化。

使用AJAX，我們可以實現動態更新黃金價格。首先，我們需要了解一個提供黃金報價信息的API。假設有一個名為goldPriceAPI的接口，可以通過發送GET請求到該接口來獲取實時的黃金價格。

// 使用AJAX發送GET請求獲取實時黃金價格
var xhr = new XMLHttpRequest();
xhr.open('GET', 'goldPriceAPI', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var goldPrice = response.price;
// 更新頁面上展示的黃金價格
document.getElementById('gold-price').innerText = goldPrice;
}
}
xhr.send();

在上面的代碼中，我們創建了一個XMLHttpRequest對象，然后打開一個GET請求，將接口地址傳遞給open方法。接著，我們定義了一個onreadystatechange事件處理函數，當請求的狀態改變時會被觸發。當readyState為4且status為200時，表示請求已完成且成功接收到響應。

通過將獲取到的響應解析為JSON格式，并提取其中的黃金價格。然后，我們將該價格更新到id為gold-price的元素上，以實現頁面上實時展示。

在HTML中，我們可以加入一個展示黃金價格的元素，并在加載頁面時觸發AJAX請求獲取并展示實時價格。

<p>當前黃金價格：<span id="gold-price"></span></p>
<script>
// 使用AJAX獲取實時黃金價格
var xhr = new XMLHttpRequest();
xhr.open('GET', 'goldPriceAPI', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var goldPrice = response.price;
// 更新頁面上展示的黃金價格
document.getElementById('gold-price').innerText = goldPrice;
}
}
xhr.send();
</script>

通過以上方式，我們可以實現在網頁上實時展示黃金價格。每次用戶打開頁面時，都會向API發送請求獲取最新的價格，并將其更新到頁面上。這種方式不僅用戶可以隨時了解黃金價格的變化，而且不需要刷新整個頁面，提供了更好的用戶體驗。

通過本案例，我們可以看到AJAX的優勢和應用場景。它可以使網頁變得更加動態和實時，實現數據的異步加載和更新。除了黃金報價案例，AJAX還可以用于實現其它實時數據的展示，例如股票行情、天氣預報等。通過合理地運用AJAX，我們可以為用戶提供更好的網頁體驗。