关于jsonp跨域的实现

2022-07-09 08:32:59

1.实现原理

　　1.把接口写在 script标签的src 中这个接口就可以访问(不会存在跨域问题因为接口在浏览器地址栏是可以访问的会返回json字符串);

　　2.直接写不可以因为正常情况下 scr请求来的是可执行的js代码此时返回的是json对象所以程序报错;

　　3.src后拼接callback函数参数返回的json对象就会跑到这个函数的参数中 (原因不明觉厉);

　　4.然后就可以在这个函数中操作请求来的 json对象了完成;

2.代码实现

     //如果函数名，全是一个，任何的业务，都是回调这一个了

        var callbackName = 'callback_' + Date.now();  //声明唯一的函数名

        var myUrl = url + '?callback=' + callbackName; //拼接src的路径

        //创建标签

        var script = document.createElement('script');

        script.src = myUrl; //不会发请求

     //挂载全局函数

        window[callbackName] = function(data) {  //假设callbackName='a',服务器回写: a('数据')

            console.log(data);

            delete window[callbackName]; //删除window上一堆时间戳的函数 保持性能

       }

    //插入到body中,触发请求

    　　document.body.appendChild(script);

3.封装成函数

function jsonpFn(url,callback){

 　　　var callbackName = 'callback_' + Date.now();

   　　var script = document.createElement('script');

    　script.src = url + '?callback=' + callbackName;

    　window[callbackName] = function(data) {

         callback();

         delete window[callbackName];

    　　　document.body.appendChild(script)

}

//调用 
jsonp("https://api.douban.com/v2/movie/in_theaters",function(res){
　　　　//res 为请求来的数据 
　　　　//根据业务操作res  
})

码农公寓

1.实现原理

2.代码实现

3.封装成函数

相关文章