自己手动实现一个简单的jsonp

一、jsonp的原理

jsonp是为了解决跨域,实现原理简单来说就一句话:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这种方式其实与ajax XmlHttpRequest协议就无关了。

 

具体实现方式如下:


const jsonp = (function () {
    let seq = 0;
    return function ({url, params = {}, callbackKey, callback = function () {}, timeout = 5000}) {
        const jsonpCallback = `__jsonp${seq++}__`;

        params[callbackKey] = jsonpCallback;
        window[jsonpCallback] = callback;

        const paramsKey = Object.keys(params);
        const paramString = paramsKey.map(key => `${key}=${params[key]}`).join('&');
        const script = document.createElement('script');
        url += (/\?/.test( url ) ? "&" : "?") + paramString;
        script.setAttribute('src', url);
        script.onload = function () {
            delete window[jsonpCallback];
            document.body.removeChild(script);
        };
        document.body.appendChild(script);
        
        // 超时处理
        setTimeout(function () {
            window[jsonpCallback](null);
            delete window[jsonpCallback];
            document.body.removeChild(script);
        }, timeout);
    }
})();

 

调用方式:

jsonp({  
    url: 'aaaa.com',
    params: {
        key: 'test',
    },
    callbackKey: 'callback',
    callback: function (result) {
        console.log(result)
    }
});

 

二、jsonp的优缺点

优点:

  1. 能很好的解决跨域
  2. 兼容性好
  3. 通过调用callback的方式回传结果,将回调方法的权限给了调用方。

 

缺点:

  1. jsonp只能用于获取资源,类似于GET请求
  2. jsonp的错误处理机制并不完善,我们没办法进行错误处理
  3. jsonp并不是跨域规范,它存在很明显的安全问题:callback参数注入和资源访问授权设置。
  4. jsonp在调用失败的时候不会返回各种HTTP状态码。

 

 

 

 

发表评论