jsonp跨域原理_真的了解jsonp？面试时说对了吗？

昨天去面试了，问到jsonp，我知道这是浏览器同源策略导致的跨域问题的一种解决策略，原理是script标签在请求资源时不受跨域限制。但是具体怎么实现的，感觉起来真的好模糊，我向面试官说明这方面没有深究，因为实际工作中无论是服务端配置Access-Control-Allow-Origin，还是nginx代理，好像和前端关系都不大，然则，我们自己知道，说白了，还是自自己对知识的掌握不扎实。

说一点题外话，在面试中遇到不清楚的不要不懂装懂，坦诚一些更好，面试官并不会因为一个问题回答的不好而pass掉你。如果乱说一通反而适得其反！

言归正传，学知识就要学的透彻，面试虽然通过了，jsonP还在无情的蔑视我！血能忍骨都不能忍！So，查阅了好多资料，最终还是仔仔细细的阅读了javascript高级程序设计JSONP一节，才彻底的弄懂了，由此可见，读书的重要性！！！

下面先看一个简单例子，页面加载时调用init函数在页面上显示内容：

index.html：

我们除了在当前页面的<script>标签内执行init(）函数，还可以在另一个脚本文件index.js中调用init()函数，当我们用<script>引入了index.js时，就会执行index.js里的代码，init()函数即被调用了。如下：

index.js:

看到了吗？我在当前页面脚本里定义的函数init()，通过<script>加载另一个脚本index.js，在另一个脚本里执行了并且传递了数据data.

好了，这时再来看<script>处理跨域的问题就很容易理解了。跨域是为了去请求资源，但是浏览器为了安全性考虑定义了同源策略。我现在知道服务器上有资源，但是因为跨域就是取不了！没关系，<script>有特权，可以完全无视跨域限制请求资源。根据上面的例子可以知道，我可以在服务端的里执行前端得到数据想要执行的函数，把它叫做回调函数callback（如上述init函数）,并把这个相应的数据作为回调函数的参数传递进去。这样，就得到了数据并对得到的数据做了相应处理。如上述也就是：<script src="./index.js"></script>里src引入的index.js存在了跨域的服务端里。这就是JSONP的应用了

总结一下：

1. <script>元素有能力不受限制地从其他域中加载资源
2. script加载资源其实是加载代码执行，jsonp其实就是从其他域中加载代码执行，

javascript高级程序设计第三版21.5.2小节有如下阐述：

^[1]因为JSONP是有效的Javascript代码，所以在请求完成后，即在JSONP相应加载到页面以后，就会立即执行。

3. 明确它的定义，明确它的定义JSON with padding：填充式JSON或参数式JSON，我觉得参数式JSON更好的理解，JSON不用说了，一种特定数据结构的对象，参数式JSON就是字面意义，把json形式的数据作为回调函数的参数！

4.JSONP的组成：回调函数callback和数据data，我们可以在script的src请求的url中指定回调函数的名称，如：

<script src="base-url/index.js?callbacl=init"></script>

当然我们还可以在url中传递其他参数以便对资源请求做更多的说明：

<script src="base-url/index.js?callbacl=init&id=xxx"></script>

好了，以上就是我对JSONP的理解，希望能对看到的人有所帮助，如果发现错误，也请给予指点！

参考

1. ^javascript高级程序设计