在前端開(kāi)發(fā)中，我們常常需要從后端獲取數(shù)據(jù)并渲染到頁(yè)面上。而 JSON（JavaScript Object Notation） 是一個(gè)輕量級(jí)的數(shù)據(jù)交換格式，也是前后端數(shù)據(jù)交互的常見(jiàn)方式之一。通過(guò)<script>標(biāo)簽加載 JSON 文件，可以快速地將數(shù)據(jù)渲染到頁(yè)面上。

具體步驟如下：

<script>
// 創(chuàng)建一個(gè)新的 XMLHttpRequest 對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求的 HTTP 方法和 URL
xhr.open('GET', 'data.json', true);
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader('Content-Type', 'application/json');
// 確認(rèn)請(qǐng)求成功后，將返回字符串轉(zhuǎn)換為對(duì)象
xhr.onload = function () {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
// 發(fā)送請(qǐng)求
xhr.send();
</script>

上述代碼片段實(shí)現(xiàn)了使用<script>標(biāo)簽加載 JSON 后，將數(shù)據(jù)轉(zhuǎn)化為對(duì)象輸出到控制臺(tái)。

需要注意的是，由于跨域安全策略的影響，當(dāng)<script>標(biāo)簽加載的 JSON 文件與當(dāng)前的 URL 不同時(shí)，可能會(huì)出現(xiàn)錯(cuò)誤。此時(shí)可以使用 JSONP（JSON with Padding）技術(shù)解決跨域問(wèn)題。