AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個網頁的情況下向服務器發送和接收數據的技術。通過AJAX，我們可以實現實時更新數據，提升用戶體驗。本文將介紹如何使用AJAX發送JSON數據到服務器，并通過舉例說明其原理和用法。

假設我們正在開發一個購物網站，用戶可以點擊“添加到購物車”按鈕將商品添加到購物車中。購物車信息需要發送給服務器進行處理并保存。可以使用AJAX來發送購物車信息，并使用JSON格式將購物車內容傳輸到服務器。

首先，我們需要編寫JavaScript代碼來發送AJAX請求，并將購物車信息轉換為JSON格式。以下是一個簡單的示例：

let cart = { 
items: [
{ id: 1, name: "商品1", price: 10 },
{ id: 2, name: "商品2", price: 20 },
{ id: 3, name: "商品3", price: 30 }
]
};
let jsonCart = JSON.stringify(cart); // 將購物車信息轉換為JSON格式
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("購物車信息已成功發送到服務器！");
}
};
xhr.open("POST", "/api/add-to-cart", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(jsonCart); // 發送請求

上述代碼中，首先我們創建了一個名為“cart”的JavaScript對象，對象包含了一個“items”數組，每個數組元素代表一個商品，包含了商品的id、名稱和價格。接下來，我們使用JSON.stringify()方法將cart對象轉換為JSON格式的字符串。

然后，我們創建了一個XMLHttpRequest對象，該對象用于發送AJAX請求。我們通過設置xhr.onreadystatechange函數來監聽請求的狀態變化。當狀態為4（已完成）且狀態碼為200（成功）時，我們可以確認購物車信息已經成功發送到服務器。

接下來，我們通過xhr.open方法指定了請求的類型（POST）和URL（/api/add-to-cart）。我們將xhr.setRequestHeader方法用于設置請求頭，將其Content-type設置為“application/json”，以便服務器知道請求的數據是JSON格式的。最后，我們使用xhr.send方法發送請求，并將JSON格式的購物車信息作為請求的主體。

服務器端代碼可以根據后端框架和語言的不同而有所不同。在Node.js中，可以使用express框架來解析請求數據，并將JSON格式的購物車信息保存到數據庫中：

const express = require("express");
const app = express();
app.use(express.json()); // 解析請求數據為JSON格式
app.post("/api/add-to-cart", (req, res) =>{
const cart = req.body; 
// 將購物車信息保存到數據庫或做其他處理
res.send("購物車信息已成功保存！");
});
app.listen(3000, () =>{
console.log("服務器正在監聽端口3000...");
});

在服務器端，我們使用express.json()中間件來解析請求數據為JSON格式。通過req.body可以訪問到JSON格式的購物車信息。接下來，我們可以根據實際需求，將購物車信息保存到數據庫中或做其他處理。最后，我們使用res.send方法來給客戶端發送一個響應，告知購物車信息已成功保存。

總結起來，使用AJAX發送JSON數據到服務器可以實現實時更新數據并提升用戶體驗。通過將購物車信息轉換為JSON格式，并使用XMLHttpRequest對象發送AJAX請求，在服務器端解析JSON數據并保存到數據庫中，我們可以完成購物車信息的處理。當然，上述示例只是一個簡單的示例，實際應用中可能還需要處理一些異常情況和安全性考慮。