Javascript Object Notation 詳解

一、JSON概述

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易於人們閱讀和編寫，也易於機器解析和生成。JSON採用完全獨立於語言的文本格式，以嵌套的鍵值對的形式來表達數據。其格式嚴格規定，數據描述清晰簡潔，同時也支持複雜的數據結構。

JSON常用於前後端之間的數據傳輸，如將數據從後台數據庫中取出後，轉換成JSON格式返回給前端應用。

下面是一段簡單的JSON示例：

{
    "name": "John",
    "age": 30,
    "city": "New York"
}

二、JSON格式

JSON有兩種數據格式：簡單值和複雜值。

1. 簡單值

簡單值包括數字、字符串、布爾值、null。這些值可以直接被JSON轉換表述。

{
    "age": 30,
    "name": "John",
    "isStudent": true,
    "car": null
}

2. 複雜值

複雜值包括對象和數組。可以將它們嵌套進行組合，表達複雜的數據結構。

對象以鍵值對的形式來存儲信息，鍵必須是一個字符串，值可以是任何簡單或複雜的類型。例如：

{
    "person": {
        "name": "John",
        "age": 30,
        "city": "New York"
    },
    "cars": [
        {"make": "Ford", "model": "Mustang"},
        {"make": "Tesla", "model": "Model S"}
    ]
}

數組可以存儲任意數量的值，這些值可以是簡單值或複雜值。例如：

{
    "employees": [
        {"name": "John", "age":30, "position": "Developer"},
        {"name": "Mary", "age":25, "position": "Designer"},
        {"name": "Tom", "age":35, "position": "Project Manager"}
    ]
}

三、JSON對象操作

1. 創建JSON對象

可以通過對象字面量的方式創建JSON對象。例如：

var person = {
    "name": "John",
    "age": 30,
    "city": "New York"
};

也可以通過new操作符創建JSON對象，例如：

var person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";
var jsonString = JSON.stringify(person);

2. JSON字符串轉對象

可以使用JSON.parse()方法將JSON格式的字符串轉換為JavaScript對象。

var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var obj = JSON.parse(jsonString);
console.log(obj.name);// John
console.log(obj.age);// 30
console.log(obj.city);// New York

3. JSON對象轉字符串

可以使用JSON.stringify()方法將JavaScript對象轉換為JSON格式的字符串。

var person = {"name":"John", "age":30, "city":"New York"};
var jsonString = JSON.stringify(person);

四、JSON應用

1. Ajax數據交互

在前後端分離的情況下，數據交互的方式一般使用Ajax進行傳輸，而JSON格式的數據則是一種常用的數據交互格式。

例如：

$.ajax({
    type: 'POST',
    url: '/login',
    data: JSON.stringify({'username':username, 'password':password}),
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.log(err);
    }
});

2. 存儲數據

將數據以JSON格式存儲在localStorage或cookie中，可以實現瀏覽器端的數據持久化。

例如：

localStorage.setItem('user', JSON.stringify({'name': 'John', 'age': 30}));
var userJson = localStorage.getItem('user');
var userObj = JSON.parse(userJson);

五、JSON的安全性

由於JSON格式的數據可以直接被解析成JavaScript對象，因此會存在跨站腳本攻擊（XSS攻擊）的風險。攻擊者可以在JSON數據中添加惡意腳本，從而在用戶端執行代碼。

為了防止XSS攻擊，建議在前端頁面中對JSON數據進行嚴格限制，不允許執行任何腳本代碼。

六、結語

JSON作為一種輕量級的數據交換格式，具有簡單、明確、易於讀寫等優點，已經成為現代應用程序中廣泛使用的數據格式之一。掌握JSON的使用方法，對於前端開發人員而言是必不可少的技能之一。