JavaScript 作為客戶端瀏覽器語(yǔ)言之一，自帶讀取 JSON 數(shù)據(jù)的能力。JavaScript 能夠讀取外部 JSON 文件，將 JSON 數(shù)據(jù)轉(zhuǎn)換成 JavaScript 對(duì)象，然后在瀏覽器中顯示數(shù)據(jù)。

下面我們將介紹如何使用 JavaScript 讀取 JSON 文件：

<code>var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xhttp.open("GET", "filename.json", true);
xhttp.send();
</code>

在上面的代碼中，首先我們創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，它將負(fù)責(zé)請(qǐng)求 JSON 文件。然后使用 onreadystatechange() 方法，可以每當(dāng) readyState 屬性改變時(shí)就會(huì)被調(diào)用。當(dāng) readyState 變?yōu)?4 時(shí)，響應(yīng)被接收并可以使用。

接下來(lái)使用 JSON.parse() 函數(shù)將獲取的 JSON 數(shù)據(jù)解析為 JavaScript 對(duì)象。最后，將數(shù)據(jù)顯示在 demo 元素中。

當(dāng)然，我們也可以將 JSON 數(shù)據(jù)保存在 JavaScript 變量中。

<code>var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = JSON.stringify(myObj);
window.location = "data:text/json;charset=utf-8," + encodeURIComponent(myJSON);
</code>

在上面的代碼中，我們使用 JSON.stringify() 將對(duì)象轉(zhuǎn)換成字符串，并使用 encodeURIComponent() 編碼使字符串可在 URL 中傳輸。

但是，如果 JSON 文件還需要達(dá)到更高的交互性，則需要通過(guò) AJAX 從服務(wù)器獲取數(shù)據(jù)。

<code>$(document).ready(function () {
var request = new XMLHttpRequest();
request.open("GET", "filename.json", true);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
var json = JSON.parse(request.responseText);
var output = "";
for (var i = 0; i < json.length; i++) {
output += "<li>" + json[i].name + "</li>";
}
document.getElementById("demo").innerHTML = output;
}
};
request.send();
});
</code>

在上面的代碼中，我們使用 jQuery 的 AJAX 函數(shù)從服務(wù)器請(qǐng)求 JSON 文件，然后遍歷數(shù)組并將數(shù)組中的數(shù)據(jù)以列表形式顯示在 demo 元素中。

總之，JavaScript 很容易讀取 JSON 文件，并將其轉(zhuǎn)換成 JavaScript 對(duì)象，從而實(shí)現(xiàn)在瀏覽器中顯示數(shù)據(jù)。通過(guò) AJAX，可以從服務(wù)器中動(dòng)態(tài)獲取數(shù)據(jù)，使頁(yè)面更具交互性。