我在复习 JSONP 的时候,找了好几篇文章看,发现没有一篇能简要讲明白的,必须要参考好几篇文章才能 GET 到最核心的点以及使用方法,于是经过整理就有了这篇文章。

首先,页面中的 script 标签里面放的是 js 代码,而加上 src 属性后 script 标签就有了加载和运行外部 js 代码的能力。

于是,不法分子们就抓住这个漏洞,开始了与浏览器的同源策略做斗争,还打了场胜仗。

加上 src 属性的 script 标签,是利用 HTTP 的 GET 方法去访问你指定的 url 的, 它预期会 GET 到一个 js 文件或者是一段 js 代码,然后浏览器会去执行它。

于是呢,所谓的 JSONP 就相当于是利用 script 标签 GET 到的这一段 js 代码再去执行的方式。

使用方法就是:

  1. 前后端相互沟通好,前端定义好一个函数,用来解析异步请求的数据。

例子:

function get(params) {
  // 处理 params
}
1
2
3
  1. 后端写一个接口,告诉前端你请求我接口的时候要加上 func 这个参数。
// 接口:http://www.abc.com/api?func=get
// 后端得到 func 参数的这个前端定义的函数名 get,接着像下面这样组合好后返回:
return 'get({name: zl})';
1
2
3

3、前端在 script 标签里的 src 属性设置为这个接口。 例子:

<script src="http://www.abc.com/api?func=get"></script>
1

这个时候,script 标签就会去访问这个 src,得到 get({name: zl}) 这个 js 代码,然后浏览器开始执行它, 因为你事先已经定义过 get 这个函数了,所以它会正常运行。

但是,第三步需要是异步请求,那么就在需要做请求操作的地方,利用 js 生成这段 script 标签放到 head 里面就行了(或者是把 src 用js动态改一下,这个我倒是没有试过)。

这就是 JSONP 啦。