一分钟了解 JSONP
为什么要写这个短文?我在复习 JSONP 知识的时候,随便搜了几篇文章看,额......后来就有了写它的想法。
首先,页面中的<script>
标签里面放的是 js 代码,而加上 src 属性后<script>
标签就有了加载和运行外部 js 代码的能力。
于是,不法分子们就抓住这个漏洞,开始了与浏览器的同源策略做斗争,打了场胜仗。
加上 src 属性的 script 标签,是利用 HTTP 的 GET 方法去访问你指定的 url 的,
它预期会 GET 到一个 js 文件或者是一段 js 代码,然后浏览器会去执行它。
于是呢,所谓的 JSONP 就相当于是利用 GET 到的这一段 js 代码的方式。
使用方法就是:
1、前后端相互沟通好,前端定义好一个函数,用来解析异步请求的数据。
例子:
function ajax(result) { // 处理 result }
2、后端写一个接口,告诉前端你请求我接口的时候要加上 function 这个参数,然后返回这个函数的执行方式。
例子:
// 接口:http://www.abc.com/api?function=ajax // 后端得到 function 参数的这个前端定义的函数名,示例是 ajax,然后像下面这样组合好后返回: // return 'ajax(1)';
3、前端在 script 标签里的 src 属性设置为这个接口。
例子:
<script src="http://www.abc.com/api?function=ajax">
这个时候,浏览器就会去 GET 请求接口,然后 script 标签得到 ajax(1) 这个 js 代码,然后浏览器开始执行它,因为你事先已经定义过 ajax 函数了,所以 ajax(1) 会正常运行。
但是,第三步需要是异步请求,那么就在需要做请求操作的地方,利用 js 生成这段 script 标签放到 <head> 里面就行了(或者是把 src 用js动态改一下,这个我倒是没有试过)。
这就是 JSONP 啦。
相关推荐
zmosquito 2020-05-10
somebodyoneday 2020-04-22
fengchao000 2020-04-22
fengchao000 2020-04-11
fengchao000 2020-03-05
xiaouncle 2020-02-13
fengchao000 2020-06-17
adonislu 2020-05-16
adonislu 2020-05-10
Richardxx 2020-03-07
somebodyoneday 2020-03-06
somebodyoneday 2020-02-16
baijinswpu 2020-01-29
fengchao000 2020-01-10
fengchao000 2019-12-25
newthon 2019-12-23
somebodyoneday 2013-07-11