javascript跨域之jsonp

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

今天我们来谈谈javascript的跨域问题,我们都知道http有同源策略,既域名,协议,端口相同。所以非同源请求是无法请求到数据的。那么javascript都有什么跨域方式呢?列举一下:jsonp、document.domain、window.name、window.postMessage,今天来说一下jsonp跨域原理!

正文

首先我们先说一下jsonp和ajax还有json都是没有关系的,JSON(JavaScript Object Notation)和JSONP(JSON with Padding),json只是一种数据格式,而ajax是通过创建XMLHttpRequest对象来发送请求的。

封装jsonp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function jsonp(json){
//判断都有没有东西,做处理
json = json||{};
//如果没有url就阻止
if(!json.url)return;
//callback的名字
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]));
}

//回调函数
window[json.data[json.cbName]] = function (result){
//执行用户要执行的函数
json.success&&json.success(result);
//删除script
oH.removeChild(oS);
//把没用的函数干掉
window[json.data[json.cbName]]=null;
}
var str = arr.join('&');
//开始创建script
var oS = document.createElement('script');
oS.src=json.url+'?'+str;
var oH = document.getElementsByTagName('head')[0];
oH.appendChild(oS);
}

上面这段是我已经封装好的一段jsonp代码,参数是个对象,前面可以看到就是添加需要的url,建立回调名字,重点在创建script标签这,XMLHttpRequest受同源策略的限制,但是script标签却不受同源策略的限制,这时需要跨域就创建个script标签地址指向第三方的API,如:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su, 并提供一个回调函数来接收数据或者通过地址参数传递。

创建实例

下面来让我们应用一下,分别创建js代码与html代码传入url与关键词:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload=function(){
var oTxt = document.getElementById('txt');
var oUl = document.getElementById('list');
oTxt.onkeyup=function(){
jsonp({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{
wd:this.value
},
success:function(json){
oUl.innerHTML='';
var arr = json.s;
for(var i=0;i<arr.length;i++){
var oLi = document.createElement('li');
oLi.innerHTML=arr[i];
oUl.appendChild(oLi);
}
}
});
};
};
1
2
3
<input type="text" id="txt" />

<ul id="list"></ul>

总结

jsonp跨域原理:根据script标签不受同源策略限制来进行跨域,简单粗暴。
json的优点就是不受同源策略的限制,而且兼容性很好,低版本的浏览器也同样支持。
json的缺点是只支持get请求,不支持post请求。