如何优雅的使用JSONP？猛戳此处！！！

如何优雅的使用JSONP？猛戳此处！！！

JSONP（JSON with Padding）

JSONP 是一种json的使用模式，主要是用来解决跨域请求数据。因为有同源策略存在的原因，导致我们从不同的域（网站）访问数据会出现跨域报错。JSONP就是用来解决该问题的手段之一。

清楚JSONP为什么不会跨域

<script src="https://www.baidu.com/wd=D"></script>
//这种方式的请求是不会产生跨域的，因此我们可以利用script标签的src来请求数据

基于上面的原理我们接着来说，百度搜索的案例。

百度一下案例

我们从百度输入12，出现如上图所示检索到的数据列表，跟12相关的条目被列举出来。其实这些相关数据请求的方式就是使用到了JSONP，怎么证明呢？

查看百度检索数据的请求方式

我们打开控制台，切换到Network选项，清空已有的数据，然后一次输入123

复制sugre对应的请求条目url：

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1434,33221,33306,33259,31253,32974,33285,33313,33312,33311,33310,32447,32846,33211,33309,26350,33199,33308,33307,33149,22159&wd=123&req=2&csor=3&cb=jQuery110203576277956502223_1608274578759&_=1608274578762

同样的操作我们输入继续输入45后复制url：

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1434,33221,33306,33259,31253,32974,33285,33313,33312,33311,33310,32447,32846,33211,33309,26350,33199,33308,33307,33149,22159&wd=12345&req=2&pbs=12345&csor=5&pwd=123456&cb=jQuery110203576277956502223_1608274578759&_=1608274578771

对比两个url，去掉相同部分后：

wd=123&req=2&csor=3&cb=jQuery110203576277956502223_1608274578759&_=1608274578762

wd=12345&req=2&pbs=12345&csor=5&pwd=123456&cb=jQuery110203576277956502223_1608274578759&_=1608274578771

wd：搜索关键字，cb：callback 函数，也就是说cb后面是一个函数名称。那么这个函数其实就是用来接收我们搜索字的相关条目的集合。是由后端将数据作为cb回调函数的参数的传给前端的。

<script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1434,33221,33306,33259,31253,32974,33285,33313,33312,33311,33310,32447,32846,33211,33309,26350,33199,33308,33307,33149,22159&wd=123&req=2&csor=3&cb=jQuery110203576277956502223_1608274578759&_=1608274578762"></script>

通过script 的src设置该url来向后端请求数据，后端数据作为cb回调函数的参数传入。

而该script是通过js动态添加到dom中的，添加完后，会在全局设置一个cb函数，名称就是cb后的字段名。

通过这种方式即可实现跨域请求数据了。

路漫漫其修远兮