在現代的Web開發中，AJAX（Asynchronous JavaScript and XML）技術是非常重要的一部分。它可以使得網頁與服務器之間的通信更加高效和靈活。通過使用AJAX，我們可以在不刷新整個頁面的情況下，向服務器請求數據并對頁面進行動態更新。而獲取JSON數據則是AJAX中最常見的一種方式。

首先，我們來看一個簡單的例子，假設我們有一個網站的搜索功能，當用戶輸入關鍵詞并點擊搜索按鈕時，我們希望向服務器請求相關的數據并動態顯示在頁面上。通過使用AJAX來獲取JSON數據，我們可以輕松實現這一功能。

<script>
function search(keyword) {
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/search?keyword=' + keyword, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取并處理JSON數據
var data = JSON.parse(xhr.responseText);
displayResults(data);
}
};
xhr.send();
}
function displayResults(data) {
// 動態更新頁面
var resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
if (data.length === 0) {
resultsDiv.innerHTML = '無相關搜索結果';
} else {
for (var i = 0; i < data.length; i++) {
var result = document.createElement('p');
result.innerHTML = data[i].title;
resultsDiv.appendChild(result);
}
}
}
</script>

上述代碼首先定義了一個search函數，當用戶點擊搜索按鈕時，我們調用該函數并傳入用戶輸入的關鍵詞。函數內部通過創建一個XMLHttpRequest對象并發送GET請求到服務器的/search路徑，同時將關鍵詞作為參數傳遞給服務器。在服務器返回響應的時候，我們調用displayResults函數來獲取并處理返回的JSON數據。

displayResults函數中，我們首先獲取頁面上的結果容器（這里假設其id為“results”），然后遍歷JSON數據并動態創建p標簽來顯示每個結果的標題。如果JSON數據為空，則在結果容器中顯示“無相關搜索結果”。

通過這種方式，當用戶點擊搜索按鈕后，不需要刷新整個頁面，只需要發送AJAX請求，并將返回的JSON數據動態更新到頁面上。這樣可以極大地提升用戶體驗。

除了搜索功能，獲取JSON數據的方式還可以用于很多其他的場景。例如，當用戶在網站上添加商品到購物車時，我們可以使用AJAX來向服務器發送請求，并將返回的JSON數據用于更新購物車的數量和總價。這樣用戶可以實時地知道購物車中的商品數量和總價。又或者，當用戶在社交媒體上發布一條新的狀態時，我們可以使用AJAX來將狀態信息發送到服務器，并將返回的JSON數據用于更新頁面上的狀態列表。

總之，使用AJAX獲取JSON數據是現代Web開發中的重要技術之一。它可以使得網頁與服務器之間的通信更加高效和靈活，顯著提升用戶體驗。無論是搜索功能、購物車結算還是社交媒體狀態更新，AJAX都為我們提供了強大的工具來實現這些功能。我們只需要利用AJAX發送請求，并處理返回的JSON數據，就可以輕松地實現動態更新頁面的效果。