json跨域原理及解決方法

這一篇文章呢，主要是以前一直聽別人講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 對象。

這個方法很是強大，無視協議，端口，域名的不一樣。下面是烤熟的栗子：

 

 

 

 

JavaScript

 

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