关于javascript:JSONP跨域实现

JSONP 的介绍

JSONP：利用在页面中创立 <script> 节点的办法向不同域提交 HTTP 申请的办法。

JSONP 跨域的基本原理：因为 script 标签不受浏览器同源策略的影响，容许跨域援用资源。因而，通过动态创建 script 标签，而后利用 src 属性进行跨域。

JSONP 的长处：不受同源策略的限度；兼容性好，在老的浏览器中能够运行；申请结束后能够通过调用 callback 的形式回传后果。

JSONP 的毛病：只反对 GET 这种 HTTP 申请；jsonp 在调用失败的时候不会返回各种 HTTP 状态码；安全性：callback 传入的参数是在后端进行了一次拼接，这即代表存在注入的可能，如果后端设计不当，是有可能呈现平安危险的。

JSONP 的封装

// jsonp 的封装
function jsonp(params) {
    // 创立 script 标签并退出到 head 中
    var callbackName = params.jsonp;
    var head = document.getElementsByTagName('head')[0];
    // 设置传递给后盾的回调参数名
    params.data['callback'] = callbackName;
    var data = formatParams(params.data);
    var script = document.createElement('script');
    // 发送申请
    script.src = params.url + '?' + data;
    // 创立 jsonp 回调函数
    window[callbackName] = function (res) {head.removeChild(script);
        clearTimeout(script.timer);
        window[callbackName] = null;
        params.success && params.success(res);
    };
    head.appendChild(script);
    // 为了得悉此次申请是否胜利，设置超时解决
    if (params.time) {script.timer = setTimeout(function () {window[callbackName] = null;
            head.removeChild(script);
            params.error && params.error({message: '超时'});
        }, 500);
    }
}

// 格式化参数
function formatParams(data) {var arr = [];
    for (var name in data) {arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
    };
    // 增加一个随机数，避免缓存
    arr.push('v=' + random());
    return arr.join('&');
}
        
// 获取随机数
function random() {return Math.floor(Math.random() * 10000 + 500);
}

JSONP 的调用

jsonp({
    url: url,
    jsonp: 'jsonpCallback',
    data: dataParams,
    success: function (res) {params.success && params.success();
    },
    error: function (error) {}})

参考文章：

• 面试经典之 Jsonp 跨域原理
• jsonp 跨域原理剖析