JSON (JavaScript Object Notation) 是一種資料交換格式，內容為屬性與值搭配組成，它屬於 JavaScript 的一個子集，而我們常用 JavaScript 習慣來撰寫 JSON

JSON 的格式

JSON 格式很像 JavaScript 的物件，他們都是利用屬性與值做搭配，在屬性上，物件可以使用字串型式，但 JSON 的屬性必須 使用雙引號包裹成字串，而在字串方面，物件可使用單引號，而 JSON 則 一律使用雙引號 ，其他方面則與物件類似

var family = {
    name: 'Carol 家',
    wallet: 3000,
    members: {
        dad: '老爸',
        mom: '老媽',
        child: 'Carol'
    }
};

var json = JSON.stringify(family);

console.log(json);
// {"name":"Carol 家","wallet":3000,"members":{"dad":"老爸","mom":"老媽","child":"Carol"}}

可利用 JSON.stringify 將物件轉為字串來看 JSON 格式

利用 vscode 撰寫 JSON 檔案時，將屬性雙引號取消或使用單引號皆會報錯

以下 2 個範例皆為使用 AJAX 來取得 JSON 檔案內容：

使用原生 AJAX

當使用原生 AJAX 讀取 JSON 檔案，可以看到傳進來的 JSON 資料，會是字串型式，透過 JSON.parse 把字串轉為 JavaScript 的物件格式

family.json 檔案

{
    "name": "Carol 家",
    "wallet": 3000,
    "members": {
        "dad": "老爸",
        "mom": "老媽",
        "child": "Carol"
    }
}

all.js 檔案

function getData() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'family.json', true);
    xhr.send(null);
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
}

getData();

Chrome Console 顯示

使用框架 AJAX - JQuery

使用 JQuery 的 ajax() 方法，所取得的值是物件，不需像原生 JSON 一樣再使用 JSON.parse 轉成 JavaScript物件，這是因框架當傳入 JSON 格式會自動轉為物件，讓開發者省去此步驟

也可以在 Chrome Console -> Network -> family.json -> Response 中也可看到回傳的值是 JSON 格式轉字串型式

family.json 檔案

{
    "name": "Carol 家",
    "wallet": 3000,
    "members": {
        "dad": "老爸",
        "mom": "老媽",
        "child": "Carol"
    }
}

all.js 檔案

$.ajax({
    url: 'family.json',
}).done(function (data) {
    console.log(data);
});

Chrome Console 顯示

Chrome Console -> Network -> family.json -> Response 顯示

參考文獻

六角學院 - JavaScript 核心篇

維基百科 - JSON