在JavaScript中，document對象是Web頁面的核心對象之一。它表示當前載入文檔的整個頁面，并且提供了許多方便的方法和屬性來訪問和操作頁面中的元素。其中一個重要的屬性就是JSON。JSON(JavaScript Object Notation)是一種輕量級的數據交換格式，常用于前端與后端之間數據的傳輸。

let jsonData = {
"name": "張三",
"age": 18,
"interests": ["籃球", "游戲", "電影"],
"education": {
"school": "清華大學",
"major": "計算機科學"
}
};
let jsonString = JSON.stringify(jsonData);
console.log(jsonString);
let newObj = JSON.parse(jsonString);
console.log(newObj);

在上述代碼中，我們可以看到JSON.stringify()方法可以將JavaScript對象轉換為字符串。這個過程稱之為序列化。而JSON.parse()方法則用于將字符串轉換為JavaScript對象，從而進行后續的操作。在這個過程中，我們可以使用pre標簽來展示整個代碼塊。

JSON不僅僅用于前后端的數據傳輸，而且可以被直接引用到頁面中。我們可以使用XMLHttpRequest對象來請求JSON文件，并在頁面中展示數據。例如下面的代碼：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let jsonData = JSON.parse(xhr.responseText);
document.getElementById("demo").innerHTML =
"姓名：" + jsonData.name + "
" +
"年齡：" + jsonData.age + "
" +
"興趣愛好：" + jsonData.interests.join(", ") + "
" +
"教育經歷：" + jsonData.education.school + " " + jsonData.education.major;
}
};
xhr.open("GET", "data.json", true);
xhr.send();

在這個例子中，我們首先使用XMLHttpRequest對象向服務器發送一個請求，獲取JSON文件中的數據。然后，我們通過JSON.parse()方法將返回的JSON字符串解析為一個JavaScript對象，并將其中的數據展示在頁面中。在這個過程中，我們可以使用p標簽來分段展示數據。