JavaScript 加載 JSON 數據

在前端開發中，JSON（JavaScript Object Notation）作為一種輕量級的數據交換格式被廣泛使用。在 JavaScript 中，通過加載 JSON 可以獲取數據并進行處理。那么在實際開發中，我們應該如何加載 JSON？本文將深入探討。

方法一：XMLHttpRequest

XMLHttpRequest 是一種用于在后臺與服務器交換數據的技術，它是通過 JavaScript 內置的對象來實現的。我們可以使用 XMLHttpRequest 來加載 JSON 數據。下面是一個簡單的示例：

var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.open("GET", "example.json", true);
xhr.send();

這段代碼中，我們通過 XMLHttpRequest 對象發送 AJAX 請求，請求的 URL 是example.json。我們通過 onload 事件來監聽請求的狀態，如果狀態碼為 200，則表示請求成功，此時我們可以使用 JSON.parse() 方法將返回的 JSON 文本轉換成 JSON 對象，并將其打印在控制臺上。

方法二：jQuery

jQuery 是一個廣泛應用于 JavaScript 開發中的庫，它提供了友好的 API，方便我們進行 DOM 操作、事件處理、AJAX 請求等。下面是使用 jQuery 加載 JSON 的方法：

$.getJSON("example.json", function(data) {
console.log(data);
});

可以看到，使用 jQuery 加載 JSON 數據非常簡潔方便。我們只需要調用$.getJSON()方法，指定加載的 URL 和回調函數即可。回調函數的參數就是從服務器返回的 JSON 數據。

方法三：fetch

fetch 是一種新的網絡請求 API，它是基于 Promise 的，支持同步和異步的請求。除了加載 JSON 數據，它還可以加載文本、字節流等其他類型的數據。下面是使用 fetch 加載 JSON 的示例：

fetch("example.json")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});

在這個例子中，我們首先使用 fetch 函數請求 URL，fetch 函數返回一個 Promise 對象。在 Promise 對象中，我們使用then()方法分別處理 response 和 data，其中 response 包含服務器的響應信息，data 是一個 JSON 對象。我們可以將 data 打印在控制臺上。

小結

至此，我們已經學習了 JavaScript 加載 JSON 數據的三種方法。每種方法都有其優缺點，我們可以根據實際需求選擇合適的方法。需要注意的是，在從服務器獲取 JSON 數據時，我們需要確保服務器返回的數據是符合標準的 JSON 格式，否則就會出現解析錯誤。