什么是JSONP及其实现原理

一、为什么会有JSONP

解决跨域问题；因为XMLHttpRequest有同源策略，而在实际开发中又常有跨域的需求，早期开发者为解决跨域问题，设计出了JSONP这个东西

二、JSONP长什么样

类似JSON，一种JSON的变体，样式就像是包在函数的参数里
函数名({“data”:”数据”})，一般情况下这个函数都是个回调函数即
callback({“data”:”数据”})

三、JSONP的实现原理

利用 <script>标签可以跨域get引入js脚本；通过<script><img><iframe><link>标签的跨域请求不受同源策略的约束，这里不受约束指的是引入外部的script、img、iframe等“文件”，但会限制这些引入的内容对当前内容的操作

四、例子

假设在远端服务某个项目中有一个叫
test.js的js文件，这个项目的域名是https://dddd.com/路径是xxx/xx/test.js,那么就可以通过https://dddd.com/ xxx/xx/test.js访问到该文件，如下：

通过<script>引入的js脚本响应成功后会立即执行，因此要实现JSONP跨域请求还需要服务器端配合接口，动态生成一个js代码并将要返回的数据封装在返回的js脚本中如上面的test.js文件，这时请求端还应提前定义好被调用的函数（回调函数），以及在请求上加入参数，且这个参数是一个回调函数，如下：

上述就是利用<script>标签跨域get引入js脚本实现跨域请求即JSONP

五、其他

注：在研究JSONP的时候，遇到了一些如下同样的疑问，以及相应的回答，遂摘录下来供大家商榷

①Ajax、XHR、同源策略的关系

优质回答：Ajax（Asynchronous JavaScript + XML）即异步JavaScript加XML技术；XHR即XMLHttpRequest对象，该对象的作用就是实现发送服务器请求和获取响应异步从服务器获取数据，该技术是推动Ajax发展的关键技术；同源策略是浏览器站在安全的角度制定的一种从服务器获取数据的限制，这个安全限制可以防止一些恶意行为，通过XHR进行Ajax通信会被同源策略限制。

②为什么<script><img><iframe><link>标签不受同源策略限制

优质回答：1.<script><img><iframe><link>跨域请求是在同源策略制定之前就已经实现的技术；2.同源策略不是统一的干净公理，它实际上是一组特定的规制和特殊情况，这些规则和特殊情况已经成为现代web的化石，您无法使用正确捕获基本的细节的简短描述来定义同源策略，因为特殊情况在实践中实际上很重要

概括下来就是：<script><img><iframe><link>跨域请求早就有了，而且同源策略也只是对常用的规则的整理设计，但是并不能因为常用的规则而去取消特殊的情况，因为在某些场景特殊情况也很重要。

③为什么制定同源策略后不取消<script><img><iframe><link>标签的跨域请求，这不是存在安全风险吗

优质回答：取消这种跨域能力会破坏很多现有的网络

④通过<script>和<img>标签实现跨域请求的区别

优质回答：<img>标签只能通过监听onload和onerror事件知道什么时候接收到了响应进而进行后续处理，但是无法获取数据；<script>是获取一个可执行的js程序，且在请求响应成功后会立刻执行，这就为有数据返回的跨域请求提供了可能。