在現代的網頁開發中，AJAX（Asynchronous JavaScript and XML）技術是非常重要的一部分。它可以實現在不刷新整個頁面的情況下，與服務器進行數據交互，從而提升用戶體驗。而在使用AJAX的過程中，最常遇到的就是從服務器獲取JSON（JavaScript Object Notation）格式的數據。接下來，我們將通過幾個示例，詳細介紹如何使用AJAX接收到的JSON數據。

假設我們有一個類似于博客的網站，我們需要從服務器獲取一篇文章的詳細信息。服務器返回給我們的JSON數據可能如下所示：

{
"title": "如何使用AJAX接收JSON數據",
"author": "小助手",
"content": "在現代的網頁開發中，使用AJAX接收JSON數據非常常見。..."
}

一般來說，我們可以使用JavaScript中內置的XMLHttpRequest對象來通過AJAX獲取JSON數據：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
let responseData = JSON.parse(xhr.responseText);
// 在這里對獲取到的JSON數據進行操作
}
};
xhr.open("GET", "http://example.com/article/1", true);
xhr.send();

在這段代碼中，我們創建了一個XMLHttpRequest對象，然后使用open方法指定了請求的方法和URL，并通過send方法發送請求。接著，在onreadystatechange事件處理程序中，我們判斷請求的狀態和狀態碼，當狀態為4且狀態碼為200時，說明請求成功，然后我們使用JSON.parse方法將獲取到的JSON字符串解析成JavaScript對象。

接收到JSON數據后，我們可以根據需要進行相關操作。例如，我們可以將標題和作者的信息展示在頁面上：

let title = responseData.title;
let author = responseData.author;
document.getElementById("title").innerHTML = title;
document.getElementById("author").innerHTML = author;

這段代碼中，我們通過getElementById方法獲取到頁面上的標題和作者的元素，然后將獲取到的數據賦值給這些元素的innerHTML屬性，從而在頁面上顯示這些信息。

除了獲取固定的JSON數據外，我們還可以根據用戶的輸入來獲取不同的JSON數據。例如，用戶在輸入框中輸入了一個關鍵字，我們可以將這個關鍵字發送到服務器，并獲取相關的JSON數據。下面是一個示例：

HTML部分：

<input type="text" id="keyword" placeholder="請輸入關鍵字">
<button onclick="search()">搜索</button>

JavaScript部分：

function search() {
let keyword = document.getElementById("keyword").value;
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
let responseData = JSON.parse(xhr.responseText);
// 在這里對獲取到的JSON數據進行操作
}
};
xhr.open("GET", "http://example.com/article/search?keyword=" + keyword, true);
xhr.send();
}

在這個示例中，當用戶點擊搜索按鈕時，會調用名為search的函數。該函數首先獲取用戶在輸入框中輸入的關鍵字，然后將這個關鍵字加在請求URL的參數中，發送給服務器。服務器返回相關的JSON數據后，我們可以根據需求進行相應的操作。

通過以上幾個示例，我們了解了如何使用AJAX接收到的JSON數據。無論是獲取固定的JSON數據，還是根據用戶輸入來獲取不同的JSON數據，AJAX都為我們提供了很多便利。在實際的開發中，我們可以根據具體需求，靈活運用AJAX和JSON，從而提升網頁的交互性和用戶體驗。