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 也可以使用非数字,如: 。
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>