只要協議、域名、端口有任何一個不同，都被當作是不同的域。
也就是“http://www.baidu.com”這個URL首部，必須完全一樣才能互相通信。
這個也叫同源策略，當前域名的js只能讀取/修改同域下的窗口屬性
為什么要有同源策略？為了防止CSRF攻擊，保證來至不同源的對象不會互相干擾。
一、通過jsonp跨域（實際上是動態創建script標簽）
原理：不同的域可以傳輸JS文件
服務器的data.php：
<?php
$callback=$_GET['callback'];//得到的回調函數名
$data=array('a','b','c');//需要返回的數據
echo $callback.'('.json_encode($data).')';//輸出
?>
本地的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function dosomething(jsondata){
console.log(jsondata)
}
</script>
<script src='http://www.a.com/data.php?callback=dosomething'></script>
</body>
</html>
或者用jquery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<script>
$.getJSON("http://www.a.com/data.php?callback=?", function(jsondata) {
console.log(jsondata);
});
</script>
</body>
</html>
結果：
JSONP的優點是：1.它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；
2.它的兼容性更好，在更加古老的瀏覽器中都 可以運行，不需要XMLHttpRequest或ActiveX的支持；
3.在請求完畢后可以通過調用callback的方式回傳結果。
JSONP的缺點是：1.它只支持GET請求而不支持POST等其它類型的HTTP請求；
2.它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JS調用的問題。
3.jsonp在調用失敗的時候不會返回各種HTTP狀態碼。
4.安全性欠缺。
2、通過document.domain+ iframe (只有在主域相同的時候才能使用該方法)
兩個不同域的a.html和b.html
在www.a.com/a.html中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a跨域</title>
</head>
<body>
<script>
function onLoad(){
var iframe=document.getElementById('iframe');
var win=iframe.contentWindow;//能讀取iframe里的window對象
var doc=win.document;//無法讀取，報錯
var name=win.name;//無法讀取，報錯
}
</script>
<iframe id="iframe" src="http://www.a.com/b.html" onload="onLoad()"></iframe>
</body>
</html>
在www.script.a.com/b.html中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b跨域</title>
</head>
<body>
<div>內容</div>
</body>
</html>
解決辦法：在兩個頁面都插入document.domain，這樣就能訪問iframe里window對象的各種屬性。
<script>
document.domain='a.com';//設置成主域
</script>
3、使用window.name來進行跨域
原理：在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限
同一目錄下的a.html和b.html
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a跨域</title>
</head>
<body>
<script>
window.name='頁面a設置的值';
setTimeout(function(){
window.location='b.html'
},3000);
</script>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b頁面</title>
</head>
<body>
<script>
alert(window.name);
</script>
</body>
</html>
a.html頁面載入后3秒，跳轉到了b.html頁面，彈出“頁面a設置的值”
跨域：在b.html里設置window.name，a.html就能訪問這個值了（。。。我未成功）
4、使用HTML5的window.postMessage方法來跨域傳送數據
不同域的a.html和b.html
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a跨域</title>
</head>
<body>
<script>
function onLoad(){
var iframe=document.getElementById('iframe');
var win=iframe.contentWindow;
win.postMessage('來自a頁面的信息','*');//第二個參數為想訪問的域，*為通配
}
</script>
<iframe id="iframe" src="http://www.a.com/b.html" onload="onLoad()"></iframe>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b跨域</title>
</head>
<body>
<script>
window.onmessage=function(e){
e=e||event;
alert(e.data);
}
</script>
</body>
</html>
5.利用flash
6.利用iframe和location.hash
7.利用CORS
CORS是自定義HTTP頭部，使瀏覽器和服務器對比，從而決定請求和響應是否應該進行
IE8使用XDR對象實現CORS，和XHR類似用法
var xdr=new XDomainRequest();
xdr.onload=function(){
alert(xdr.responseText)
};
xdr.open('get',"http://www.a.com/");
xdr.send(null)
現代瀏覽器使用普通的XMLHttpRequest對象請求就行。
8.圖像Ping
var img=newImage();
img.onload=img.onerror=function(){
alert('1');
};
img.src="http://www.a.com/test?name=aaa";
缺點：1.只能GET 2.無法訪問服務器的響應文本
前面這幾種方法，大部分都需要前后兩端支持。如果單純的前端實現跨域，可以使用代理。
1.https://github.com/hongrunhui/node-proxy（未測試過）
2.eezz.com (代理網站請求返回的數據有時候沒刷新，可能是請求頻率/次數受限制了？所以還是有點小問題)
var requestUrl = "http://www.weather.com.cn/adat/sk/101110101.html";
//這里一定要注意，實際請求的url其實是以參數形式從eezzo.com讀取的，因此我們都要對url進行編碼，使用encodeURI方法即可
$.getJSON("http://eezzo.com/API/CD", { url: encodeURI(requestUrl) }, function(json) {
console.log
(json);
});
3.雅虎代理，同上
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script>
var requestURL="http://www.weather.com.cn/adat/sk/101110101.html";
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: "select * from json where url=\""+requestURL+"\"", //請注意划線和兩個引號
format: "json"
}, function(data) {
if (data.query.results) {
console.log(data.query.results.json);
} else {
console.log('no such code: ' + code);
}
});
</script>
4.原生代碼實現jsonp跨域讀取(動態創建script)
var jsonp = function (url, callback) {
if (typeof url === 'undefined') {
throw 'the 1st param "url" missing';
}
if (typeof callback === 'undefined') {
throw 'the 2nd param "callback" missing';
}
var jsonpcallback = 'callback' + new Date().valueOf();
if (typeof callback !== 'string') {
window[jsonpcallback] = callback;
callback = jsonpcallback;
} else {
window[jsonpcallback] = function (data) {
eval(callback).call(window, data);
}
}
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsonpcallback);
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
};
jsonp('https://api.douban.com/v2/movie/top250', function (data) {
console.log(data);
});
簡化版：
var jsonp = (url, callback) => {
var jsonpcallback = 'callback' + new Date().valueOf(); //隨便寫個字符串
window[jsonpcallback] = callback; //再把傳進來的callback暴露到全局，命名為上面的字符串
var script = document.createElement('script'); //創建標簽
script.setAttribute('src', url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsonpcallback);
document.getElementsByTagName('head')[0].appendChild(script); //標簽插入頭部
};
5.設置dataType為jsonp
$.ajax({
url: "https://api.douban.com/v2/movie/top250",
dataType: 'jsonp',
success: function (data) {
console.log(data);
}
});
