這一篇文章呢，主要是之前一直聽別人講json跨域跨域，但是還是一頭霧水，只知其一，於是一怒之下，翻閱各種資料，如果有不正確的地方，勞煩指正一下^_^
首先，先了解瀏覽器有一個很重要安全性限制，即為同源策略：不同域的客戶端腳本在無明確授權的情況下不能讀些對方資源。跨域也就是不同源~
舉個例子:
只要協議，端口，域名有一個不同，即為跨域！
然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候“同源策略”就顯得過於苛刻。
解決方法：
1.使用jsonp解決跨域 ：（僅適用於GET請求）
實現原理：<script> 標簽是不受同源策略的限制的，它可以載入任意地方的 JavaScript 文件，而並不要求同源。
所以 JSONP 的理念就是，我和服務端約定好一個函數名，當我請求文件的時候，服務端返回一段 JavaScript。這段 JavaScript 調用了我們約定好的函數，並且將數據當做參數傳入。非常巧合的一點（其實並不是），JSON 的數據格式和 JavaScript 語言里對象的格式正好相同。所以在我們約定的函數里面可以直接使用這個對象。
使用JavaScript代碼解決
1 var eleScript = document.createElement("script"); 2 eleScript.type = "text/javascript"; 3 eleScript.src = "http://example2.com/getinfo.php"; 4 document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
使用jquery解決
1 $.ajax({ 2 url: http://跨域的dns/document!searchJSONResult.action,
3 type: "GET", 4 dataType: 'jsonp', //主要是這里和原來的json改變了！
5 jsonp: 'jsoncallback', 6 })
2.使用HTML5的window.postMessage方法來跨域傳送數據 （只兼容IE8+、FireFox、Chrome、Opera等瀏覽器）
1 window.postMessage(message,targetOrigin)
- windowObj : 接受消息的 Window 對象。
- message : 在最新的瀏覽器中可以是對象。
- targetOrigin : 目標的源，
*表示任意。
可以使用它來向其它的window對象發送消息，功能非常強大，無視域名無視端口……無論這個window對象是屬於同源或不同源。
例子：
1 var windowObj = window; // 可以是其他的 Window 對象的引用 2 var data = null; 3 4 addEventListener('message', function(e){ 5 if(e.origin == 'http://jasonkid.github.io/fezone') { 6 data = e.data; 7 8 e.source.postMessage('Got it!', '*'); 9 } 10 });
message 事件就是用來接收 postMessage 發送過來的請求的。函數參數的屬性有以下幾個：
- origin : 發送消息的 window 的源。
- data : 數據。
- source : 發送消息的 Window 對象。
這個方法非常強大，無視協議，端口，域名的不同。下面是烤熟的栗子：
|
1
2
3
4
5
6
7
8
9
10
|
var
windowObj
=
window
;
// 可以是其他的 Window 對象的引用
var
data
=
null
;
addEventListener
(
'message'
,
function
(
e
)
{
if
(
e
.
origin
==
'http://jasonkid.github.io/fezone'
)
{
data
=
e
.
data
;
e
.
source
.
postMessage
(
'Got it!'
,
'*'
)
;
}
}
)
;
|
message 事件就是用來接收 postMessage 發送過來的請求的。函數參數的屬性有以下幾個：
- origin : 發送消息的 window 的源。
- data : 數據。
- source : 發送消息的 Window 對象。