JSONP

正常的Ajax请求是会受到同源策略的限制，当然在现代浏览器上可以通过CORS来打破Ajax只能同源使用的限制。下面介绍的是另外一种方式JSONP

其实原理很容易理解：

1、动态创建一个script标签（因为脚本是可以跨域请求的）

2、请求的url上至少要包含一个请求参数用来告诉后台本地回调函数的名称，例如  /api/getRoom?id=123&callback=handler，后台通过读取callback字段的值就知道客户端的回调函数叫什么名字。当然这个字段的名称只是跟后台的一个约定而已，不一定非要取callback

3、后台返回的时候遵循下面的格式，例如handler({roomName: '101', id: '123'})，因为我们是通过创建script发起请求，对于浏览器来说，接受的数据其实就是一段js代码。

说完原理就说说JSONP存在的一些缺点

1、只能发送get请求

2、无法精确的知道请求是否成功，script上有一个onerror事件，但是浏览器的支持程度不高，因此一般都会设置一个定时器，如果超过限定时间都没有响应，则认为请求失败。

 

下面是自己写的一个jsonp.js，用法很简单，有兴趣可以参考下。因为是用es6写的，因此需要用babel编译一下。

下载地址：https://github.com/vivialex/jsonp

/**
 * Created by rd_haiying_zheng on 2017/11/21.
 *
 * options {
 *  url: '',
    data: {},
    callbackName: 'callback',
    timeout: 60, //超时设置，超过限定时间则认为请求失败
    onSuccess: null,
    onError: null,
    onComplete: null
 * }
 *
 */
function type (obj) {
    let type = {
        '[object Array]': 'array',
        '[object Boolean]': 'boolean',
        '[object Date]': 'date',
        '[object Function]': 'function',
        '[object Number]': 'number',
        '[object Object]': 'object',
        '[object RegExp]': 'regexp',
        '[object String]': 'string'
    };

    if(obj === null){
        return obj + '';
    }
    return typeof obj === 'object' || typeof obj === 'function' ? type[Object.prototype.toString.call(obj)] || 'object' : typeof  obj;
}
function isWindow(obj) {
    return obj !== null && obj === obj.window
}
function isPlainObject (obj) {
    return type(obj) === 'object' && !isWindow(obj) && Object.getPrototypeOf(obj) === Object.prototype
}

let extend = (function(){
    function extend(target, source, deep) {
        for (let key in source)
            if (source.hasOwnProperty(key)) {
                if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
                    if (isPlainObject(source[key]) && !isPlainObject(target[key]))
                        target[key] = {};
                    if (isArray(source[key]) && !isArray(target[key]))
                        target[key] = [];
                    extend(target[key], source[key], deep)
                }
                else if (source[key] !== undefined) target[key] = source[key]
            }
    }
    return function(target){
        let deep, args = Array.prototype.slice.call(arguments, 1);
        if (typeof target === 'boolean') {
            deep = target;
            target = args.shift()
        }
        args.forEach(function(arg){ extend(target, arg, deep) });
        return target
    }
})();

class Jsonp {
    constructor(opts) {
        if (!isPlainObject(opts)) {
            throw new TypeError('The type of opts must be plainObject')
        }

        let defaultOps = {
            url: '',
            data: {},
            callbackName: 'callback',
            timeout: 60,
            onSuccess: null,
            onError: null,
            onComplete: null
        };

        !opts.data && (opts.data = {});
        if (!isPlainObject(opts.data)) {
            throw new TypeError('The type of opts.data must be plainObject')
        }

        if (!opts.url) {
            throw new TypeError('The url is required')
        }

        if (typeof opts.timeout !== 'number' || parseInt(Math.abs(opts.timeout)) <= 0) {
            opts.timeout = 60;
        }

        if (typeof opts.callbackName !== 'string') {
            this.callbackName = 'callback';
        }

        this._$body = document.body || document.getElementsByTagName('body')[0];
        this._opts = extend(defaultOps, opts);
        this._execute = false;

        this._init();
    }
    _init() {
        this._setParams();

        let $script = document.createElement('script');
        $script.setAttribute('type', 'text/javascript');

        let cbName = 'jsonp_' + new Date().getTime(),
            timer,
            params = [],
            data = this._opts.data;

        for(let i in data) {
            if (data.hasOwnProperty(i)) {
                params.push(i + '=' + data[i]);
            }
        }

        params.push(this._opts.callbackName + '=' + cbName);
        params = params.join('&');

        let complete = () => {
                typeof this._opts.onComplete === 'function' && this._opts.onComplete();
                this._$body.removeChild($script);
                $script.onerror = null;
                timer && clearTimeout(timer);
                window[cbName] = null;
                this._execute = true;
            },
            error = () => {
                if (this._execute) {
                    return;
                }

                typeof this._opts.onError === 'function' && this._opts.onError();
                complete();
            };

        window[cbName] = (data) => {
            if (this._execute) {
                return;
            }

            try {
                data = JSON.parse(data);
            } catch (e) {

            }

            typeof this._opts.onSuccess === 'function' && this._opts.onSuccess(data);
            complete();
        };

        //浏览器不一定支持script的onerror事件，因此增加一个定时器，超过限定时间则默认请求失败
        $script.onerror = error;
        timer = setTimeout(error, this._opts.timeout * 1000);

        $script.src = this._opts.url + '?' + params;
        this._$body.appendChild($script);
    }
    _setParams() {
        let url = this._opts.url,
            obj = {};

        if (url.indexOf('?') !== -1) {
            let arr = url.split('?'),
                params = arr[1].split('&');

            this._opts.url = arr[0];

            params.forEach(item => {
                item = item.split('=');
                obj[item[0]] = item[1];
            });

            this._opts.data = extend({}, obj, this._opts.data);
        }
    }
}

export default function (opts) {
    return new Jsonp(opts);
}