json跨域原理及解決方法

首先，先了解浏覽器有一個很重要安全性限制，即為同源政策：不同域的用戶端腳本在無明确授權的情況下不能讀些對方資源。跨域也就是不同源~

舉個例子:

隻要協定，端口，域名有一個不同，即為跨域！

然而，當進行一些比較深入的前端程式設計的時候，不可避免地需要進行跨域操作，這時候“同源政策”就顯得過于苛刻。

解決方法：

1.使用jsonp解決跨域 ：（僅适用于GET請求）

實作原理：

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 對象。

這個方法非常強大，無視協定，端口，域名的不同。下面是烤熟的栗子：

JavaScript      

varwindowObj=window;// 可以是其他的 Window 對象的引用

vardata=null;

addEventListener(‘message’,function(e){

if(e.origin=='http://jasonkid.github.io/fezone'){

    data=e.data;



    e.source.postMessage('Got it!','*');

}      

});

message 事件就是用來接收 postMessage 發送過來的請求的。函數參數的屬性有以下幾個：