在Web開發中，經常需要在前端頁面和后端數據之間進行數據交互。而使用AJAX和JSON是一種常見的數據傳遞方式。AJAX（Asynchronous JavaScript and XML）利用瀏覽器的內置對象XMLHttpRequest，通過發送HTTP請求獲取后端數據，而JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，可以方便地將數據以鍵值對的形式傳遞。通過將這兩種技術結合使用，我們可以實現前后端數據的靈活傳遞和交互。

舉個例子，假設我們正在開發一個學生成績查詢系統。用戶在前端頁面上輸入學生的姓名，點擊查詢按鈕后，希望能夠通過AJAX發送請求到后端，并獲取到該學生的成績信息。然后，再將這個成績信息動態地展示在前端頁面上。

<script>
function getStudentGrade(){
var studentName = document.getElementById("studentName").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/getGrade", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var gradeData = JSON.parse(xhr.responseText);
document.getElementById("grade").innerHTML = "學生成績：" + gradeData[studentName];
}
};
xhr.send(JSON.stringify({name: studentName}));
}
</script>

在上面的例子中，我們首先定義了一個名為getStudentGrade的JavaScript函數。當用戶點擊查詢按鈕時，該函數會被觸發。函數內部首先獲取了用戶在輸入框中輸入的學生姓名，并創建了一個XMLHttpRequest對象xhr。

接下來，我們調用xhr的open方法，指定了HTTP請求的類型（POST）、請求的URL（/getGrade）以及是否異步執行（true）。

然后，我們通過xhr的onreadystatechange事件監聽器，實現了當xhr對象狀態改變時所執行的函數。在這個函數中，我們首先判斷了xhr對象的readyState（準備狀態）和status（HTTP狀態碼），只有當它們滿足條件（readyState等于4，status等于200）時，才會執行后續操作。

在這個后續操作中，我們首先通過xhr的responseText屬性獲取到后端返回的結果，這個結果是以字符串的形式存在的。然后，我們使用JSON.parse方法將這個字符串解析為一個JavaScript對象（gradeData），其中包含了學生名字和成績的鍵值對。

最后，我們將這個成績信息動態地展示在前端頁面上，通過修改頁面中id為"grade"的元素的innerHTML屬性，將學生成績信息顯示出來。

通過以上的代碼和例子，我們可以看出使用AJAX和JSON進行數據傳遞可以實現前后端的靈活交互。前端通過發送HTTP請求，獲取到后端返回的數據，再使用JSON對這些數據進行解析，最后將數據動態地展示在頁面上。這種方式不僅提高了用戶體驗，還增加了頁面的動態性和交互性。

總結一下，AJAX和JSON是一對強大的組合，在Web開發中起到了重要的作用。通過使用AJAX發送HTTP請求獲取后端數據，并將這些數據通過JSON進行解析傳遞給前端頁面，我們可以實現數據的方便傳遞和靈活展示。這種方式不僅提高了用戶體驗，還增加了頁面的動態性和交互性，使得Web應用更加強大和便捷。