JSONP技术原理及实现

跨域问题一直是前端中常见的问题，每当说到跨域，第一浮现的技术必然就是JSONP

JSONP在我的理解，它并不是ajax，它是在文档中插入一个script标签，创建_callback方法，通过服务器配合执行_callback方法，并传入一些参数

JSONP的局限就在于，因为是通过插入script标签，所以参数只能通过url传入，因此只能满足get请求，特别jQuery的ajax方法时，即使设置type: 'POST'，但是只要设置了dataType: 'jsonp'，在请求时，都会自动使用GET请求

实现逻辑

step1: 创建_callback方法 (_callback中可以删除script标签和_callback方法)

step2: 插入script标签

step3: 服务器输出js

实现:

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!');

    }

});

对于浏览器的行为就是插入script标签，执行js代码，删除script标签

实现代码并没有考虑兼容以及传入data后生成url的问题

巴特西

JSONP技术原理及实现

最新文章

热门文章