jsonp

Posted 2020-12-23 油画家的第一站

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不能互换，不能互相替代，各有各的使用场景