原生javascript实现jsonp的封装

Posted 2020-08-27

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。 这种跨域的通讯方式称为JSONP。

我们可以动态的去创建一个script标签，利用他的src属性没有跨域的限制来实现的，相当于我们引入一个js文件

附上源码：

jsonp: function (json){
　　json = json || {};
　　if(!json.url)return;
　　json.cbName = json.cbName||‘cb‘;
　　json.data = json.data||{};

　　json.data[json.cbName] = ‘show‘+Math.random();
　　json.data[json.cbName] = json.data[json.cbName].replace(‘.‘,‘‘);

　　var arr = [];
　　for(var i in json.data){
　　　　arr.push(i+‘=‘+encodeURIComponent(json.data[i]));
　　}
　　var str = arr.join(‘&‘);

　　window[json.data[json.cbName]]=function(result){
　　　　json.success&&json.success(result);
　　　　oH.removeChild(oS);
　　　　window[json.data[json.cbName]]=null;
　　};
　　var oH = document.getElementsByTagName(‘head‘)[0];
　　var oS = document.createElement(‘script‘);
　　oS.src=json.url+‘?‘+str;
　　oH.appendChild(oS);
　　oS.onerror = function(){
　　　　window[json.data[json.cbName]]=null;
　　　　oH.removeChild(oS);
　　　　json.error&&json.error();
　　}
}

具体用法：

jsonp({
　　url: ‘----‘,
　　success: function (json) {

　　.................
　　},
　　error: function(){
　　..................
　　}
});

一定要注意如果我们后端返回的是json对象的话，是无法跨域返给我们的，我们的请求的时候给后端传了一个用于回调function(){}，后端必须把要返回的json对象放到这个function(){}里面，然后把这个方法返回给我们，我们才可以解析适用