JavascriptJSON
JavascriptJSON
什么是JSON？
JSON是JavaScript Object Notation的缩写，它是一种基于文本的轻量级数据交换格式。它是一门独立的语言。
PHP、JSP、.NET等等编程语言都支持JSON。
JSON 使用 JavaScript 语法。但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
JSON的两种结构
对象结构
JSON对象保存在大括号中。可以存在多个关键字/值对。
其中关键字是字符串，而值可以是字符串、数值、true、false、null、对象或数组。
实例：
{
"firstname": "John",
"secondname": "Doe",
"age": 20,
}数组结构
JSON数组保存在中括号中。
实例：
数组
[
"John",
"Marry",
"Mark"
]对象中的数组
{
"school": "1st school",
"teachers":[
{"name": "Nick", "age": 30},
{"name": "Marry", "age": 35}
]
}JavaScript中使用JSON
因为JSON使用JavaScript语法，所以浏览器能直接处理JavaScript中的JSON。
访问、修改和删除
打开浏览器控制台，通过 JavaScript，创建一个对象数组，并像这样进行赋值：
var teachers = [{"name": "Nick", "age": 30}, {"name": "Marry", "age": 35}]访问
使用teachers[0]可以访问对象数组第一个对象。
可以使用teachers[0].name访问JavaScript对象数组的值。
除此之外使用teachers[0]["name"]也可以访问JavaScript对象数组的值。
修改
修改对象数组中的值。
删除
使用delete teachers[0]可以删除对象数组第一个值。
delete teachers[0].name或者delete teachers[0]["name"]都可以删除该对象的name属性。
如下图所示：
遍历对象
遍历对象的属性
使用for-in来遍历对象中的属性。
var teachers = {"name": "Nick", "age": 30};
for (x in teachers) {
console.log(x);
}在控制台输出如下：
遍历属性的值
在 for-in循环对象的属性时，使用中括号来访问属性的值。
var teachers = {"name": "Nick", "age": 30};
for (x in teachers) {
console.log(teachers[x]);
}在控制台输出如下：
遍历数组
使用for-in遍历数组。
var myschool = {
"school": "1st school",
"teachers":[
{"name": "Nick", "age": 30},
{"name": "Marry", "age": 35}
]
};
for (x in myschool.teachers){
console.log(myschool.teachers[x].name);
}在控制台输出如下：
JSON字符串与JS对象的转换
parse()
parse()将JSON字符串转换为JavaScript对象。
语法
var obj = JSON.parse(str[, reviver]);str为必须，一个有效的JSON字符串。reviver可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
我们从服务端获取了如下数据：
{"name": "Marry", "nation":"USA", "age": 30}利用JSON.parse()处理以上数据：
var per = JSON.parse('{"name": "Marry", "nation":"USA", "age": 30}');解析完成后就可以使用从该JSON字符串转化的JavaScript对象了。
从服务端接收JSON
使用AJAX从服务端请求JSON数据并解析为JavaScript对象。
利用XMLHttpRequest()函数创造一个新的请求对象。
var request = new XMLHttpRequest(); 当readystate改变时就会触发onreadystatechange事件。（详见AJAX – onreadystatechange 事件）
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState==4 && this.status==200)
{
Obj = JSON.parse(this.responseText);
console.log(Obj.name);
}
}最后发送request请求。
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState==4 && this.status==200)
{
Obj = JSON.parse(this.responseText);
console.log(Obj.name);
}
}
request.open("GET", url);
request.send();实例
新建一个mytest文件夹。
创建一个json格式的文件，将下面数据写入，并放入mytest文件夹下的JSON目录下。
{
"school": "1st school",
"stunum": 30000,
"teachers": [
{
"name": "Nick",
"age": 30
},
{
"name": "Marry",
"age": 35
}
]
}在mytest目录下创建一个html文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>从服务端接收JSON数据</h1>
<p id="demo"></p>
<script>
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState==4 && this.status==200)
{
Obj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = Obj.school;
}
}
request.open("GET", "/JSON/jsontest.json", true);
request.send();
</script>
<p>查看<a href="/JSON/jsontest.json" target="_blank">JSON</a>文件数据</p>
</body>
</html>使用phpstudy，将mytest文件夹放在其WWW目录下，打开网站。
stringify()
stringify()JavaScript对象转换为JSON字符串。
语法
var obj = JSON.stringify(value[, replacer[, space]]);- value为必须，是需要转换的JavaScript对象或者数组。
- replacer为可选，用于转换结果的函数或数组。
- 如果replacer为函数，则
JSON.stringify将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员 - 如果replacer是一个数组，会遍历数组的值，以数组的值作为value的属性。如果value原本包含该属性，那么显示该属性，如果不包含则不显示。
- 如果replacer为函数，则
- space为可选，文本添加缩进、空格和换行符。
实例
var obj = { name: "Marry", nation: "USA", age: 30};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;在控制台的结果如下图所示：
