AJAX（Asynchronous JavaScript And XML）是一種用于創建快速、動態網頁的技術。它使用JavaScript和XML來與服務器異步交互，從而實現頁面內容的更新，而無需重新加載整個頁面。AJAX可以通過不同的數據格式進行傳值，而其中JSON（JavaScript Object Notation）是一種輕量級的數據交換格式。使用AJAX以JSON傳值可以使網頁更加快速、高效并提供更好的用戶體驗。

假設我們正在開發一個簡單的學生信息管理系統。我們希望實現在選中一個學生的時候，能夠通過AJAX以JSON傳值，將該學生的信息通過后臺服務器獲取并展示在網頁上，而無需重新加載整個頁面。

// HTML代碼
<select id="student-select" onchange="getStudentInfo(this.value)">
<option value="1">學生A</option>
<option value="2">學生B</option>
<option value="3">學生C</option>
</select>
<div id="student-info"></div>
// JavaScript代碼
function getStudentInfo(studentId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var studentInfo = JSON.parse(xhr.responseText);
var studentInfoElement = document.getElementById("student-info");
studentInfoElement.innerHTML = "學生姓名：" + studentInfo.name + "<br>";
studentInfoElement.innerHTML += "學生年齡：" + studentInfo.age + "<br>";
studentInfoElement.innerHTML += "學生班級：" + studentInfo.class + "<br>";
}
};
xhr.open("GET", "getStudentInfo.php?id=" + studentId, true);
xhr.send();
}

上述代碼中，我們首先創建了一個元素，其中的每個表示一個學生。當用戶在中選中某個時，我們調用getStudentInfo()來獲取該學生的信息。getStudentInfo()首先創建了一個XMLHttpRequest對象xhr，然后設置了其onreadystatechange事件處理函數。在該函數中，我們檢查了xhr的狀態和響應碼，當xhr.readyState為4（請求已完成）且xhr.status為200（請求成功）時，我們解析xhr.responseText并將學生的信息展示在

// getStudentInfo.php
$studentId = $_GET["id"];
// 根據$studentId從數據庫獲取相應學生的信息
$studentInfo = [
"name" =>"張三",
"age" =>18,
"class" =>"一班"
];
// 將學生信息以JSON格式返回給前端
header("Content-Type: application/json");
echo json_encode($studentInfo);