Javascript Object Notation 详解

KYDM • 2024-10-03 23:47 • 编程

一、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的使用方法，对于前端开发人员而言是必不可少的技能之一。

原创文章，作者：KYDM，如若转载，请注明出处：https://www.506064.com/n/131744.html