深入理解JSONP原理——前端面试

JSON和JSONP虽然只有一个字之差,但是它们俩是八竿子打不着的:JSON是一种数据交换格式,JSONP是非正式的跨域数据交换协议。为什么说JSONP是非正式的传输协议呢?因为它就是利用了<script>标签没有跨域限制这一“漏洞”来达到与第三方通讯的目的。简单地说,该协议就是,允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名包裹json数据,这样客户端就可以随意定制自己的函数自动处理返回的数据了。
即,需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如:
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

听完上面的简述你还是一脸懵逼,那下面就来详细说说到底什么是JSONP。
先说说JSONP是怎么产生的
1.众所周知,Ajax请求存在跨域无权限访问的问题,甭管你静态网页,动态网页,web服务,WCF,只要是跨域的请求,一律不准。2.但是web网页上调用js文件是却不受跨域的影响(凡是有‘src’这个属性的标签都拥有跨域能力,比如
Date:2017-01-07
Tag:原理 理解 深入 JSONP 面试