JSONP

Posted 2021-01-09 大黑ylx

JSONP主要是用来解决跨域问题，原理是动态插入script标签。ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务器不再返回JSON的脚本数据，而是返回一段调用某个函数的js代码，在src中进行调用，这样实现了跨域。JSONP的局限是：script.src 后台不配合得不到数据返回。

JSONP函数代码如下：

 1 function mycallback(data) {
 2     console.log(data);
 3 }
 4 function jsonp(url , data , callback) {
 5     if(typeof data == ‘string‘){
 6         callback = data;
 7         data = {};
 8     }
 9     var hasParams = url.indexOf(‘?‘);
10     url += (hasParams ? ‘&‘:‘?‘) + ‘callback=‘+callback;
11     var params ="";
12     for(var key in data){
13         params += ‘&‘+key+‘=‘+data[key];
14     }
15     url+=params;
16     var script = document.createElement(‘script‘);
17     script.setAttribute(‘src‘,url);
18     document.getElementsByTagName(‘body‘)[0].appendChild(script);
19 }
20 jsonp(‘http://baidu.com‘,{id:34},‘myCallback‘);