JSONP基础知识详解 - 行业资讯 - 肥雀云_南京肥雀信息技术有限公司

<强>前面的话

JSONP是JSON和填充(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于务器与客户端跨源通信,在后来的Web服务中非常流行。本文将详细介绍JSONP

<>强基础

JSONP的基本思想的是,网页通过添加一个& lt; script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来

当通过& lt; script>元素调用数据时,响应内容必须用javascript函数名和圆括号包裹起来。而不是发送这样一段JSON数据,这就是JSONP中p的意义所在

<代码>[1、2、{“扣”:“我的鞋”}]

JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,它会发送这样一个包裹后的JSON响应:

<代码> handleResponse ([l 2{“扣”:“我的鞋”}])

包裹后的响应会成为& lt; script>元素的内容,它先判断JSON编码后的数据,然后把它传递给handleResponse()函数

在实践中,支持JSONP的服务不会强制指定客户端必须实现的回调函数名称,比如handleResponse。相反,它们使用査询参数的值,允许客户端指定一个函数名,然后使用函数名去填充响应。许多支持JSONP的服务都能分辨出这个参数名。另一个常见的参数名称是回调,为了让使用到的服务支持类似特殊的需求,就需要在代码上做一些修改了

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据

<代码> http://freegeoip.net/json/& # 63;调=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过査询字符串来指定JSONP服务的回调参数是很常见的,就像上面的URL所示,这里指定的回调函数的名字叫handleResponse ()

JSONP是通过动态& lt; script>元素来使用的,使用时可以为src属性指定一个跨域URL。这里的& lt; script>元素与& lt; img>元素类似,都有能力不受限制地从其他域加载资源。因为JSONP是有效的javascript代码,所以在请求完成后,即在JSONP响应加载到页面中以后,就会立即执行

　　　　　　响应函数handleResponse () { 　　警报(“你在IP地址”+反应。ip +”,这是在“+反应。城市+”、“+ response.region_name); 　　} 　　var=document.createElement脚本(脚本); 　　脚本。src=" http://freegeoip.net/json/& # 63;调=handLeResponse”;document.body。方法(脚本,document.body.firstChild); 　　　　

JSONP之所以在开发人员中极为流行,主要原因是它非常简单易用,老式浏览器全部支持,服务器改造非常小。与图像萍相比,它的优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信

使用& lt; script>元素进行Ajax传输,不受同源策略的影响,因此可以使用它们从其他的服务器请求数据,而且,包含JSON编码数据的响应体会自动解码(即执行)

不过,JSONP也有两点不足:首先,JSONP是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃JSONP调用之外,没有办法追究。因此在使用不是自己运维的Web服务时,一定得保证它安全可靠,其次,要确定JSONP请求是否失败并不容易。虽然HTML5给& lt; script>元素新增了一个onerror事件处理程序,但目前还没有得到任何浏览器支持。为此,开发人员不得不使用计时器检测指定时间内是否接收到了响应。但就算这样也不能尽如人意,毕竟不是每个用户上网的速度和带宽都一样

<强>简易示例

【前端】

　　　　　　& lt;按钮id=" btn "祝辞获取信息& lt;/button> 　　 loading

　　& lt; div id="结果"祝辞& lt;/div> 　　& lt; script> 　　var=(添加功能(){ 　　var counter=0; 　　返回函数(){ 　　返回+ +计数器; 　　} 　　}）（）; 　　函数loadScript (url) { 　　loadScript。马克=案涸亍? 　　var=document.createElement脚本(脚本); 　　脚本。type=" text/javascript”; 　　脚本。src=https://www.yisu.com/zixun/url; 　　脚本。onload=function () { 　　img.style。显示='没有'; 　　btn.removeAttribute(“禁用”); 　　} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null