JSON笔记
JavaScript19 分钟 读完 (大约 2787 个字)

JSON笔记

JSON官网：JSON

JSON：JavaScript Object Notation(JavaScript 对象表示法)。

JSON是用于存储和交换文本信息的语法，类似XML但是比XML更小、更快、更易解析。

JSON文件的扩展名为.json

JSON文件的MIME类型为application/json

一个JSON实例：

1
2
3
4
5
6
7
8
9
10
11
12
{
    "students": [
        {
            "name": "wang",
            "age": "22"
        },
        {
            "name": "lee",
            "age": "18"
        }
    ]
}

students这个对象是包含两个记录（对象）的数组。

什么是JSON

  • JSON是javascript对象表示法
  • JSON是轻量级的文本数据交换格式
  • JSON独立于语言，JSON解析器和库支持很多语言。
  • JSON具有自我描述性

转化为JS对象

JSON在语法上和javascript对象的代码相同。

故而，javascript可以使用eval()，可以使用JSON数据来生成原生javascript对象。

JSON vs XML

同一个实例。

JSON写法：

1
2
3
4
5
6
7
{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

XML写法：

1
2
3
4
5
6
7
8
9
10
11
<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

详细对比（同上图）：

相同点 不同点
JSON也是纯文本 没有结束标签
JSON也具有自我描述性 更简短
JSON也具有层级结构 读写速度更快
JSON也可以通过javascript解析 能使用js内置的eval()解析，而XML需要使用XML解析器
JSON数据也可以使用AJAX传输 能使用数组
JSON也可以被大多数编程语言使用 不使用保留字

JSON.parse()：将一个JSON字符串转化为js对象。

JSON.stringify()：将js值转化为JSON字符串。

应用领域：

使用JSON 使用XML
获取 JSON 字符串 获取 XML 文档
JSON.Parse 解析 JSON 字符串 使用 XML DOM 迭代循环文档
接数据解析出来复制给变量

为什么使用JSON

  • 读取JSON字符串
  • eval()处理JSON字符串

语法

JSON语法是javascript语法的子集。

语法规则

  • 数据为键值对
  • 键值对之间用逗号分隔
  • 用大括号保存对象
  • 用中括号保存数组

键值对

1
"key" : "value"

等于以下javascript代码：

1
key = "value"

JSON值

  • 数字，整数和浮点数
  • 字符串，在双引号中
  • 布尔值，true或者false
  • 数组，[1,2,3]
  • 对象，{ key : value }
  • null
  1. JSON数字
1
2
3
{
    "age": 30
}
  1. JSON对象
1
2
3
4
{
    "name": "wang",
    "age": 20
}
  1. JSON数组

数组可以包含多个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "students": [
        {
            "name": "wong",
            "url": "www.wong.com"
        },
        {
            "name": "lee",
            "url": "www.lee.com"
        },
        {
            "name": "chan",
            "url": "www.chan.com"
        }
    ]
}

上面的对象students是包含了三个对象的数组，每个对象代表一条记录。

  1. JSON布尔值
1
2
3
{
    "married": false
}
  1. JSON null值
1
2
3
{
    "name": null
}
  1. JSON使用js语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

1
2
3
4
5
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

访问对象数组中第一项：

1
sites[0].name;
1
runoob

JSON对象

语法

1
{ "name":"runoob", "alexa":10000, "site":null }

key必须为字符串，value可以是任意的JSON数据类型。

key和value之间用冒号分隔。

每个键值对之间用逗号分隔。

访问

1
2
3
4
5
6
7
8
9
10
11
12
var obj,x;
obj = {
    "name":"runoob",
    "alexa":10000,
    "site":null
}

// 使用点访问
x = obj.name;

// 使用key访问
x = obj["name"];

遍历

for…in循环遍历对象属性：

1
2
3
4
var obj = { "name":"runoob", "alexa":10000, "site":null };
for (x in obj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}
1
2
3
4
var obj = { "name":"runoob", "alexa":10000, "site":null };
for (x in obj) {
    document.getElementById("demo").innerHTML += obj[x] + "<br>";
}

嵌套

JSON对象中可以包含另一个JSON对象：

1
2
3
4
5
6
7
8
9
obj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

访问：

1
2
3
x = obj.sites.site1;
// 或者
x = obj.sites["site1"];

修改

1
2
3
obj.sites.site1 = "www.google.com";
// 或者
obj.sites["site1"] = "www.google.com";

删除

使用delete关键字删除JSON对象的属性值：

1
2
3
delete obj.sites.site1;
// 或者
delete obj.sites["site1"]

JSON数组

数组作为JSON对象：

1
[ "Google", "Runoob", "Taobao" ]

JSON数组中的值必须是JSON数据类型中的一种。

JSON对象中的数组

1
2
3
4
5
{
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
}

访问：

1
x = obj.sites[0];

遍历

  1. for…in遍历
1
2
3
for (i in obj.sites) {
    x += obj.sites[i] + "<br>";
}
  1. for循环遍历
