码迷,mamicode.com
首页 > Web开发 > 详细

关于jsonp跨域的 实现

时间:2018-07-21 18:52:13      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:com   bsp   假设   ons   name   实现原理   数据   now()   back   

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
})

 

关于jsonp跨域的 实现

标签:com   bsp   假设   ons   name   实现原理   数据   now()   back   

原文地址:https://www.cnblogs.com/var-chu/p/9347576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!