AJAX（Asynchronous JavaScript and XML）技術是一種用于在網頁上更新數據的技術。它通過在后臺與服務器進行數據交互，實現頁面的異步刷新，提供了更好的用戶體驗。而JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易于閱讀和編寫。在前端開發中，結合使用AJAX和JSON可以方便地獲取遠程數據，并將數據呈現在網頁上。

假設我們正在開發一個天氣預報應用，需要根據用戶輸入的城市名獲取該城市的天氣數據。我們可以通過AJAX技術向天氣API發送請求，并將返回的JSON數據解析并顯示在網頁上。

// 使用AJAX發送GET請求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London');
xhr.send();
// 監聽請求完成事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析JSON數據
var response = JSON.parse(xhr.responseText);
// 獲取需要的數據
var temperature = response.current.temp_c;
var humidity = response.current.humidity;
// 更新頁面內容
document.getElementById('temperature').innerHTML = temperature + '°C';
document.getElementById('humidity').innerHTML = humidity + '%';
}
}

上面的代碼中，我們使用了XMLHttpRequest對象來發送GET請求，并在請求完成時解析JSON數據。在請求返回的responseText中，我們可以找到所需的數據，如當前的溫度和濕度。通過document.getElementById將獲取到的數據顯示在指定的DOM元素上。

除了獲取數據，我們還可以使用AJAX和JSON來實現用戶與服務器的數據交互。例如，我們正在開發一個留言板應用，用戶可以通過表單提交留言，并實時顯示最新的留言內容。

// 使用AJAX發送POST請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit_message');
xhr.setRequestHeader('Content-Type', 'application/json');
// 構造JSON數據
var message = {
name: 'John',
content: 'Hello, world!'
};
// 將JSON數據轉化為字符串
var jsonData = JSON.stringify(message);
xhr.send(jsonData);
// 監聽請求完成事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析JSON數據
var response = JSON.parse(xhr.responseText);
// 更新頁面內容
var messageList = document.getElementById('message-list');
var newMessage = document.createElement('li');
newMessage.innerHTML = response.name + ': ' + response.content;
messageList.appendChild(newMessage);
}
}

以上代碼片段將通過AJAX發送用戶提交的留言，并將服務器返回的有關留言的JSON數據添加到留言列表中。用戶可以即時看到自己提交的留言被成功添加到留言板上。

總之，使用AJAX和JSON能夠使前端開發更加高效，提供更好的用戶體驗。它們可以幫助我們獲取遠程數據并實現與服務器的數據交互。通過合理地運用，我們能夠創建出更加靈活、交互性更強的網頁應用。