关于JSONP的理解和坑点的纪录

为什么要使用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一样实现同步请求，但是如果 业务逻辑有需求，可以考虑把回调逻辑写到回调函数里执行。

---

其他有关JSONP的拓展链接。

同源策略
深入剖析jsonp跨域原理
自己封装的JSONP跨域函数