第一课 JSON的简介

建议：学习json之前需要对web在http间的通信一定的理解，对js有基础的知识。当然如果了解一点xml，会更方便你的理解和对比。


1.什么是json

json：javascript object notation（js的对象表示法）。
json是一种存储和交换数据的语法，类似于xml（建议先学习xml，用三，四天的时间，浏览一遍xml，对xml有一个理解，对学习json有很大的帮助，xml比json的难度相对简单一点）
json比xml更小，更快，更容易解析。
文件扩展名为.json。

json与js的关系
首先要明确的是json是一种用来描述对象的数据格式，什么是数据格式，比如在c语言中的整形，实型就是一种数据格式，你可以理解为数据或者文本记录的规则。
json的数据格式是采用js的语法来描述的，但是json并非一门单独的编程语言。

2.json的应用

json可以用在服务器和应用程序间的传输
编写js应用程序，浏览器扩展等

3.一个简单的例子

{
	"book":[
		{
			"name":"fromdark",
			"author":"fromdark",
		}
	]
}
上面的例子描述了一本书的书名和作者。

4.一个在浏览器上显示的json例子

在你的编辑器里将下面的代码保存为.htm结尾的文件，并在浏览器打开，你会看到json如何在浏览器上显示的。
<!DOCTYPE html>
<html>
<head>
	<title>json example</title>
	<script type="text/javascript">
	var book={"name":"fromdark","author":"fromdark"};

	document.write("<h1>NAME:</h1>"+book.name);
	document.write("<br>");
	document.write("<h1>AUTHOR:</h1>"+book.author);

	</script>
</head>
<body>

</body>
</html>

你也可以采用下面的代码书写方式，不过js的部分要放在下面，这和js的加载顺序有关。
<!DOCTYPE html>
<html>
<head>
	<title>json example</title>

</head>
<body>
NAME:<p id="p1"></p>
AUTHOR:<p id="p2"></p>


	<script type="text/javascript">
	var book={"name":"fromdark","author":"fromdark"};

	document.getElementById("p1").innerHTML=book.name

	document.getElementById('p2').innerHTML=book.author

	</script>

	
</body>
</html>


5.jsonp

jsonp是指json with padding。通过jsonp我们可以从别的网站获取资料或者数据。
为什么使用jsonp呢，是因为有浏览器同源策略的限制（一种安全策略）。
那么什么是同源策略呢，这里简单的解释一下，就是同域名，同协议，同端口。三个相同。
举一个同源策略的应用场景来理解同源策略：
比如你在登录自己的A网站帐号的时候，大多数人会选择记住自己的帐号和密码，这些记录会被保存在cookie中，下次登录的时候，A页面会自动读取这些信息。如果没有同源策略，那么你在登录B网页的时候，A的信息同样会被B读取，这样你的帐号信息，密码就会暴露（现实的情况下，你会发现，你在登录一些B网页的时候，会发现A的用户名会自动补全就是采用了同源策略规避，不过这不会盗取你的密码这样重要的信息）。继续，采用了同源策略，如果浏览器检测到不是同域名，同协议或者同端口，就不会把信息泄露了。
jsonp的知识相对复杂，设计服务器和客户端的知识和编码，这里先简单介绍。




posted on 2017-06-02 11:01  I_noname  阅读(159)  评论(0)  编辑  收藏  举报

导航