JSONP原理及应用实例详解

　　

JSONP被用于跨域获取数据。在讲解它之前,先讲讲它与JSON之间的区别

　　


　　

　　

JSON是一种基于文本的数据交换方式,或者叫做数据描述格式。

　　

其优点是:

　　

1,基于纯文本,跨平台传递极其简单,

　　

2, Javascript原生支持,后台语言几乎全部支持,

　　

3,轻量级数据格式,占用字符数量极少,特别适合互联网传递,

　　

4,可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

　　

5,容易编写和解析,当然前提是你要知道数据结构;

　　

JSON的缺点当然也有,跨域无法获取数据,而JSONP的出现正好弥补了这一缺陷

　　


　　

　　

JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议,其本质就是js文件。

　　


　　

　　
    　　<李> Web页面上调用js文件时不受是否跨域的影响(不仅如此,凡是拥有" src "这个属性的标签都拥有跨域的能力,比如& lt; script>, & lt; img>, & lt; iframe>) 　　<李>跨域js文件中的代码(当然指符合网络脚本安全策略的),web页面也是可以无条件执行的。
    　　李 　　
　　

<强>接下来将以具体实例解释JSONP的原理,首先确保你的电脑上安装了nodejs

　　

1。建立本地web服务器

　　

新建文件夹jsonp,进入该文件夹内打开命令行工具

　　 　　 　　npm安装高雅koa-static 　　 　　

新建索引。js文件

　　 　　//index.js 　　const高雅=要求(“高雅”) 　　const应用=new高雅() 　　app.use(要求(koa-static) (__dirname +/公共)) 　　app.listen (3000) 　　之前 　　 　　

2。新建公共文件夹后进入文件夹,创建索引。html, somejsonp.js文件

　　 　　//index . html 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比; 　　& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比; 　　& lt; title> Document 　　& lt;/head> 　　& lt; body> 　　& lt;脚本src=" http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "祝辞& lt;/script> 　　& lt; script> 　　var localHandler=function(数据){ 　　警报(“我是本地函数,可以被跨域的遥远。js文件调用,远程js带来的数据是:' + data.result); 　　}; 　　& lt;/script> 　　& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/somejsonp.js "祝辞& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　之前 　　 　　 　　//somejsonp.js 　　localHandler({“结果”:“我是远程js带来的数据"}); 　　 　　

3。然后回到jsonp文件夹,输入命令节点index.js后,用浏览器打开http://localhost: 3000年即可看到浏览器窗口弹出js文件中的结果,也就是我们获取到了js的数据。这便是jsonp的基本原理。

　　

动态获取JSONP的数据,就是在页面中动态插入一段脚本标签,可控硅中包含路径及参数,这样后台可根据参数动态生成JS文件,涉及后台实现,这里不做过多阐述。

　　


　　

　　

jquery中对于jsonp的封装也是基于以上原理,下面是基于jquery的代码

　　

修改index . html 　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比; 　　& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比; 　　& lt; title> Document 　　& lt;/head> 　　& lt; body> 　　& lt;脚本src=" http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "祝辞& lt;/script> 　　& lt; script> 　　. ajax({美元 　　url: http://localhost: 3000/somejsonp.js ', 　　数据类型:“jsonp”, 　　jsonp:“回调”, 　　jsonpCallback:“localHandler”, 　　成功:功能(数据){ 　　警报(data.result) 　　} 　　}) 　　& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　之前 　　 　　

jquery动态生成脚本标签,并定义好方法。前提是jsonpCallback的方法名与引入的js文件方法名一致。

　　

重新刷新页面即可看到弹出框中获取的jsonp中的数据。

　　

简单描述就是,先定义一个方法,然后引入外部JS调用这个方法并携带数据。
　　

　　


　　

　　

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img, iframe,脚本等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过脚本节点中的src属性调用跨域的请求。当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客户端回调函数。

JSONP原理及应用实例详解