JSON和JSONP的简单学习

最新推荐文章于 2024-05-16 11:50:27 发布

WXDEE

最新推荐文章于 2024-05-16 11:50:27 发布

阅读量248

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_29791893/article/details/88056722

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JSON和JSONP的区别

JSON是一种数据交换格式，JSONP是一种非官方跨域数据交互协议。简单理解，JSON是暗号，JSONP是接头方式，一个是描述信息的格式，一个是信息传递双方约定的方法。

二、什么是JSON

JSON定义

JSON：JavaScript Object Notation（JavaScript对象表示法），是轻量级的文本数据交换格式，文件名扩展是 .json。其可通过JavaScript进行解析，使用AJAX进行传输。

JSON语法

JSON 语法是 JavaScript 对象表示法语法的子集，包括以下内容：

数据在名/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON支持两种数据格式：

名/值对集合：这一数据结构由不同的编程语言支持。
有序的值列表：包括数组，列表，向量或序列等等。

JSON的值可以是：

数字（整数或浮点数）
字符串（在双引号中）
布尔型（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON举例：

{
	"employees": [{
			"firstName": "John",
			"lastName": "Doe"
		},
		{
			"firstName": "Anna",
			"lastName": "Smith"
		},
	]
}

JSON使用

JSON.parse()： 从一个字符串中解析出JSON对象。举例：

var data='{"name":"dee"}';
JSON.parse(data);
// 结果是：{ name: 'dee' }

JSON.stringify()： 从一个对象中解析出字符串。举例：

 var data={name:'dee'};
 JSON.stringify(data);
 // 结果是：'{"name":"goatling"}'

JSON的优点

基于纯文本，跨平台传递极其简单；
JavaScript原生支持，后台语言几乎全部支持；
轻量级的数据格式，占用字符量极少，特别适合互联网传递；
可读性较强，虽然比不上XML那么一目了然，但在格式化后很容易识别；
容易编写和解析；

JSON格式化校验工具

推荐一个JSON格式化工具：http://www.bejson.com/

三、什么是JSONP

JSONP（JSON with Padding）是资料格式JSON的一种使用模式，可以让网页从别的网域获取资料，即跨域读取数据。

同源策略

为什么从不同的域访问数据需要一个特殊的技术（JSONP）呢，这是因为同源策略。什么叫同源：
URL由协议、域名、端口、路径组成。如果两个URL的协议、域名和端口相同，则表示它们同源。相反，只要协议、域名、端口有任何一个不同，就被当作跨域。
在这里插入图片描述

跨域获取数据方案

1、web网页上调用js文件时不受是否跨域的影响，而且凡是拥有‘src’这个属性的标签都拥有跨域的能力，如 script、img、iframe。
2、于是可以判断，如果想通过纯web端跨域访问数据，可以在远程服务器上把数据装进js格式的文件里，供客户端调用和进一步处理。
3、而JSON的纯字符数据格式可以简洁的描述复杂数据，并且被js原生支持。
4、web客户端调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀）后，就获得了自己所需的数据。这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
5、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，即JSONP。该协议的一个要点是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的客户端具体实现

<html>
	<head>
		<title></title>
		<script type="text/javascript">
			// 得到航班信息查询结果后的回调函数
			var flightHandler = function(data) {
				alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
			};
			// 提供jsonp服务的url地址(不管是什么类型的地址，最终生成的返回值都是一段javascript代码)
			var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
			// 创建script标签，设置其属性
			var script = document.createElement('script');
			script.setAttribute('src', url);
			// 把script标签加入head，此时调用开始
			document.getElementsByTagName('head')[0].appendChild(script);
		</script>
	</head>
	<body>	
	</body>
</html>

调用的url中传递了一个code参数，告诉服务器要查的是CA1998次航班的信息，而callback参数则告诉服务器，本地回调函数叫flightHandler，所以请把查询结果传入这个函数中进行调用。
服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html：

flightHandler({
	"code": "CA1998",
	"price": 1780,
	"tickets": 5
});

传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

ajax与jsonp的异同

ajax和jsonp在调用方式上看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery等框架都把jsonp作为ajax的一种形式进行了封装；
ajax和jsonp本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加‘script’标签来调用服务器提供的js脚本。
ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
jsonp是一种方式或者说非强制性协议，如同ajax一样，不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

四、参考

https://www.cnblogs.com/jiekexuan/p/5355151.html
https://blog.csdn.net/u014660247/article/details/80912553
https://www.cnblogs.com/xhz-dalalala/p/5259965.html

WXDEE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON和JSONP的简单学习

JSON定义JSON：JavaScript Object Notation（JavaScript对象表示法），是轻量级的文本数据交换格式，文件名扩展是 .json。其可通过JavaScript进行解析，使用AJAX进行传输。JSON语法JSON 语法是 JavaScript 对象表示法语法的子集，包括以下内容：数据在名/值对中数据由逗号分隔花括号保存对象方括号保存数组JSON支...
复制链接

扫一扫

专栏目录