ASONP（解决跨域访问）

一，ASONP概念？

1，ASONP是什么？

　　JSONP是一种跨域数据交互协议，它只支持get请求； JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是数据格式，JSONP是协议。

 

2，为什么需要ASONP？

　　a，一句话，需要解决跨域数据访问的问题；

　　b，至于跨域（CORS）是什么，简单理解为：两个不同网络之间的访问；

　　c，网络之间的不同包括（ (协议)protocol、port(端口,如果有指定的话)和 host(主机/域名)），还有当进行文件协议传输时，文件类型不一样也会引发跨域

 

3，如何实现ASONP？

　　a，简单来说就是利用一个bug，关于js的标签<script></script>的灵活使用，利用script不受跨域的影响；

　　b，使用 <script src='url'></script>来引入需要访问的地址，对它返回的js文件进行操作；

 

 

 

二，ASONP具体实现过程

1，实现流程

　　a，封装回调函数

　　b，把回调函数添加到window，作为它的方法；

　　c，使用 <script src='url'></script>引入目标地址；

 

2，JSONP的封装

function jsonp({
    url,  //链接地址
    callback,   //回调函数的参数名
    fn,     //回调函数
    param,      //参数
}){
    //创建函数名，要随机但必须要以字母开头
    let fnName = 'fn' + Date.now() + parseInt(Math.random()*1000);
    
    //将函数名和函数设置为window的方法
    window[fnName] = fn;
    //首先创建script标签
    let js = document.createElement('script');
    //将回调函数名和回调函数加到url里
    url +=`?${callback}=${fnName}`
    //设置参数，加入到地址里
    let paramValue = ''
    for(let key in param){
        paramValue += `&${key}=${param[key]}`
    }
    url += paramValue
    //最后设置参数加入到script中
    js.src = url
    document.body.appendChild(js)

    //优化，加载完成后删除
    js.onload = function(){
        js.remove()
        delete window[fnName]
    }
}