拿出来大家共勉，不足之处请指正。
很久之前的学习笔记了，一直存放在本地中
文章目录
JSON定义
JSON是JavaScript对象表示法（JavaScript Object Notation）
语法
{"a","b","c"} 保存对象
[]保存数组
"name":"abc" -json写法
name="abc" -js写法
"a":null
"b":true -布尔
key/value
两者用：隔开
key:
- 必须是字符串
value
- 合法的JSON数据类型
"name":"sfy"
JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
从服务端接收JSON数据
<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
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();
</script>
<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>
从服务端接收数组的JSON数据
<h2>内容是数组</h2>
<p>内容是数组会转换为 JavaScript 数组。</p>
<p id="demo"></p>
<script>
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();
</script>
<p>查看服务端数据 <a href="/try/ajax/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
运行结果
内容是数组会转换为 JavaScript 数组。
Runoob
查看服务端数据 json_demo_array.txt
解析数据
- 不能存储Date对象
- Data对象转换为字符串存储
- 字符串转换为Data对象
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;
- 不允许包含函数
- 函数作为字符串存储
- 将字符串转换为函数
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 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
数组转换
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
解析数据
-
JSON不能存储Data对象
- 将所有日期转换为字符串
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"}; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; -
JSON不允许包含函数
- 在执行函数前，将函数转换为字符串
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;
数组
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
访问
sites[0].name
返回内容
runoob
修改
sites[0].name="修改后"
循环数组
for-in来访问
<p>使用 for 循环访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
for (i = 0; i < myObj.sites.length; i++) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
嵌套
i j 默认从0开始
<p>循环内嵌数组：</p>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"网站",
"num":3,
"sites": [
{ "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
{ "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
{ "name":"Taobao", "info":[ "淘宝", "网购" ] }
]
}
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>";
}
}
document.getElementById("demo").innerHTML = x;
</script>
运行结果
循环内嵌数组：
Google
Android
Google 搜索
Google 翻译
Runoob
菜鸟教程
菜鸟工具
菜鸟微信
Taobao
淘宝
网购
修改数组值
myObj.sites[1] = "Github"
删除数组值
delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。
运算符 delete 只是将该值置为 undefined，而不会影响数组长度，
delete myObj.sites[1];
对象
访问
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];
或者
x = myObg.name;
循环
<p>使用 for-in 来循环对象的属性:</p>
<p id="demo"></p>
<script>
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
运行结果
使用 for-in 来循环对象的属性:
name
alexa
site
嵌套
myObj = {
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
嵌套访问
x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];
修改
myObj.sites.site1 = "www.google.com";
myObj.sites["site1"] = "www.google.com";
删除
delete myObj.sites.site1;
delete myObj.sites["site1"]
使用
JSON→JavaScript
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 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
运行结果
网站名: 菜鸟教程
网站地址: www.runoob.com
JSON解析器
eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
JSONP
jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。
产生
- AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
- 不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
- 凡是拥有scr这个属性的标签都可以跨域例如
同源策略
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
跨域
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
同域
?简单的解释就是相同域名,端口相同,协议相同
