首先，讓我們深入了解如何通過使用Ajax技術從服務器獲取JSON數據，并將其展示在頁面上。Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，與服務器進行交互的技術。當我們需要從服務器獲取數據時，可以使用Ajax來實現異步請求并處理返回的數據。
我們舉一個簡單的例子來說明Ajax獲取JSON數據并將其賦值到網頁的過程。假設我們有一個簡單的網站，其中包含一個用于顯示天氣信息的卡片。我們希望動態地從服務器獲取天氣數據，并將其顯示在這個卡片上。
首先，我們需要創建一個用于顯示天氣數據的HTML模板。這個模板可以包括一個用于顯示城市名稱的標簽，一個用于顯示天氣狀況的圖標，以及一個用于顯示當前溫度的標簽。HTML代碼如下：

<div id="weather-card">
<h1 id="city-name">Loading...</h1>
<img id="weather-icon" src="#" alt="Weather Icon">
<p id="temperature">Loading...</p>
</div>

接下來，我們需要編寫JavaScript代碼來實現Ajax請求，并將返回的JSON數據賦值給相應的HTML元素。請注意，我們需要使用XMLHttpRequest對象來發出Ajax請求。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 配置Ajax請求
xhr.open('GET', 'weather.json', true);
// 發送Ajax請求
xhr.send();
// 監聽Ajax請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理返回的JSON數據
var data = JSON.parse(xhr.responseText);
// 找到相應的HTML元素
var cityName = document.getElementById('city-name');
var weatherIcon = document.getElementById('weather-icon');
var temperature = document.getElementById('temperature');
// 將返回的JSON數據賦值給HTML元素
cityName.innerHTML = data.city;
weatherIcon.src = data.icon;
temperature.innerHTML = data.temperature + '°C';
}
};

在上面的代碼中，我們通過監聽XMLHttpRequest對象的onreadystatechange事件來檢測Ajax請求的狀態變化。當請求的readyState變為4（即請求已完成）且狀態碼為200（即請求成功）時，我們可以通過JSON.parse()方法將返回的JSON數據解析為JavaScript對象。然后，我們找到相應的HTML元素，并將JSON數據中的值賦給這些元素的innerHTML或src屬性，從而實現數據的展示。
最后，我們需要在服務器上提供一個返回JSON數據的接口。這個接口可以是一個.php、.jsp或其他服務端腳本文件。下面是一個簡單的返回天氣數據的PHP示例：

<?php
// 模擬獲取天氣數據
$weatherData = array(
'city' => '北京',
'icon' => 'weather-icon.png',
'temperature' => '25'
);
// 將數據轉換為JSON格式并返回
echo json_encode($weatherData);
?>

在這個例子中，我們使用PHP來模擬獲取天氣數據。首先，我們創建一個包含城市名稱、天氣圖標和溫度的關聯數組。然后，我們使用json_encode()函數將數據轉換為JSON格式，并通過echo語句返回給Ajax請求。
總結一下，通過使用Ajax技術，我們可以在不重新加載整個網頁的情況下，從服務器獲取JSON數據，并將其賦值給相應的HTML元素。這使得我們能夠動態地顯示來自服務器的數據，為網站的用戶提供更好的交互體驗。希望這個例子能夠幫助你理解如何使用Ajax獲取JSON數據并進行處理。