JSONP技术原理及实现

var requestJsonp = function (opt) {
    var funName, script;

    /*
     * step1 创建_callback方法
     */ 

    //_callback函数名
    funName = ‘_cb‘ + (Math.random() * 1000000);
    //创建_callback方法
    window[funName] = function (data) {
        if (typeof opt.success == ‘function‘) {
            opt.success(data);
        }

        
        window[funName] = null;
        delete window[funName];

        document.body.removeChild(script);
        script = null;
    };

    /*
     * step2 插入script标签
     */
    script = document.createElement(‘script‘);
    script.type = ‘text/javascript‘;
    script.src = opt.url + (opt.url.indexOf(‘?‘) > -1 ? ‘&‘ : ‘?‘) + ‘_callback=‘ + funName;
    document.body.appendChild(script);

    /*
     * step3 服务器输出js
     * 服务器应接受url参数中_callback的值,作为函数名执行输出js
     * 类似输出
     * _callback({"name":"jsonp","description":"jsonp test"});
     */ 

    /*
     * 处理error
     */
    script.addEventListener(‘error‘, function () {
        window[funName] = null;
        delete window[funName];

        if (typeof opt.error == ‘function‘) {
            opt.error();
        }

        document.body.removeChild(script);
        script = null;
    });
};

requestJsonp({
    url: ‘http://www.url.org?tid=Jsx2‘,
    success: function (data) {
        console.log(data);
    },
    error: function () {
        console.log(‘request error!‘);
    }
});