ajax:XMLHttpRequest() 不能跨域
1、document.donain='a.com';
2、服务器代理:XMLHttpRequest代理文件
3、script 标签:jsonp
利用script标签不存在跨域问题
jsonp原理:json+padding(表示内填充)
function box(json){
alert(json.name);
}
box({name:"lynn"})
<script src='XXX.php?key=value&key2=value2'></script>
4、location.hash 通过改变哈希值来实现两个域之间的交互
跨域:发送一个请求,去去页面中的数据,可以通过iframe。在A网站上嵌套B网站的iframe
A站:
<iframe src="XXX.php#key1=value&key2=value2"></iframe>
在网址中加哈希值,是不会改变网址的指向的,通过哈希值能将网址带过去。那边接收数据,处理并返回数据。
B站:parent.location.hash = self.location.hash (但是ie和谷歌不支持)
5、window.name
www.a.com/c1.html
www.a.com/代理.html
www.b.com/c2.html window.name='数据';
c1和c2共用代理.html
在c2网站下创建一个c1的代理文件
跟利用hash是差不多的,都是在自己当前的域下创建一个代理的文件,然后通过代理跟当前页面下是同一个域的原则,提交过去
6、flash
7、html5提供了postMessage
跨域,分为跨主域和跨子域。
跨主域: a.lynn.com/ 和 b.lin.com/ lynn.com/ 和 lin.com/
跨子域: a.lynn.com/ 和 b.lynn.com/ lynn.com 和 b.lynn.com www.lynn.com/ 和 b.lynn.com/ www.a.com/a.js 和 script.a.com/b.js
同一域名,不同端口
同一域名,不同协议
一、收集了网上的跨域请求方法,自己整理和测试了下。
1.<script type='text/javascript'> document.domain='根域名';(只能解决主域相同的二级子域之间的交互)
document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。如果你异想天开的把script.a.com的domian设为baidu.com那显然是会报错地!
www.a.com上的a.html
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; /*contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。
*/ // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };
script.a.com上的b.html
document.domain = 'a.com';
2、原生JavaScript实现
正常情况下的写法:(图为出现的问题:同源策略导致无法请求数据)
解决办法:
(1)通过script标签引用,写死你需要的src的url地址
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script>
var callbackfunction = function(data) {
console.log('我是跨域请求来的数据-->' + data.name);
};
</script>
<script src="http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction"></script>
</body>
</html>
其中,test.js中需要写成这样:
callbackfunction({"name":"wwwwwwwwwwww"});
(2)动态加入script标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script>
var callbackfunction = function(data) {
console.log('我是跨域请求来的数据-->' + data.name);
};
var script = document.createElement('script'),
body = document.getElementsByTagName('body');
script.src = 'http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js?callback=callbackfunction';
body[0].appendChild(script);
</script>
</body>
</html>
3、$.ajax使用jsonp解决
jsonp:用于解决主流浏览器的跨域数据访问的问题
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script>
$(function(){
$.ajax({
async: false,
type: "GET",
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'callbackfunction',
url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
data: "",
timeout: 3000,
contentType: "application/json;utf-8",
success: function(msg) {
console.log(msg);
}
});
})
</script>
</body>
</html>