为什么要使用JSONP
因为浏览器中的“同源策略”导致js脚本不能跨域请求数据。这时候我们想要获取别的域名下的数据就需要用到JSONP。
同源策略
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一样实现同步请求,但是如果 业务逻辑有需求,可以考虑把回调逻辑写到回调函数里执行。