跨域JSONP

Posted 2020-11-27 DNFYI

一、什么是同源策略

同源策略：同源是指域名、协议、端口均相同

跨域：是指从一个域名的网页去请求另一个域名的资源，只要域名、协议、端口有一个不同，就被当作是跨域

JSONP是我们解决跨域最常用的方式

二、JSONP的原理

JSONP是JSON with Padding的简写，是一种跨域的解决方案

JSONP由两部分解组成：回调函数和数据。回调函数是当相应到来的时候，应该在页面中调用的函数，数据就是传回回调函数中的JSON数据

JSONP的原理：我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的，但是在用link标签和script标签引入其他域上的脚本文件是可以的，JSONP就是利用script标签上的src属性来加载不同域上的资源

JSONP重要的一点就是允许用户传递一个函数名作为参数传给服务端，然后服务端返回数据时，会将这个函数参数作为函数名来来包裹住数据，函数名(数据)，这样客户端就可以随意定制自己的函数来自动处理返回数据了；例如我们传给服务端的函数名是abc，那么服务器端就会将我们所需要的数据作为abc函数的参数返回来abc(数据)，服务端返回的数据是JSON格式的，这也是JSONP封装的思路

三、封装JSONP函数

        function getJSONP(url,callback){
            if (!url) {
                return;
            } else {
            // 声明数组用来随机生成函数名,索引
            var a=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘j‘],
            r1=Math.floor(Math.random()*10), //Math.floor()取整函数,这样r1，r2，r3就是随机的0-9
            r2=Math.floor(Math.random()*10),
            r3=Math.floor(Math.random()*10),
            name=‘JSONP‘+a[r1]+a[r2]+a[r3];
            cbname=‘getJSONP.‘+name; //随机生成的函数名要作为getJSONP的一个属性，方便后面删除delete getJSONP[name];
            // console.log(cbname);

            if(url.indexOf(‘?‘)===-1){
                url+=‘?jsonp=‘+cbname;
            }else{
                url+=‘&jsonp=‘+cbname;
            }
            // console.log(url);
            // 动态创建script标签，第1步，通过src引入js文件，
            var script=document.createElement("script");
            script.src=url;
            document.getElementsByTagName("head")[0].appendChild(script);
　　　　//第2步，载入js文件后
            // 定义被脚本执行的回调函数,getJSON[name]这里要作为一个变量，所以要用[]，而不能用.
            getJSONP[name]=function(data){    //第3步：执行url中指定的函数
                try{  //try里面是可能发生错误的；比如跨域获取没有成功或成功
                    callback&&callback(data);
                }catch(e){  //发生错误了可以捕获到
                    //
                }finally{  //不管有没有发生错误，都要执行的操作
                    //最后删除该函数及script标签，不删除的话产生数据会造成污染
                    delete getJSONP[name];
                    script.parentNode.removeChild(script);
                }
            }
            }
        }
        getJSONP(url,function(data){
            console.log(data); //这里的回调函数传到getSONP函数里面，在getJSONP[name]函数执行，getJSONP[name]函数传回来了跨域的数据data，所以最后将data传出来并打印
});