AJAX (Asynchronous JavaScript and XML) 是一種通過在后臺與服務器進行少量數據交換的技術，實現不刷新整個頁面而更新部分頁面內容的功能。JSON (JavaScript Object Notation) 是一種輕量級的數據交換格式，常用于前后端數據傳輸。

AJAX 和 JSON 是互相配合的工具，可以實現前后端數據的快速交互。在前端開發中，經常使用 AJAX 請求服務器獲取數據，并將獲取到的數據通過 JSON 解碼后，使用在頁面上展示或操作。

舉個例子，假設我們正在開發一個電子商務網站，需要從服務器獲取商品列表的數據。我們可以使用 AJAX 發起請求，將獲取到的數據以 JSON 的格式返回。然后在前端頁面，我們可以使用 JSON 的解碼方法將返回的 JSON 數據解碼為 JavaScript 對象，然后使用 JavaScript 對象的方法進行數據展示和操作。

<script>
// 發起 AJAX 請求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/products', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 將返回的 JSON 數據解碼為 JavaScript 對象
var products = JSON.parse(xhr.responseText);
// 在頁面上展示商品列表
var productList = document.getElementById('product-list');
for (var i = 0; i < products.length; i++) {
var product = document.createElement('div');
product.textContent = products[i].name;
productList.appendChild(product);
}
} else {
console.error('請求失敗');
}
}
};
</script>

AJAX 和 JSON 的結合在前端開發中非常常見。除了獲取數據，JSON 還可以用于發送數據到服務器。例如，用戶在前端填寫了一個表單，我們可以將表單數據通過 JSON 編碼后發送給服務器進行處理。

繼續以上面的電子商務網站為例，假設用戶在前端填寫了一個注冊表單，包含用戶名和密碼。我們可以使用 AJAX 發送一個 POST 請求，將表單數據以 JSON 的格式發送給服務器。服務器收到請求后，使用 JSON 解碼方法將 JSON 數據解碼為原始數據，對注冊數據進行處理。

<script>
// 獲取表單數據
var form = document.getElementById('registration-form');
var username = form.elements['username'].value;
var password = form.elements['password'].value;
// 將表單數據編碼為 JSON
var data = JSON.stringify({ username: username, password: password });
// 發送包含 JSON 數據的 AJAX 請求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/register', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('注冊成功');
} else {
console.error('請求失敗');
}
}
};
</script>

總而言之，AJAX 和 JSON 是前端開發中不可或缺的工具，可以實現快速的數據交互。使用 AJAX 發起請求獲取數據，并使用 JSON 的解碼方法將返回的 JSON 數據解碼為 JavaScript 對象，在前端頁面上展示和操作。同時，也可以使用 JSON 編碼將數據發送給服務器進行處理。