JSONP 的简单封装

@zhirui1994 2019-01-06 12:46:51发表于 zhirui1994/zhirui1994.github.io JavaScript

同源策略

javascript由于实现之初,考虑到网络的安全问题,限制数据的请求需遵循同源策略.在协议,域名,端口号相同的情况下才能进行数据交互.
但是,有时候,我们需要调用别人服务器上的数据,而别人也愿意时怎么办呢?

原理

html中link,iframe,script等元素的src属性是不受同源策略的音响可以进行跨域请求的.利用这一点,动态添加script标签,跟换src属性值,就可以请求到别人服务器上的资源了.

简单封装

// url请求的接口
// params 传递的参数
// fn 回调函数

function jsonp(url, params, fn) {
    
    //给url加上hash值,防止同一个地址请求出现缓存
    var cbName = `jsonp_${ (Math.random() * Math.random()).toString().substr(2)}`;
    window[cbName] = function (data) {
        fn(data);
        // 获取数据后移除script标签
        window.document.body.removeChild(scriptElement);
    };
    
    // 组合最终的请求地址
    var querystring = '';
    for (var key in params) {
        querystring += `${key}=${params[key]}&`;
    }
    // 告诉服务器我的回调是什么
    querystring += `callback=${cbName}`;
    
    url = `${url}?${querystring}`;
    // 动态创建script标签并添加src值为url
    var scriptElement = window.document.createElement('script');
    scriptElement.src = url;
    window.document.body.appendChild(scriptElement);
}