JSON入门系列知识点

Json简介

Json全名：JavaScript Object Notation(JavaScript对象表示法)
Json的作用是用来存储和交换文本信息的语法，类似于XML.
Json的特点是比XML更小、更快、更易于解析。
例子：

{
  "Demo":[
      {"name":"百度","url":"www.baidu.com"},
      {"name":"google","url":"www.google.com"},
      {"name":"微博","url":"www.weibo.com"}
  ]
};

这个Demo对象包含了3个站点记录（对象）的数组

什么是Json?

JSON指的是JavaScript对象表示法（JavaScript Object Notation）
JSON是一种轻量级的文本数据交换格式。
JSON独立于语言：JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言。目前非常多的动态（PHP、JSP、.NET）编程语言都是支持JSON。
JSON具有自我描述性，更易于理解。

JSON-转换为JavaScript对象

JSON文本格式在语法上与创建JavaScript对象的代码相同。
由于这种相似性，无需解析器，JavaScript程序能够使用内建的eval()函数，用JSON数据来生成原生的JavaScript对象。

与XML相同之处

JSON是纯文本形式的。
JSON具有"自我描述性"(人类可读)
JSON具有层级结构(值中存在值)
JSON可通过JavaScript进行解析
JSON数据可使用AJAX进行传输

与XML不同之处

没有结束标签
文本更短
读写的速度更快
能够使用内建的JavaScript eval()方法进行解析
使用数组
不适用保留字

为什么我们要使用JSON呢？

对于AJAX应用程序来说，JSON比XML更快更易于使用：

使用XML：

读取XML文档
使用XML DOM来循环遍历文档
读取值并存储在变量中

使用JSON：

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

Json语法

JSON的语法是JavaScript语法的子集。

JSON语法的规则

JSON语法是JavaScript对象表示语法的子集。

数据在名称(键)/值对中
数据由逗号分隔
大括号{}保存对象
中括号[]保存数组，数组可以包含多个对象

JSON名称/值对

JSON数据的书写格式是：

key : value

名称/值对包括字段名称(在双引号中)，后面写一个冒号，然后是值：

"name" : "好好学习"

这很容易理解，等价于这条JavaScript语句：

name = "好好学习"

JSON值

JSON值可以是：

数字(整数或者浮点型)
字符串(在双引号中)
逻辑值(true或false)
数组(在中括号中)
对象(在大括号中)
null

JSON数字

JSON数字可以是整型或者浮点型：

{"age":30}

JSON对象

JSON对象在大括号{}中书写：

{key1 : value1,key2 : values2,...keyN : valueN}

对象可以包括多个名称/值对：

{"name":"好好学习"，"url":"www.study.com"}

这一点也容易理解，与这条JavaScript语句等价：

name ="好好学习"

url="www.runoob.com"

JSON数组

JSON数组在中括号[]中书写：

数组可包含多个对象：

[
    {key1 : value1-1,key1:value1-2},
    {key1 : value2-1,key1:value2-2},
    {key1 : value3-1,key1:value3-2},
    ....
    {keyN : valueN-1,keyN:valueN-2},
]
{
  "sites":[
    {"name":"菜鸟教程","url":"www.runoob.com"},
    {"name":"google","url":"www.google.com"},
    {"name":"微博","url":"www.weibo.com"},
  ]
}

在上面的例子中，对象sites是包含三个对象的数组。每个对象代表一条关于某个网站(name、url)的记录

JSON布尔值

JSON布尔值可以是true或者false:

{ "flag" : true }

JSON null

JSON可以设置null值：

{ "runoob" : null }

JSON使用JavaScript语法

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

因为JavaScript，您可以创建一个对象数组，并像这样进行一个：

//例子
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

可以像这样访问JavaScript对象数组中的第一项(索引从0开始)：

sites[0].name;

返回的内容是：

runoob

可以像这样修改数据：

sites[0].name="好好学习"；

JSON文件

JSON文件的文件类型是.Json

