JSONP

获取数据

Posted by OYH on March 3, 2018

最近一直想着抓一些app的接口来做一些demo来练练手,接口是有了,但是新的问题产生了, 跨域.

什么是跨域呢,跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 所谓同源是指,域名协议端口均相同;

举个栗子:
    http://47.94.220.254:8080/
    协议://域名|ip:端口</p>

话说回来,我如何请求抓取的接口的数据呢,这时候就可以用到JSONP

JSONP:简单来说就是利用script标签没有跨域限制来达到与第三方通讯的目的

举个栗子:
    <script src="http://lf.snssdk.com/neihan/service/tabs/?callback=jsonpCallback"></script>
    <script>
        function jsonpCallback(data){
            console.log(data);//这就是获取的数据
        }
    <script>

但是一般我们都是动态生成script标签,因为我们不确定我们什么时候要请求数据,要请求那个接口的数据,所以需要动态生成

举个栗子:
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://lf.snssdk.com/neihan/service/tabs/?callback=jsonpCallback";
//在请求的地址后面带上回调函数,客户端声明的jsonpCallback
document.getElementsByTagName("head")[0].appendChild(JSONP);
function jsonpCallback(result) {
    var data = result;
    console.log(data);//data就是请求的数据
}