如何优雅的使用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后的字段名。
通过这种方式即可实现跨域请求数据了。
路漫漫其修远兮