AJAX和JSON是現代Web開發中常用的兩個技術。AJAX（Asynchronous JavaScript and XML）是一種利用JavaScript和XML進行數據交互的技術，它可以在不刷新整個網頁的情況下發送請求并接收響應。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，逐漸取代了XML的地位，成為Web開發中最常用的數據格式之一。本文將介紹AJAX和JSON的基本原理，以及如何在實際開發中使用它們。

在Web開發中，AJAX常用于實現動態加載數據、提交表單、驗證輸入等功能。舉個例子，假設我們正在開發一個購物網站，頁面上有一個商品列表，每個商品都有一個“添加到購物車”的按鈕。當用戶點擊按鈕時，我們希望把商品信息發送到后臺，并更新購物車的數量。傳統的做法是使用表單提交來實現，但這會導致整個頁面刷新，用戶體驗不佳。通過使用AJAX，我們可以在不刷新頁面的情況下發送請求，接收到后臺返回的結果后，再通過JavaScript更新頁面的部分內容。

// JavaScript代碼
function addToCart(productId) {
// 使用AJAX發送請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/addToCart', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，更新購物車數量
var response = JSON.parse(xhr.responseText);
var quantity = response.quantity;
document.getElementById('cart-quantity').innerHTML = quantity;
}
};
// 將商品ID轉為JSON格式并發送請求
var data = JSON.stringify({ productId: productId });
xhr.send(data);
}

以上代碼定義了一個addToCart函數，用于向后臺發送添加商品到購物車的請求。當用戶點擊按鈕時，會調用這個函數并傳入商品的ID。函數內部使用了XMLHttpRequest對象來發送請求，通過open方法指定了請求的類型（POST）、URL（/addToCart）和是否異步（true）。接下來，通過設置請求頭的Content-Type為application/json，告訴服務器請求體的數據格式為JSON。

在發送請求后，我們通過onreadystatechange事件來監聽請求的狀態變化。當請求的狀態變為DONE（即請求已完成）并且狀態碼為200時，表示請求成功。此時，我們可以從響應中解析出JSON格式的數據，并將購物車數量更新到頁面的相應部分。

JSON格式用于在客戶端和服務器之間傳輸數據，并具有良好的可讀性和可擴展性。它由鍵值對構成，鍵是字符串，值可以是字符串、數值、布爾值、數組、對象等。舉個例子，假設后臺返回的數據是一個JSON對象，其中包含了購物車的商品數量。

{
"quantity": 10
}

通過調用JSON.parse方法，我們可以將JSON字符串解析為JavaScript對象。在上面的例子中，我們將響應體的文本解析為一個JSON對象，通過訪問其quantity屬性，即可獲取到購物車的數量。最后，我們使用JavaScript修改了購物車數量的顯示。

綜上所述，AJAX和JSON是進行Web開發的常用工具。通過使用AJAX，我們可以在不刷新頁面的情況下與服務器進行數據交互，并通過JSON來傳輸和解析數據。這兩個技術的結合使得Web應用更加動態和用戶友好。