跨域方法之JSONP

简介

JSONP是最常见的跨域方法之一，全称是JSON with Padding，是在通过在原本的json数据中再填充一些东西来实现跨域。

怎么用

首先我们先来看一行代码

我们可以看出，script标签中的src属性是可以加载任意地址的线上资源的，获取到数据后被浏览器当做JavaScript代码执行。

现在假设我们有一个接口，接口地址为api.nameless.com/weather.php

请求之后将会得到json数据{"weatherinfo": {"city": "杭州","weather": "sunny"}}

当我们这样使用这个接口时：，无异于执行了这么一句JavaScript代码

{"weatherinfo": {"city": "杭州","weather": "sunny"}}

这样相当于创建了一个游离的对象，我们无法获取这个对象，也就无法得到数据。

所以怎样才能得到数据呢？

我们可以这样写

当后端接收到我们的请求，解析出我们添加的参数callback等于showData时，他会将showData和json数据拼接起来，然后返回这样的数据：

showData({"weatherinfo": {"city": "杭州","weather": "sunny"}})

仔细一看，如果把这行代码当做JavaScript代码来运行的话，不就是执行了一个叫做showData的函数吗？

如果我们提前定义好这个函数，就能够获取到所有的数据了。

总结

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。