JavaScript 作為客戶端瀏覽器語言之一，自帶讀取 JSON 數(shù)據(jù)的能力。JavaScript 能夠讀取外部 JSON 文件，將 JSON 數(shù)據(jù)轉換成 JavaScript 對象，然后在瀏覽器中顯示數(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)建了一個 XMLHttpRequest 對象，它將負責請求 JSON 文件。然后使用 onreadystatechange() 方法，可以每當 readyState 屬性改變時就會被調(diào)用。當 readyState 變?yōu)?4 時，響應被接收并可以使用。

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

當然，我們也可以將 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() 將對象轉換成字符串，并使用 encodeURIComponent() 編碼使字符串可在 URL 中傳輸。

但是，如果 JSON 文件還需要達到更高的交互性，則需要通過 AJAX 從服務器獲取數(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ù)從服務器請求 JSON 文件，然后遍歷數(shù)組并將數(shù)組中的數(shù)據(jù)以列表形式顯示在 demo 元素中。

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