主页
关于
Stay before every beautiful thoughts
在每一个美好的思想前停留
文章
>
踩坑记录
>
正文
关于JSONP的理解和坑点的纪录
jsonp
Created at 2021-07-16 23:23
## 为什么要使用JSONP 因为浏览器中的“同源策略”导致js脚本不能跨域请求数据。这时候我们想要获取别的域名下的数据就需要用到JSONP。 [同源策略](https://baike.baidu.com/item/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5) ----- ## JSONP 跨域的原理到底是什么 简单来说，JS 虽让不能跨域请求数据，但是可以跨域请求文件资源，例如使用CDN上的CSS，IMG，JS 等资源文件。 在浏览器加载完JS 资源文件后，就会执行该文件。 例如，a.com 有一个插件，正好b.com 需要用到这个插件。 ######a.com/alert.js ``` alert('a.com test'); ``` ###### b.com/index.html ``` <script src="http://a.com/alert.js"></script> ``` 这时候打开 b.com/index.html 就会执行a.com/alert.js 的代码 弹出一个 警告框。延伸一下思路，既然能实现弹出文字警告我们也能传输数据。 ------------------------ 例如 我们要获取一个叫张三的个人信息 ###### b.com/index.html ``` <script> function test_jsonp(data){ console.log(data); } </script> <script src="http://a.com/alert.php?callbackFun=test_jsonp&name=张三"></script> ``` ######a.com/alert.php 内容由动态脚本生成 ``` test_jsonp({id:11, name:'张三', age:18, sex:'男'}); ``` 这样 打开 b.com/index.html 加载执行远端文件，继而获取到了 a.com 中的数据。 ----- ## JSONP 的坑点 jsonp 只能实现GET请求，因为它是通过动态添加script代码，远端输出包含数据的可执行JS代码，然后执行对应的回调函数来获取数据。 GET传输数据的参数是有限量的，这个跟后端配置有关系。当参数过多时，可以把参数转换成数据字符串来传输。（多选列表，选中1500个 传输到后端只接受到 800个，可改服务器配置，也可改参数形式） jsonp 不能像 ajax一样实现同步请求，但是如果 业务逻辑有需求，可以考虑把回调逻辑写到回调函数里执行。 ------- ## 其他有关JSONP的拓展链接。 [同源策略](https://baike.baidu.com/item/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5) [深入剖析jsonp跨域原理](http://www.cnblogs.com/digdeep/p/4170059.html) [自己封装的JSONP跨域函数](https://blog.csdn.net/liusaint1992/article/details/50959571)
