一分钟了解 JSONP

时间 2019-11-05

标签一分钟了解 jsonp 栏目 JSON 繁體版

原文原文链接

为何要写这个短文？我在复习 JSONP 知识的时候，随便搜了几篇文章看，额......后来就有了写它的想法。html

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

因而，不法分子们就抓住这个漏洞，开始了与浏览器的同源策略作斗争，打了场胜仗。ajax

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

因而呢，所谓的 JSONP 就至关因而利用 GET 到的这一段 js 代码的方式。api

使用方法就是：
一、先后端相互沟通好，前端定义好一个函数，用来解析异步请求的数据。
例子：浏览器

function ajax(result) {
  // 处理 result
}

二、后端写一个接口，告诉前端你请求我接口的时候要加上 function 这个参数，而后返回这个函数的执行方式。
例子：异步

// 接口：http://www.abc.com/api?function=ajax
// 后端获得 function 参数的这个前端定义的函数名，示例是 ajax，而后像下面这样组合好后返回：
// return 'ajax(1)';

三、前端在 script 标签里的 src 属性设置为这个接口。
例子：函数

<script src="http://www.abc.com/api?function=ajax">

这个时候，浏览器就会去 GET 请求接口，而后 script 标签获得 ajax(1) 这个 js 代码，而后浏览器开始执行它，由于你事先已经定义过 ajax 函数了，因此 ajax(1) 会正常运行。url

可是，第三步须要是异步请求，那么就在须要作请求操做的地方，利用 js 生成这段 script 标签放到 <head> 里面就好了（或者是把 src 用js动态改一下，这个我却是没有试过）。code

这就是 JSONP 啦。