提醒：本文最後更新於 2677 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

先來句題外話，最開始Ajax應該是用來特指用XMLHttpRequest傳輸資料這門技術，但就像最近大家把一切web新技術都歸到html5名下一樣，現在一切非同步獲取資料的手段都被人稱之為Ajax。

由於JavaScript同源策略的存在，跨域資料互動是個老生常談的話題了。網上相關文章很多，不過隨著時間的推移和瀏覽器的更新，一部分解決方案已經不適用了，同時也出現了一些更好的方法。拋開純伺服器Proxy這種跟前端沒什麼關係的方案不說，這裡簡單總結下常見的其他幾種方式。

JSONP

JSONP是最常見的跨域資料互動的方式，原理是html的script標籤可以載入並執行其他域JS檔案。站點B把要提供的資料作為引數傳給一個站點A定義的全域性函式，站點A引用這個檔案就可以跨域獲取資料了，A站還可以把少量引數放在script標籤的src裡提交給B站。外鏈JS這種方案只支援GET，受IE下url長度不能超過2083個位元組的限制和出於安全考慮，一般不用來提交資料。

有人通過後端Proxy使得這種方式可以獲取任意頁面內容，還增加了對POST的支援，如：

<script type="text/javascript" src="http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=(http://www.google.com)"></script>
<script type="text/javascript">
    alert(ACD.responseText);
</script>
<script type="text/javascript" src="http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=(http://216.92.131.147/dotserv/ACD/runit/post.cgi)&method=post&postdata=(name=fred&
 
[email protected])"></script>
<script type="text/javascript">
    alert(ACD.responseText);
</script>

實際上這個方案是藉助後端把任意頁面輸出為JS變數，後端根據url中相關標識來決定請求方式和引數，並不能解決大資料提交問題。

原生表單+Redirect＋Callback

原生的form表單支援提交資料到其他域，我們只需要把form的target指向頁面上的隱藏iframe，那就實現了無重新整理提交，剩下的問題就是怎麼獲取提交後的結果。例如站點A表單提交資料到站點B，通常我們會在站點B處理完請求，重定向到站點A下某個Proxy頁面，並在url帶上引數標識處理結果。接著，A站下的Proxy頁面就可以解析url引數，傳給父頁面的Callback函式來處理了。

Flash

利用flash的URLLoader，也可以輕鬆實現跨域資料互動。只要站點B的跨域策略檔案(crossdomain.xml)中包含了站點A，A站就可以獲取B站的資料，提交資料給B站。我們可以把JS和flash的互動封裝一下，更方便的使用。這裡有一個別人封裝好的版本，使用起來和原生的XMLHttpRequest幾乎一模一樣：

var req;
function callback() {
   if (req.readyState == 4) {
     try {
       if (req.status != 200) {
           alert('error detected 1');
       } else {
         alert("got data: "+req.responseText);
       }
     } catch(e) {
         alert('error detected 2');
     }
   }
}
function test_get() {
  req = new CrossXHR();
  req.onreadystatechange = callback;
  req.open('GET', 'http://www.pliantdev.com/support/test.xml');
  req.send();
}

Iframe+XMLHttpRequest

如果站點B有一個proxy頁面，用原生Ajax(XMLHttpRequest)對B站其他頁面進行各種資料互動，那麼我們在A站用iFrame引入這個proxy頁面，只需要解決iFrame跨域問題就可以了。實際上，如果A和B屬於相同大域，設定兩邊的document.domain為根域名就OK了；如果是完全不同的兩個域，也有許多現成的解決方案，例如經典的window.name。更妙的是，除開IE6、IE7，幾乎所有現代瀏覽器都支援用window.postMessage實現不同iFrame的資料通訊。pmxdr就是這樣一個庫，利用postMessage把資料傳給隱藏的站外iFrame來實現跨域Ajax，libxdr對它進行了進一步的封裝，使之更好用：

var req = new XDR();
req.open("POST", "http://code.eligrey.com/pmxdr/libxdr/demo.php");
req.setRequestHeader("Content-Type", 
    "application/x-www-form-urlencoded");
req.onload = function() {
    alert(this.responseText); // alerts "foo is bar"
};
request.send("foo=bar");

值得注意的是，這種方案只需要在站點B部署一個proxy頁面，其他任意站點都可以通過這個頁面與之互動，不太安全，這一點pmxdr考慮到了，在pmxdr-host.js裡有一個變數alwaysTrustedOrigins，它是一個數組，支援用正則定義允許互動的站點。

終極解決方案：CORS

實際上，除了IE6、IE7，大部分現代瀏覽器已經支援了跨域資源共享（Cross-Origin Resource Sharing，簡稱：CORS）標準，這可謂是跨域Ajax的終極解決方案。有了這個標準，只需要在Response Header里加上這麼一條，就可以輕鬆跨域了：

Access-Control-Allow-Origin: http://hello-world.example

這個header定義允許哪些域跟自己互動，如果定義為*就表示允許任何域，這麼做當然是不推薦的。在除IE之外的標準瀏覽器，這樣就可以跨域Ajax了。對於IE，需要換用新增的XDomainRequest物件來發送請求，其它都類似。另外還有幾個header可以用來設定允許的提交方式等資訊，如果要支援認證或者提交xml等格式的資料給伺服器，則需要預請求，這裡有更多說明。

總結

不同的方案有各自不同的使用場景，誰好誰壞不能一概而論。一般的，跨域獲取資料個人習慣用JSONP，跨域提交資料個人習慣用表單+Callback。隨著現代瀏覽器的普及，原生xhr也可以嘗試下，flash可以作為替補降級用。最後，如果要選用一個封裝了多種跨域實現的庫，可以考慮下Yui3的io元件。

本文提到一些元件連結：

--EOF--

發表於 2011-09-12 21:19:17 ，並被新增「 Ajax 、 跨域 」標籤 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 2677 天前，文中所描述的資訊可能已發生改變，請謹慎使用。