JSON
1、概述
---1.1JSON与XML实例
---1.2类似XML
---1.3相比 XML 的不同之处
---1.4为什么使用 JSON？
---1.5JSON语法格式
---1.6JSON数据类型
---1.7访问及修改JSON数据（非数组JSON）
2、创建JSON对象、JSON对象数组
3、创建复杂一些的JSON对象
4、使用浏览器帮助解析数据
5、eval()函数
---5.1定义和用法
---5.2语法
---5.3参数及描述
---5.4代码示例
6、JSON应用
7、JSON序列化与反序列化
---7.1概述
---7.1JSON序列化
---7.1JSON反序列化
概述
1、JavaScript对象表示法（JavaScript Object Notation）（数据交换格式）。
2、JSON是存储和交换文本信息的语法。类似XML。
3、JSON比XML（但XML语法更加严谨）更小、更快，更易解析。
4、JSON转换为JavaScript对象：
JSON文本格式在语法上与创建JavaScript对象的代码相同。由于这种相似性，无需解析器，JavaScript程序能够使用内建的eval()函数，用JSON数据来生成原生的JavaScript对象。
JSON与XML实例
JSON：
{"employees":[
{ "firstName":"Bill", "lastName":"Gates" },
{ "firstName":"Steve", "lastName":"Jobs" },
{ "firstName":"Elon", "lastName":"Musk" }
]}
XML：
<employees>
<employee>
<firstName>Bill</firstName>
<lastName>Gates</lastName>
</employee>
<employee>
<firstName>Steve</firstName>
<lastName>Jobs</lastName>
</employee>
<employee>
<firstName>Elon</firstName>
<lastName>Musk</lastName>
</employee>
</employees>
类似XML
1、JSON 是纯文本
2、具有“自我描述性”（人类可读）
3、具有层级结构（值中存在值）
4、可通过JavaScript进行解析
5、数据可使用AJAX进行传输
相比 XML 的不同之处
1、没有结束标签
2、更短、读写的速度更快
3、能够使用内建的JavaScript的eval()方法进行解析
4、使用数组、不使用保留字
为什么使用 JSON？
1、对于AJAX应用程序来说，JSON比 XML更快更易使用：
2、读取XML文档
使用XML DOM来循环遍历文档
读取值并存储在变量中
3、读取JSON字符串
用eval()处理JSON字符串
JSON语法格式
数据在名称/值对中
数据由逗号分隔
花括号容纳对象
方括号容纳数组
var jsonObj = [
{
"属性名" : "属性值",
"属性名" : "属性值",
...
},
{
"属性名" : "属性值",
"属性名" : "属性值",
...
}
];
JSON数据类型
- 有效的数据类型：
字符串
数字
对象（JSON 对象）
数组
布尔
Null - 无效的数据类型：
函数
日期
undefined
访问及修改JSON数据（非数组JSON）
1、访问：
jsonObj.属性名;
或
jsonObj["属性名"];
2、修改：
jsonObj.属性名= "属性值";
或
jsonObj["属性名"] = "属性值";
- JSON文件
JSON文件的文件类型是 ".json"
JSON文本的MIME类型是 "application/json"
创建JSON对象、JSON对象数组
代码示例：
<body>
<script>
//创建JSON对象(无类型对象)
var studentObj = {
"sno" : "11",
"sname" : "张三",
"sex" : "男"
};
//访问JSON对象属性
alert(studentObj.sno + "," +
studentObj.sname + "," +
studentObj.sex);
//输出：11,张三,男
//创建JSON对象数组
var students = [
{
"sno" : "11",
"sname" : "张三",
"sex" : "男"},
{
"sno" : "22",
"sname" : "李四",
"sex" : "男"
},
{
"sno" : "33",
"sname" : "王五",
"sex" : "男"
}
];
//遍历JSON数组
for (var i = 0; i < students.length; i++) {
var stuObjs = students[i];
alert(stuObjs.sno + "," +
stuObjs.sname + "," +
stuObjs.sex);
}
//依次输出：
//11,张三,男
//22,李四,男
//33,王五,男
</script>
</body>
创建复杂一些的JSON对象
<body>
<script>
//创建复杂一些的JSON对象
var userObj = {
"sno" : "11",
"sname" : "张三",
"sex" : "男",
"address" : {
"city" : "成都市",
"street" : "高新区",
"zipcode" : "610041"
},
"hobby" : ["eat", "drink", "paly"]
};
//访问sname及address对象属性
alert(userObj.sname + "，" +
userObj.address.city + "-" +
userObj.address.street + "-" +
userObj.address.zipcode);
</script>
</body>
使用浏览器帮助解析数据
Chrome：
Firefox：
eval()函数
定义和用法
eval()函数可计算某个字符串，并执行其中的的JavaScript代码。
语法
eval(string);
参数及描述
string ：必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。
返回值：通过计算string得到的值（如果有的话）。
代码示例
<body>
<script>
//可以使用eval函数，将json格式的字符串转换成json对象。
var fromJava = '{"name":"zs", "password":"123"}';
window.eval("var jsonObj = " + fromJava);
//访问json对象，在前端获取对象。
alert(jsonObj.name + "," + jsonObj.password);
//输出：zs,123
</script>
</body>
JSON应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var data = {
"total" : 3,
"emps" : [
{"empno":11, "ename":"aa", "sal":100},
{"empno":22, "ename":"bb", "sal":200},
{"empno":33, "ename":"cc", "sal":300}
]
};
window.onload = function(){
//将数据展示在table中
var dispalyBtnElt = document.getElementById("dispalyBtn");
dispalyBtnElt.onclick = function(){
var emps = data.emps;
var html = "";
for (var i = 0; i < emps.length; i++) {
var emp = emps[i];
//拼串
html += "<tr>";
html += "<td>" + emp.empno + "</td>";
html += "<td>" + emp.ename + "</td>";
html += "<td>" + emp.sal + "</td>";
html += "</tr>";
}
document.getElementById("empbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
}
//将数据收起
var hiddenBtnElt = document.getElementById("hiddenBtn");
hiddenBtnElt.onclick = function(){
document.getElementById("empbody").innerHTML = "";
document.getElementById("count").innerHTML = 0;
}
}
</script>
<input type="button" value="显示员工信息" id="dispalyBtn" />
<input type="button" value="收起员工信息" id="hiddenBtn" />
<h2>员工信息表</h2>
<hr />
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工工资</th>
</tr>
<tbody id="empbody">
<!--使用innerHTML拼串到这里-->
</tbody>
</table>
总共<span id="count">0</span>条数
</body>
</html>
点击显示员工信息：
点击收起员工信息：
JSON序列化与反序列化
概述
1、在现实中经常涉及到浏览器（客户端）和服务器的交互，例如向服务器提交数据，或从服务器取回数据并解析。
2、这就需要将JSON对象序列化成字符串，或将JSON格式反序列化成一个JSON对象。
JSON序列化
1、使用JSON.stringify()方法来实现序列化。
2、语法：
JSON.stringify(value, replacer, space)
3、参数说明：
value：
必需， 要转换的JavaScript值（通常为对象或数组）。
replacer：
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space：
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
4、返回值：
返回包含JSON文本的字符串。
- 代码示例
<body>
<script>
var student = {"name":"aa", "age":11};
alert(student.toString());//输出：[object Object]
var stuString = JSON.stringify(student);
alert(stuString);//输出：{"name":"aa","age":11}
alert(typeof(stuString));//输出：string
</script>
</body>
JSON反序列化
1、使用JSON.parse()方法进行反序列化，它会将完全符合JSON格式规则的字符串还原成JavaScript对象，如果字符串格式不正确，该方法会报错。
2、语法
JSON.parse(text, reviver)
3、参数说明：
text：
必需， 一个有效的 JSON 字符串。
reviver:
可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
4、返回值：
返回给定 JSON 字符串转换后的对象。
- 代码示例
<body>
<script>
var studentString = '{"name":"aa", "age":11}';
alert(typeof(studentString));//输出：string
var studentObj = JSON.parse(studentString);
alert(studentObj.name);//输出：aa
//字符串格式不正确的情况
var xString = "222,333";
alert(JSON.parse(xString));
//报错
/*
Uncaught SyntaxError:
JSON.parse:
unexpected non-whitespace character
after JSON data at line 1 column 4
of the JSON data
*/
</script>
</body>
浙公网安备 33010602011771号