JavaScript中的跨域方式有两种
window.name的基本原理
A网站通过JS访问B网站的数据，首先在A网站中创建一个页面, 原理就是将数据，通过iframe的url来获取服务器数据，并监听页面的onload事件，获取window.name的值，传给回调函数，实现跨域， 页面A调用代码如下：
<head>
<title>跨域获取数据</title>
<script type ="text/javascript">
function domainData(url, fn){
var isFirst = true;
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
var loadfn = function(){
if(isFirst){
iframe.contentWindow.location = 'http://a.com/null.html](http://a.com/null.html';
isFirst = false;
} else {
fn(iframe.contentWindow.name);
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
iframe.src = '';
iframe = null;
};
};
iframe.src = url;
if(iframe.attachEvent){
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
}
</script>
</head>
</body>
<script type ="text/javascript">
domainData('http://b.com/data.html', function(data){
alert(data);
});
B网站中放一个存储数据的页面，代码如下：
<script>
window.name = '需要跨域传递的数据';
</script>
jsonp的基本原理
由于浏览器当问js文件是可以跨域的，所以服务器请求的响应类型为"application/javascript",让浏览器认为该请求是一个js请求，客户端传入jsonpCallback，从而实现跨域，服务器响应之后调用userinfo_jsonpCallback这个方法时，就可以拿到数据：{'name':'weixin','age':8}，jquery封装之后，请求响应完毕直接回调success方法， 服务器端的响应如下：
userinfo_jsonpCallback({'name':'weixin','age':8});
$.ajax({
type: "get",
url: "http://cache.zhushou001.com/api/v1/user.jsonp",
data: userData,
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "userinfo_jsonpCallback",
success: function (data) {
},
error: function (data) {
console && console.log('获取用户信息失败');
}
});
网友评论