一分钟相识 JSONP

2023年2月19日 208次阅读 来源: kybetter

为何要写这个漫笔？我在温习 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 啦。

    原文作者：kybetter
    原文地址: https://segmentfault.com/a/1190000018012817
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