JSONP的理解

JSONP作为js跨域请求的一个方案，很早就知道了，一直没有详细了解。今天了解了一下，记录下来。

JSONP 是 JSON with Padding 是缩写。是指定数据格式json的一种使用模式，可以让网页从别的域名要数据。

我们都知道浏览器安全最基本的就是“同源策略”

同源策略是指URL的三个要素:

  • 协议相同
  • 域名相同
  • 端口相同

它会限制三种行为:

  • Cookie、LocalStorage
  • DOM 无法获得
  • AJAX 请求不能发送

同源策略的目的是为了保证用户信息的安全。因此是必要的。
但是有时候对开发来讲也会不方便，尤其是 ajax 请求。

因些就是有 jsonp 的方案。

从上面的限制列表中可以看到，浏览器的同源策略限制了 Cookie, DOM, Ajax, 但是是没有HTML的一些标签，比如:

1
2
<img src="">
<script src="">

比如 A 站点的地址是 http://example1.com/page/test.html, 页面上的 script 是

1
<script src="http://example2.com/test.js"></script>

是可以请求到数据，浏览器并不做限制。这样就可以执行 example2.com 上的js文件了。

但是我们有时候需要一种理自由的处理example2.com 上的数据，就需要在 example2.com 上写一些接口，比如：
http://example2.com/test.php
比如这个接口返回json: {“result”: “This is test”}.
但是 script 标签对于返回的 json 并没有什么用。而且script 的返回是由js解析器直接执行了。
因此，我们可以直接 js 函数，或者 js 函数的调用，比如：

1
process({"result": "This is test"});

这样我们就实现了在 example1.com 站点上调用 example2.com 上数据的目的。