JSONP原理及简单实现

JSONP是实现跨域通信的解决方案

比如

<script src = "http://jsonp.js?callback=xxx"></script>

callback定义一个函数名称，而远程服务端通过调用指定的函数并传入参数来实现传递参数

var JSONP = {

        // 获取当前时间错

        now: function(){

                return (new Date()).getTime();},

        // 获取16位随机数

        rand: function(){

                return Math.random().toString().substr(2)},

        // 删除节点元素

        removeElem: function(elem){

                var parent = elem.parentNode;

                if(parent && parent.nodeType !== 11){

                        parent.removeChild(elem);}},

        // url 组装

        parseData: function(data){

                var ret = "";

                if( typeof data === "string" ){

                        ret = data;}else if( typeof data === "object"){

                        for(var key in data){

                                ret += "&" + key + "=" +encodeURLComponent(data[key])

                }}

                // 加个时间错，防止缓存

                ret += "&_time=" + this.now();

                ret +=ret.substr(1);

                return ret;},

            getJSON: function(url, data, func){

                            var name; //函数名称

                            url = url + (url.indexOf("?") === -1? "?":"&" ) + this.paresData(data)

                            // 检查callback的函数名称是否已经定义

                            var  match= /callback=(\w+)/.exec(url)

                            if(match && match[1]){ 

                                      name = match[1]}else{

                                                // 如果未定义函数名的话，随机生成一个函数名

                                                //随机生成的函数名通过时间错拼成16位随机数的方式，重名的概率基本为0

                                                //  如： jsonp_1355750852040_8260732076596469

                                                 name = "jsonp_" + this.now() + "_" + this.rand();

                                                //把callback中的？ 替换成函数名

                                                url = url.replace("callback=?","callback="+name)

                                                // 处理？被encode的情况

                                                 url= url.replace('callback=%3F', "callback="+name)}

                               // 创建一个script元素

                                var script = document.createElement('script');

                                script.type = "text/javascript"

                                script.src = url;

                                script.id = "id_" +name //设置id,为了后面可以删除这个元素

                                 // 把传进来的函数重新组装，并把它设置为全局函数，远程就是调用这个函数

                                 window[name] = function(json){

                                                            window[name] = undefined; // 执行这个函数后，要销毁这个函数

                                                             var elem = document.getElementById("id_" + name); // 获取这个script的元素                                                                                                  JSONP.removeElem(elem); // // 删除head里面插入的script，这三步都是为了不影响污染整个DOM                                                                  func(json); // 执行传入的函数}

                               // 在head里面插入script元素

                               var head = document.getElementsByTagName("head");

                                if(head && head[0]) {

                                            head[0].appendChild(script); }}}

调用

var data = { from: "北京", count: 27, output: "json", callback: "?" }

JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});

---

原文链接： https://www.cnblogs.com/naokr/p/6603936.html