基于原生JS的jsonp方法的实现

Posted 2020-09-16 a正东

基于原生JS的jsonp方法的实现

jsonp，相信大家并不陌生，是在js异步请求中解决跨域的方法之一，原理很简单，有不清楚的同学可以google下，这里就补详细解释了。在Jquery库中，jQuery直接封装有jsonp的方法，很简便，只需在ajax请求的参数中加入datatype:jsonp,jsonp:jsonpcallback即可，这里写下用原生js实现jsonp的源码。

load= function (url, cfg, success) {
    var op = Object.prototype.toString;
    var head = doc.getElementsByTagName(‘head‘)[0] || doc.head || doc.documentElement;
    if (op.call(cfg) === ‘[object Function]‘) {
        success = cfg;
        cfg = {};
    }
    var type = cfg.type || ‘script‘,
        jsonpCallback = cfg.jsonpCallback || ‘fn‘;
    jsonp = type == ‘jsonp‘ ? (cfg.callbackName || ‘callback‘) : ‘‘, data = cfg.data || ‘‘, dataToParam = function (data) {
        var ret = [],
            key, e = encodeURIComponent;
        for (key in data) {
            ret.push(key + ‘=‘ + e(data[key]))
        }
        return ret.join(‘&‘);
    }, url = url + (/\?/.test(url) ? ‘&‘ : (jsonp || data) ? ‘?‘ : ‘‘) + (jsonp ? (jsonp + ‘=‘ + jsonpCallback) : ‘‘) + (data ? ‘&‘ + dataToParam(data) : ‘‘);
    loadScript = function (url, callback) {
        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.charset = "utf-8";
        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (/loaded|complete/i.test(script.readyState)) {
                    script.onreadystatechange = null;
                    callback && callback.call(this);
                }
            };
        } else { //Others
            script.onload = function () {
                callback && callback.call(this);
            };
        }
        script.src = url;
        head.insertBefore(script, head.firstChild);
    }, removeScript = function () {
        var arg = arguments,
            script = arg[0],
            jsonpCallback = arg[1],
            type = Object.prototype.toString;
        //移除脚本
        if (script && /script/i.test(script.tagName)) {
            script.parentNode.removeChild(script);
        }
        //移除回调
        if (jsonpCallback && type.call(jsonpCallback) === ‘[object String]‘) {
            window[jsonpCallback] = null;
        }
        success();
    };
    var callback = window[jsonpCallback] = success;
    loadScript(url, function () {
        removeScript(this, jsonpCallback);
    });
}

调用方法：load(url,{"type":"script":"data":{}},calback);,原理和方法都很简单，但是jsonp方法只适合于GET方法儿不适合POST方法，这个还是需要注意的。

 

收藏了

http://lidongbest5.com/blog/20/