1
2
3
for (i = 0; i < obj.sites.length; i++) {
    x += obj.sites[i] + "<br>";
}

嵌套

JSON对象中数组可以包含另一个数组或者另一个JSON对象：

1
2
3
4
5
6
7
8
9
obj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

使用for-in遍历数组：

1
2
3
4
5
6
for (i in obj.sites) {
    x += "<h1>" + obj.sites[i].name + "</h1>";
    for (j in obj.sites[i].info) {
        x += obj.sites[i].info[j] + "<br>";
    }
}

修改数组值

1
obj.sites[1] = "Github";

删除数组元素

使用delete关键字

1
delete obj.sites[1];

delete关键字

以上使用到了delete关键字，删除数值的元素，数组的大小不变。delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。

运算符 delete 只是将该值置为undefined，而不会影响数组长度，即将其变为稀疏数组。

JSON.parse()

作用

JSON通常用于与服务器交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

用法

1
JSON.parse(text[, reviver])

参数：

  1. text：必需，有效的JSON字符串。
  2. reviver：可选，一个转换结果的函数，将为对象的每个成员调用此函数。

实例

假设我们从服务器收到了以下数据：

1
{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

使用JSON.parse()将上面的数据转化为javascript对象：

1
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

首先得确保接收到的数据为JSON，否则会出错。

解析完成，使用JSON数据：

1
2
3
4
5
6
<p id="demo"></p>
 
<script>
	var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
	document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

从服务器接受JSON数据

使用AJAX从服务器请求JSON，然后解析为js对象：

1
2
3
4
5
6
7
8
9
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

从服务器接受JSON数组

如果从服务器收到的是JSON数组，则使用JSON.parse会将其转化为js数组：

1
2
3
4
5
6
7
8
9
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

异常

JSON不能存储Date对象。

如果要存储Date对象需要将其转换为字符串，然后再将字符串转化为Date对象。

1
2
3
4
5
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
 
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。

1
2
3
4
5
6
7
8
9
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

解析函数

使用JSON存储函数的方法是将函数转化为字符串然后再转化为函数，不过最好不要再JSON中存储函数。

1
2
3
4
5
var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
 
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

JSON.stringify()

使用JSON.stringify()将javascript对象转化为字符串：

1
JSON.stringify(value[, replacer[, space]])

参数：

  1. value：必需，待转换的js值（通常是数组或者对象）。
  2. replacer：可选，用于转换结果的函数或者数组。
  3. space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

javascript对象转换

假设我们向服务器发送以下数据：

1
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

使用JSON.stringify()将上面的数据转化为字符串：

1
var myJSON = JSON.stringify(obj);

myJSON为字符串。

下面发送myJSON到服务器：

1
document.getElementById("demo").innerHTML = myJSON;

javascript数组转换

还可以将js数组转化为JSON字符串：

1
2
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);

使用：

1
document.getElementById("demo").innerHTML = myJSON;

异常

  1. 解析数据

使用JSON存储Date对象的话要将其转化为字符串：

1
2
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);

然后再将字符串转化为Date对象。

  1. 解析函数

JSON存储函数的话，JSON.stringify()会将js对象的函数删除，包括键和值。

1
2
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);

可以在执行JSON.stringify()之前将函数转化为字符串：

1
2
3
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

JSON使用

将JSON转换为javascript对象

用于获取服务器JSON数据的时候，将JSON转换为javascript对象，然后使用在网页中。

实例

创建字符串：

1
2
3
4
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

eval()可以将JSON文本转换为js对象。

1
var obj = eval("(" + txt + ")");

在网页中使用js对象：

1
2
3
4
5
6
7
8
9
10
11
// 创建js字符串
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

// 创建js对象
var obj = eval("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url

JSON解析器

由于eval()可以执行任何js代码，故而有安全隐患。

使用JSON解析器将JSON转换为js对象更安全。

JSONP

概念

JSONP：JSON with Padding，是JSON的一种使用模式，可以跨域读取数据。

浏览器的同源策略出于安全考虑对域有所限制，JSONP就是跨域的一种方式。

应用

客户端访问：https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

客户端期望返回数据：["customername1","customername2"]

客户端真实返回数据：callbackFunction(["customername1","customername2"])

服务器端jsonp.php：

1
2
3
4
5
6
7
8
9
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

客户端callbackFunction()：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>

页面：

1
<div id="divCustomers"></div>

客户端完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
</head>

<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
        function callbackFunction(result, methodName) {
            var html = '<ul>';
            for (var i = 0; i < result.length; i++) {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
    <script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction">
    </script>
</body>

</html>

以上代码由jQuery实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>

<body>
    <div id="divCustomers"></div>
    <script>
        $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function (data) {

            var html = '<ul>';
            for (var i = 0; i < data.length; i++) {
                html += '<li>' + data[i] + '</li>';
            }
            html += '</ul>';

            $('#divCustomers').html(html);
        });
    </script>
</body>

</html>

参考

  1. 菜鸟教程：JSON教程

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×