关于jsonp跨域的 实现
发布时间:2020-12-16 18:44:17 所属栏目:百科 来源:网络整理
导读:1.实现原理? ? 1.把接口写在 script标签的src 中 这个接口就可以访问(不会存在跨域问题? 因为接口在浏览器地址栏是可以访问的? 会返回json字符串); 2.直接写不可以? 因为正常情况下 scr请求来的是可执行的js代码? ? 此时返回的是json对象? 所以程序报错; 3.s
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中,触发请求 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 }) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |