在網頁開發中，我們經常會遇到需要獲取服務器端數據并動態更新網頁內容的情況。傳統的方式是通過刷新整個頁面或者點擊按鈕觸發頁面跳轉來獲取最新數據。然而，這種方式在用戶體驗上存在很大不足。為了解決這個問題，Ajax（Asynchronous JavaScript and XML）應運而生。Ajax技術允許網頁通過異步方式與服務器端進行通信，獲取數據并不刷新整個頁面，將數據實時顯示在網頁上，極大地提高了用戶體驗。本文將介紹如何使用Ajax來通過JSON獲取數據，并通過幾個簡單的例子展示其用法和效果。

為了使用Ajax獲取服務器端的JSON數據，我們需要借助于JavaScript中的XMLHttpRequest對象（簡稱XHR）。XHR對象可以向服務器發送異步請求并接收響應，實現與服務器的交互。我們首先需要實例化一個XHR對象，然后定義其回調函數，當服務器返回響應時，該回調函數將被執行。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);  // 發送GET請求，獲取data.json文件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {  // 請求成功完成，并且響應狀態碼為200
var data = JSON.parse(xhr.responseText);  // 將響應數據解析為JSON對象
// 在此處處理數據并更新網頁內容
}
};
xhr.send();

上述示例代碼首先實例化了一個XHR對象，并使用open方法指定了請求的類型（GET）和URL（data.json）。然后，定義了XHR對象的onreadystatechange事件回調函數，該函數在xhr對象的readyState屬性發生變化時被調用（readyState為4表示請求已完成）。在回調函數中，我們首先驗證響應的狀態碼是否為200（表示請求成功），然后通過xhr.responseText獲取響應的文本內容，并將其解析為JSON對象。

為了更好地理解Ajax獲取JSON數據的過程，我們來看一個實例。假設我們正在開發一個網頁上的一個評論功能。用戶可以輸入評論內容并提交，然后我們將這些評論保存在服務器端。為了實現實時顯示最新評論的功能，我們可以使用Ajax定期向服務器端請求最新數據，并將其動態添加到網頁上。

setInterval(function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'comments.json', true);  // 發送GET請求，獲取最新評論數據
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var commentsContainer = document.getElementById('comments-container');
commentsContainer.innerHTML = '';  // 清空原有評論
for (var i = 0; i< data.length; i++) {
var commentDiv = document.createElement('div');
commentDiv.innerHTML = '
' + data[i].comment + '
By ' + data[i].author + '
';
commentsContainer.appendChild(commentDiv);  // 添加新評論
}
}
};
xhr.send();
}, 5000);  // 每5秒鐘請求一次最新評論

上述代碼通過使用setInterval函數，每5秒鐘向服務器端發送一次請求，獲取最新評論數據。然后，在回調函數中，我們先清空原有的評論容器，然后遍歷新獲取的評論數據，并將每一條評論添加到評論容器中。通過這種方式，我們實現了實時顯示最新評論的功能。

通過上述例子，我們可以看到，使用Ajax來獲取JSON數據，可以極大地豐富網頁的內部內容，并提升用戶體驗。我們可以將其應用到各種場景中，比如獲取最新新聞、加載動態數據、實時更新股票價格等。

總結起來，通過Ajax和JSON，我們可以實現網頁與服務器端的異步通信，通過獲取JSON格式數據并動態更新網頁內容，提高用戶體驗和網頁的交互性。使用XHR對象進行數據的請求和響應處理，將服務器端返回的數據解析為JSON對象，可以輕松實現這一功能。