JSON文本的MIME类型是application/json

JSON VS XML

JSON和XML都用于接收web服务端的数据。

JSON和XML在写法上有所不同，如下所示：

//JSON 实例
{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}
//XML 实例
<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与XML的相同之处：

JSON和XML数据都是“自我描述”，都易于理解。
JSON和XML数据都是有层次的结构
JSON和XML数据可以被大多数编程语言使用

JSON与XML的不同之处：

JSON不需要结束标签
JSON更加简短
JSON读写速度更快
JSON可以使用数组

最大的不同是：XML需要使用XML解析器来解析，JSON可以使用标准的JavaScript函数来解析。

JSON.parse():将一个Json字符串转换为JavaScript对象。

JSON.stringify:于将JavaScript值转换为JSON字符串。

为什么JSON比XML更好？

XML比JSON更难解析。

JSON可以直接使用现有的JavaScript对象解析。

针对AJAX应用，JSON比XML数据加载更快，而且更简单：

使用XML

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

使用JSON

获取JSON字符串
JSON.Parse解析JSON字符串

JavaScript Json

XML DOM教程

JSON对象

//实例
{ "name":"runoob", "alexa":10000, "site":null }

JSON对象使用在大括号({})中书写。

对象可以包含多个key/value(键/值)对。

key必须是字符串，value可以是合法的JSON数据类型(字符串，数字，对象，数组，布尔值或null)。

key和value中使用冒号(:)分割。

每个key/value对使用逗号(,)分割。

访问对象值

你可以使用点号(.)来访问对象的值：

//实例
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

你也可以使用中括号([])来访问对象的值：

//实例
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];

循环对象

你可以使用for-in来循环对象的属性：

//实例
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

在for-in循环对象的属性时，使用中括号([])来访问属性的值：

//实例
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

嵌套JSON对象

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

//实例
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

你可以使用点号(.)或者中括号([])来嵌套的JSON对象。

//实例
x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];

修改值

你可以使用点号(.)来修改JSON对象的值：

//实例
myObj.sites.site1 = "www.google.com";

你可以使用中括号([])来修改JSON对象的值：

//实例
myObj.sites["site1"] = "www.google.com";

删除对象属性

我们可以使用delete关键字来删除JSON对象的属性：

//实例
delete myObj.sites.site1;

你可以使用中括号([])来删除JSON对象的属性：

//实例
delete myObj.sites["site1"]

JSON数组

数组作为JSON对象

//实例
[ "Google", "Runoob", "Taobao" ]

JSON数组在中括号中书写。

JSON中数组值必须是合法的JSON数据类型（字符串，数字，对象，数组，布尔值或null）。

JavaScript中，数组值可以是以上的JSON数据类型，也可以是JavaScript的表达式，包括函数，日期，及undefined。

JSON对象中的数组

对象属性的值可以是一个数组：

//实例
{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

我们可以使用索引值来访问数组：

//实例
x = myObj.sites[0];

循环数组

你可以使用for-in来访问数组：

//实例
for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

你也可以使用for循环：

//实例
for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

嵌套JSON对象中的数组

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

//实例
myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

我们可以使用for-in来循环访问每一个数组：

//实例
for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

修改数组值

你可以使用索引值来修改数组值：

//实例
myObj.sites[1] = "Github";

删除数组元素

我们可以使用delete关键字来删除数组元素：

//实例
delete myObj.sites[1];

JSON.parse()

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

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

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

语法

JSON.parse(text[reviver])

参数说明：

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

JSON解析实例

例如我们从服务器接收了以下数据：

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

我们使用JSON.parse()方法处理以上数据，将其转换为JavaScript对象：

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

解析前要确保你的数据是标准的JSO格式，否则会解析出错。

解析完成后，我们就可以在网页上使用JSON数据了：

//实例
<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数据，并解析为JavaScript对象。

//实例
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会将其转换为JavaScript数组：

//实例
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对象。

//实例
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，一个转换结果的函数，对象的每个成员调用此函数

//实例
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不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

//实例
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中使用函数：

浏览器支持

主流浏览器都支持JSON.parse()函数

Firefox 3.5
Internet Explorer8
Chrome
Opera 10
Safari 4

JSON.stringify()

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

在向服务器发送数据时一般是字符串。

我们可以使用JSON.stringify方法将JavaScript对象转换为字符串。

语法

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

参数说明：

value：

必需，要转换的JavaScript值（通常为对象或数组）。

replacer：

可选。用于转换结果的函数或数组。

如果replacer为函数，则JSON.stringify将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回undefined，则排除成员。根对象的键是一个空字符串:""。

如果replacer是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当value参数也为数组时，将忽略replacer数组。

space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

JavaScript对象转换

例如我们向服务器发送以下数据：

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

我们使用JSON.stringify()方法处理以上数据，将其装换为字符串：

var myJSON = JSON.stringify(obj);

myJSON为字符串。

我们可以将myJSON发送到服务器：

//实例
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

JavaScript数组转换

我们也可以将JavaScript数组转换为JSON字符串：

//实例
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);

