JavaScript是一種在Web開發中經常使用的前端動态腳本技術。在JavaScript中，有一個很重要的安全性限制，被稱為“Same-Origin Policy”（同源政策）。這一政策對于JavaScript代碼能夠通路的頁面内容做了很重要的限制，即JavaScript隻能通路與包含它的文檔在同一域下的内容。
JavaScript這個安全政策在進行多iframe或多視窗程式設計、以及Ajax程式設計時顯得尤為重要。根據這個政策，在baidu.com下的頁面中包含的JavaScript代碼，不能通路在google.com域名下的頁面内容；甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相通路。對于Ajax的影響在于，通過XMLHttpRequest實作的Ajax請求，不能向不同的域送出請求，例如，在abc.example.com下的頁面，不能向def.example.com送出Ajax請求，等等。
然而，當進行一些比較深入的前端程式設計的時候，不可避免地需要進行跨域操作，這時候“同源政策”就顯得過于苛刻。JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實作的，并且探讨下JSONP跨域的原理。
利用在頁面中建立<script>節點的方法向不同域送出HTTP請求的方法稱為JSONP，這項技術可以解決跨域送出Ajax請求的問題。JSONP的工作原理如下所述：
假設在http://example1.com/index.php這個頁面中向http://example2.com/getinfo.php送出GET請求，我們可以将下面的JavaScript代碼放在http://example1.com/index.php這個頁面中來實作：
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
當GET請求從http://example2.com/getinfo.php傳回時，可以傳回一段JavaScript代碼，這段代碼會自動執行，可以用來負責調用http://example1.com/index.php頁面中的一個callback函數。
JSONP的優點是：它不像XMLHttpRequest對象實作的Ajax請求那樣受到同源政策的限制；它的相容性更好，在更加古老的浏覽器中都可以運作，不需要XMLHttpRequest或ActiveX的支援；并且在請求完畢後可以通過調用callback的方式回傳結果。
JSONP的缺點則是：它隻支援GET請求而不支援POST等其它類型的HTTP請求；它隻支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
再來一個例子：
var qsData = {
'searchWord':$("#searchWord").attr("value"),
'currentUserId':$("#currentUserId").attr("value"),
'conditionBean.pageSize':$("#pageSize").attr("value")
};
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被觸發.原因可能是dataType如果指定為jsonp的話,就已經不是ajax事件了
},
success: function (json) {//用戶端jquery預先定義好的callback函數,成功擷取跨域伺服器上的json資料後,會動态執行這個callback函數
if(json.actionErrors.length!=0){
alert(json.actionErrors);
},
}
genDynamicContent(qsData,type,json);
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
error: function(xhr){
//請求出錯處理
alert("請求出錯(請檢查相關度網絡狀況.)");
});
有時也會看到這樣的寫法：
$.getJSON("http://跨域的dns/document!searchJSONResult.action? name1="+value1+"&jsoncallback=?",
function(json){
if(json.屬性名==值){
// 執行代碼
}
});
這種方式其實是上例$.ajax({..}) api的一種進階封裝，有些$.ajax api底層的參數就被封裝而不可見了。
這樣，jquery就會拼裝成如下的url get請求：
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B&currentUserId=5351&conditionBean.pageSize=15
在響應端(http://跨域的dns/document!searchJSONResult.action)，通過 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随後要回調的js function name:jsonp1236827957501 然後 response的内容為一個Script Tags:"jsonp1236827957501("+按請求參數生成的json數組+")"; jquery就會通過回調方法動态加載調用這個js tag:jsonp1236827957501(json數組); 這樣就達到了跨域資料交換的目的。
JSONP的最基本的原理是：動态添加一個<script>标簽，而script标簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協定無關了。
這樣其實"jQuery AJAX跨域問題"就成了個僞命題，jquery $.ajax方法名有誤導人之嫌。
如果設為dataType: 'jsonp'，這個$.ajax方法就和ajax XmlHttpRequest沒什麼關系了，取而代之的則是JSONP協定。JSONP是一個非官方的協定，它允許在伺服器端內建Script tags傳回至用戶端，通過javascript callback的形式實作跨域通路。
JSONP即JSON with Padding。由于同源政策的限制，XmlHttpRequest隻允許請求目前源（域名、協定、端口）的資源。如果要進行跨域請求， 我們可以通過使用html的script标記來進行跨域請求，并在響應中傳回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。 這種跨域的通訊方式稱為JSONP。
jsonCallback 函數jsonp1236827957501(....)：是浏覽器用戶端注冊的，擷取跨域伺服器上的json資料後，回調的函數
Jsonp的執行過程如下：
首先在用戶端注冊一個callback (如:'jsoncallback'), 然後把callback的名字(如:jsonp1236827957501)傳給伺服器。注意：服務端得到callback的數值後，要用jsonp1236827957501(......)把将要輸出的json内容包括起來，此時，伺服器生成 json 資料才能被用戶端正确接收。
然後以 javascript 文法的方式，生成一個function， function 名字就是傳遞上來的參數 'jsoncallback'的值 jsonp1236827957501 .
最後将 json 資料直接以入參的方式，放置到 function 中，這樣就生成了一段 js 文法的文檔，傳回給用戶端。
用戶端浏覽器，解析script标簽，并執行傳回的 javascript 文檔，此時javascript文檔資料，作為參數， 傳入到了用戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裡。
可以說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一緻的(qq空間就是大量采用這種方式來實作跨域資料交換的)。JSONP是一種腳本注入(Script Injection)行為，是以有一定的安全隐患。
那jquery為什麼不支援post方式跨域呢？
雖然采用post+動态生成iframe是可以達到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)，但這樣做是一個比較極端的方式，不建議采用。
也可以說get方式的跨域是合法的，post方式從安全角度上，被認為是不合法的，萬不得已還是不要劍走偏鋒。
client端跨域通路的需求看來也引起w3c的注意了，看資料說html5 WebSocket标準支援跨域的資料交換，應該也是一個将來可選的跨域資料交換的解決方案。
來個超簡單的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript"src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
其中 jsonCallback 是用戶端注冊的，擷取跨域伺服器上的json資料後，回調的函數。http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 這個 url 是跨域伺服器取 json 資料的接口，參數為回調函數的名字，傳回的格式為：jsonpCallback({msg:'this is json data'})
簡述原理與過程：首先在用戶端注冊一個callback, 然後把callback的名字傳給伺服器。此時，伺服器先生成 json 資料。 然後以 javascript 文法的方式，生成一個function , function 名字就是傳遞上來的參數 jsonp。最後将 json 資料直接以入參的方式，放置到 function 中，這樣就生成了一段 js 文法的文檔，傳回給用戶端。
用戶端浏覽器，解析script标簽，并執行傳回的 javascript 文檔，此時資料作為參數，傳入到了用戶端預先定義好的 callback 函數裡。（動态執行回調函數）
3、使用window.name來進行跨域
window對象有個name屬性，該屬性有個特征：即在一個視窗(window)的生命周期内,視窗載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個視窗載入過的所有頁面中的，并不會因新頁面的載入而進行重置。
比如：有一個頁面a.html,它裡面有這樣的代碼：
<a href="http://images.cnitblog.com/blog/130623/201307/15184534-769ff1574c304d11accd26cbbbd1f9da.png" target="_blank"></a>
再看看b.html頁面的代碼：
a.html頁面載入後3秒，跳轉到了b.html頁面，結果為：
我們看到在b.html頁面上成功擷取到了它的上一個頁面a.html給window.name設定的值。如果在之後所有載入的頁面都沒對window.name進行修改的話，那麼所有這些頁面擷取到的window.name的值都是a.html頁面設定的那個值。當然，如果有需要，其中的任何一個頁面都可以對window.name的值進行修改。注意，window.name的值隻能是字元串的形式，這個字元串的大小最大能允許2M左右甚至更大的一個容量，具體取決于不同的浏覽器，但一般是夠用了。
上面的例子中，我們用到的頁面a.html和b.html是處于同一個域的，但是即使a.html與b.html處于不同的域中，上述結論同樣是适用的，這也正是利用window.name進行跨域的原理。
下面就來看一看具體是怎麼樣通過window.name來跨域擷取資料的。還是舉例說明。
data.html頁面裡的代碼很簡單，就是給目前的window.name設定一個a.html頁面想要得到的資料值。data.html裡的代碼：
那麼在a.html頁面中，我們怎麼把data.html頁面載入進來呢？顯然我們不能直接在a.html頁面中通過改變window.location來載入data.html頁面，因為我們想要即使a.html頁面不跳轉也能得到data.html裡的資料。答案就是在a.html頁面中使用一個隐藏的iframe來充當一個中間人角色，由iframe去擷取data.html的資料，然後a.html再去得到iframe擷取到的資料。
看下a.html頁面的代碼：
上面的代碼隻是最簡單的原理示範代碼，你可以對使用js封裝上面的過程，比如動态的建立iframe,動态的注冊各種事件等等，當然為了安全，擷取完資料後，還可以銷毀作為代理的iframe。網上也有很多類似的現成代碼，有興趣的可以去找一下。
通過window.name來進行跨域，就是這樣子的。
使用HTML5中新引進的window.postMessage方法來跨域傳送資料
window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏覽器都已經支援window.postMessage方法。
調用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message為要發送的消息，類型隻能為字元串；第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window對象，可是通過監聽自身的message事件來擷取傳過來的消息，消息内容儲存在該事件對象的data屬性中。
上面所說的向其他window對象發送消息，其實就是指一個頁面有幾個架構的那種情況，因為每一個架構都有一個window對象。在讨論第二種方法的時候，我們說過，不同域的架構間是可以擷取到對方的window對象的，而且也可以使用window.postMessage這個方法。下面看一個簡單的示例，有兩個頁面
我們運作a頁面後得到的結果:
我們看到b頁面成功的收到了消息。
使用postMessage來跨域傳送資料還是比較直覺和友善的，但是缺點是IE6、IE7不支援，是以用不用還得根據實際需要來決定。
結語：
除了以上幾種方法外，還有flash、在伺服器上設定代理頁面等跨域方式，這裡就不做介紹了。
以上四種方法，可以根據項目的實際情況來進行選擇應用，個人認為window.name的方法既不複雜，也能相容到幾乎所有浏覽器，這真是極好的一種跨域方法。
本文轉自 風雨蕭條 51CTO部落格，原文連結：http://blog.51cto.com/1095221645/1916030，如需轉載請自行聯系原作者