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

jsonp

时间:2020-05-28 23:44:35      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:服务   script   全局变量   for   作用域   rip   nbsp   封装   end   

1.jsonp是利用script标签可以引入外部资源,并将引入的外部资源作为js代码解析的特性,获取跨域资源
    - 如果外部资源是php文件,那么php文件会自动被服务器解析,解析之后的返回的数据,会作为js执行

 

2. jsonp的封装: 
function jsonp(url,success,data){
    1.解析数据:
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`;
    }
    2.创建script:
    let script = document.createElement("script");
    3.设置地址:
    var d = new Date();
    script.src = url + "?" +str+ "__qft=" + d.getTime();
    4.插入页面:
    document.body.appendChild(script);
    5.利用window在局部作用域声明全局变量:
    window[data[data.columnName]] = function(res){
        success(res);
    }
}
    
3. ajax和jsonp的总结
    - ajax,适合同源请求,或后台明确允许请求的资源
    - jsonp,适合请求跨域资源,但要求,后台使用字符串拼接的形式,执行js中的函数
    - ajax和jsonp不能互换,不能互相替代,各有各的使用场景

jsonp

标签:服务   script   全局变量   for   作用域   rip   nbsp   封装   end   

原文地址:https://www.cnblogs.com/yh-3175339026/p/12984609.html

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