最終，輸出結果為：dosomething([‘a’,’b’,’c’]);

如果你的頁面使用jquery，那麼通過它封裝的方法就能很方便的來進行jsonp操作了。

<script type="text/javascript"> $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){ //處理獲得的json資料 }); </script>

12345

<script type="text/javascript">$.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){//處理獲得的json資料});</script>

jquery會自動生成一個全域性函式來替換callback=?中的問號，之後獲取到資料後又會自動銷燬，實際上就是起一個臨時代理函式的作用。$.getJSON方法會自動判斷是否跨域，不跨域的話，就呼叫普通的ajax方法；跨域的話，則會以非同步載入js檔案的形式來呼叫jsonp的回撥函式。

• JSONP的優缺點
  • JSONP的優點是：它不像XMLHttpRequest物件實現的Ajax請求那樣受到同源策略的限制；它的相容性更好，在更加古老的瀏覽器中都可以執行，不需要XMLHttpRequest或ActiveX的支援；並且在請求完畢後可以通過呼叫callback的方式回傳結果。
  • JSONP的缺點則是：它只支援GET請求而不支援POST等其它型別的HTTP請求；它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題。

6. 通過CORS跨域

CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與伺服器應該如何溝通。CORS背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與伺服器進行溝通，從而決定請求或響應是應該成功還是失敗。目前，所有瀏覽器都支援該功能，IE瀏覽器不能低於IE10。整個CORS通訊過程，都是瀏覽器自動完成，不需要使用者參與。對於開發者來說，CORS通訊與同源的AJAX通訊沒有差別，程式碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。

因此，實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通訊。

平時的ajax請求可能是這樣的:

<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("POST", "/damonare",true); xhr.send(); </script>

12345

<script type="text/javascript">varxhr=newXMLHttpRequest();xhr.open("POST","/damonare",true);xhr.send();</script>

以上damonare部分是相對路徑，如果我們要使用CORS，相關Ajax程式碼可能如下所示：

<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true); xhr.send(); </script>

12345

<script type="text/javascript">varxhr=newXMLHttpRequest();xhr.open("GET","http://segmentfault.com/u/trigkit4/",true);xhr.send();</script>

程式碼與之前的區別就在於相對路徑換成了其他域的絕對路徑，也就是你要跨域訪問的介面地址。

伺服器端對於CORS的支援，主要就是通過設定Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設定，就可以允許Ajax進行跨域的訪問。關於CORS更多瞭解可以看下阮一峰老師的這一篇文章：跨域資源共享 CORS 詳解

• CORS和JSONP對比
  • JSONP只能實現GET請求，而CORS支援所有型別的HTTP請求。
  • 使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得資料，比起JSONP有更好的錯誤處理。
  • JSONP主要被老的瀏覽器支援，它們往往不支援CORS，而絕大多數現代瀏覽器都已經支援了CORS）。

CORS與JSONP相比，無疑更為先進、方便和可靠。

7. 通過window.name跨域

window物件有個name屬性，該屬性有個特徵：即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的許可權，window.name是持久存在一個視窗載入過的所有頁面中的，並不會因新頁面的載入而進行重置。

比如：我們在任意一個頁面輸入

window.name = "My window's name"; setTimeout(function(){ window.location.href = "http://damonare.cn/"; },1000)

1234	window.name="My window's name";setTimeout(function(){window.location.href="http://damonare.cn/";},1000)

進入damonare.cn頁面後我們再檢測再檢測 window.name :

window.name; // My window's name

1	window.name;// My window's name

可以看到，如果在一個標籤裡面跳轉網頁的話，我們的 window.name 是不會改變的。
基於這個思想，我們可以在某個頁面設定好 window.name 的值，然後跳轉到另外一個頁面。在這個頁面中就可以獲取到我們剛剛設定的 window.name 了。

由於安全原因，瀏覽器始終會保持 window.name 是string 型別。

同樣這個方法也可以應用到和iframe的互動來：
比如：我的頁面(http://damonare.cn/index.html)中內嵌了一個iframe：

JavaScript <iframe id="iframe" src="http://www.google.com/iframe.html"></iframe>

1	<iframe id="iframe"src="http://www.google.com/iframe.html"></iframe>

在 iframe.html 中設定好了 window.name 為我們要傳遞的字串。
我們在 index.html 中寫了下面的程式碼：

var iframe = document.getElementById('iframe'); var data = ''; iframe.onload = function() { data = iframe.contentWindow.name; };

123456

variframe=document.getElementById('iframe');vardata='';iframe.onload=function(){data=iframe.contentWindow.name;};

Boom!報錯！肯定的，因為兩個頁面不同源嘛，想要解決這個問題可以這樣幹：

var iframe = document.getElementById('iframe'); var data = ''; iframe.onload = function() { iframe.onload = function(){ data = iframe.contentWindow.name; } iframe.src = 'about:blank'; };

123456789

variframe=document.getElementById('iframe');vardata='';iframe.onload=function(){iframe.onload=function(){data=iframe.contentWindow.name;}iframe.src='about:blank';};

或者將裡面的 about:blank 替換成某個同源頁面（about:blank，javascript: 和 data: 中的內容，繼承了載入他們的頁面的源。）

這種方法與 document.domain 方法相比，放寬了域名字尾要相同的限制，可以從任意頁面獲取 string 型別的資料。

後記

其它諸如中介軟體跨域，伺服器代理跨域，Flash URLLoader跨域，動態建立script標籤（簡化版本的jsonp）不作討論。

參考文章：