js跨域之jsonp原理

写在前面

一说到javascript的跨域，很多人第一时间想到的就是jsonp(JSON with Padding)，那么这种跨域方式的实现原理是什么？
我承认我使用了很长时间，但是还是现在才知道，原来是这样....

问题，如果我在本地访问 api.com下面的接口，会出现跨域请求的问题，为什么jsonp能解决这个？

1、script标签是用来加载什么的？
加载js脚本的，src写上一个脚本的地址，然后浏览器就能加载啊！
2、那么本地jsonp.html的script标签可以加载api.com的域名下面的脚本文件吗？
可以啊！要不那些用CDN方式优化网页加载速度的，是不可能成功的如

3、那么script能加载别的域名下面的脚本文件，与jsonp何干？
我们都知道，加载api.com的域名下面的js脚本是可以的，此时,api.com下面的js脚本文件为真实存在的静态资源。那么如果这个脚本文件是由后端语言生成的呢？实例使用 php
==>jsonp.php

运行结果

image.png

以上证明，我们完全可以在服务器端生成一段脚本，然后html页面用script标签去加载然后执行脚本。

那么，我们可以在生成的脚本中执行html中定义的方法吗？我们来试一下

index.html




    
    jsonp

jsonp.php

运行结果

image.png

是的，我们发现完全没问题，我们平常调用接口就是要的后端返回的数据，上面的例子，后端生成脚本时已然给我们传递了参数，拿到数据之后，我们可以做任何我们想做的事。

问题：如果后端接口这么写，那么前端所有调用这个接口的地方，岂不是都要定义一个 execWithJsonp方法？

如果页面调用两次，处理逻辑还不一样，那么我们岂不是要区分是哪一次？我希望每次访问接口调用不同的处理数据函数，每次我来告诉后端用哪个函数来处理返回的数据。
当然可以，我们可以这么做

index.html




    
    jsonp

jsonp.php

运行结果

image.png

说到这儿，我好像还是没说原理是啥，其实你看完上面的也就理解了

jsonp实际上就是

1、前端调用后端时传递给后端数据的处理函数callback
2、后端收到处理函数callback之后，进行数据库查询等操作，将后端要传递给前端的数据（一般为json格式）放入callback函数的（）中并返回【实际上就是由后端动态生成一个前端可用的js脚本】，
3、html页面在脚本文件加载后，自动执行脚本
4、完成了整个jsonp请求。

优缺点

优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，切很明显的需要后端工程师配合才能完成。

后记，发挥自己的想象吧，看这东西该怎么操作好