myJSON为字符串。

我们可以将myJSON发送到服务器：

//实例
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

异常

解析数据

JSON不能存储Date对象。

JSON.stringify()会将所有日期转换为字符串。

//实例
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

我们可以在执行JSON.stringify()函数前将函数转换为字符串来避免以上问题的发生：

//实例
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;

不建议在JSON中使用函数。

浏览器支持

主流浏览器都支持JSON.stringify()函数：

Firefox 3.5
Internet explorer 8
Chrome
Opera 10
Safari 4

JSON使用

把JSON文本转换为JavaScript对象

JSON最常见的用法之一，是从web服务器上读取JSON数据（作为文件或作为httprequest），将JSON数据转换为JavaScript对象，然后在网页中使用该数据。

为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

JSON实例-来自字符串的对象

创建包含JSON语法的JavaScript字符串：

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

由于JSON语法是JavaScript语法的子集，JavaScript函数eval()可用于将JSON文本转换为JavaScript对象。

eval()函数使用的是JavaScript编辑器，可解析JSON文本，然后生成JavaScript对象。必须把文本包围在括号中，这样才能避免语法错误：

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

在网页中使用JavaScript对象：

实例
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
 
var obj = eval ("(" + txt + ")");
 
document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url

JSON 解析器

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

Web 浏览器支持	Web 软件支持
Firefox (Mozilla) 3.5	jQuery
Internet Explorer 8	Yahoo UI
Chrome	Prototype
Opera 10	Dojo
Safari 4	ECMAScript 1.5

posted @ 2021-01-06 17:50 迈克余阅读(178) 评论(0) 收藏举报

刷新页面返回顶部

迈克余

JSON入门系列知识点

Json简介

什么是Json?

JSON-转换为JavaScript对象

与XML相同之处

与XML不同之处

为什么我们要使用JSON呢？

使用XML：

使用JSON：

Json语法

JSON语法的规则

JSON名称/值对

JSON值

JSON值可以是：

JSON数字

JSON对象

JSON数组

JSON布尔值

JSON null

JSON使用JavaScript语法

JSON文件

JSON VS XML

JSON与XML的相同之处：

JSON与XML的不同之处：

为什么JSON比XML更好？

相关文章

JSON对象

访问对象值

循环对象

嵌套JSON对象

修改值

删除对象属性

JSON数组

数组作为JSON对象

JSON对象中的数组

循环数组

嵌套JSON对象中的数组

修改数组值

删除数组元素

JSON.parse()

语法

参数说明：

JSON解析实例

从服务端接收JSON数据

从服务端接收数组的JSON数据

异常

解析数据

解析函数

浏览器支持

JSON.stringify()

语法

JavaScript对象转换

JavaScript数组转换

异常

解析数据

浏览器支持

JSON使用

把JSON文本转换为JavaScript对象

JSON实例-来自字符串的对象

JSON 解析器

公告