Ajax跨域問題研究筆記

作者:fbysss
msn:jameslastchina@hotmail.com 
blog:blog.csdn.net/fbysss
聲明：本文由fbysss原創，轉載請註明出處
關鍵字：Ajax跨域

一.實驗準備

•     修改c:/windows/system32/drivers/etc/hosts檔案，加入127.0.0.1 www.a.com www.b.com
•     Tomcat/webapps下建立crossdomain目錄，建立一個空的WEB-INF目錄，建立page_on_site_b.jsp和index_on_site_a.jsp。

page_on_site_b.jsp內容如下：
var varonb='this is a var on site b.';<br />alert('welcome to site b.');

ajax_on_site_a.jsp內容如下：

  <mce:script type="text/javascript"><!--<br />var xmlHttp;<br />if(window.ActiveXObject){<br />xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br />}<br />else if(window.XMLHttpRequest){<br />xmlHttp = new XMLHttpRequest();<br />}<br />xmlHttp.onreadystatechange=callbackFunc;<br />xmlHttp.open("post","http://www.b.com:8888/crossdomain/page_on_site_b.jsp",true);<br />xmlHttp.send(null); </p><p>function callbackFunc(){<br /> if(xmlHttp.readystate==4 && xmlHttp.status==200){<br />alert("可以訪問");<br /> }<br />}<br />// --></mce:script>

 

    

 

二、ajax是不允許跨域訪問的。

不同的瀏覽器在不同情況下表現不一樣：

• IE中，如果是本地html檔案調用遠端資源，不會提示任何資訊，可以通過。
• 如果把檔案放到網站中，輸入http://localhost:8888/crossdomain/ajax_on_site_a.jsp會彈出對話方塊提示“該頁正在訪問其控制範圍之外的資訊。這可能導致安全風險。是否繼續？”，點擊“是”之後可以正確執行。
• 如果輸入http://www.a.com:8888/crossdomain/ajax_on_site_a.jsp，IE會提示錯誤“沒有許可權”
• 在Firefox瀏覽器中，根本無法正常執行，會報異常：uncaught exception: Access to restricted URI denied (NS_ERROR_DOM_BAD_URI)

我們不能期待使用者能為我們改變什麼，只能在程式上面做文章。
三、script標籤是可以跨域的。

編寫script_on_site_a.jsp：
<mce:script src="http://www.b.com:8888/crossdomain/page_on_site_b.jsp" mce_src="http://www.b.com:8888/crossdomain/page_on_site_b.jsp"></mce:script> //用於引入其他網站資源。至於是js還是jsp無所謂。<br /><mce:script type="text/javascript"><!--<br /> alert(varonb);//用於檢驗遠端資源是否正確載入<br />// --></mce:script>

瀏覽器中輸入

http://www.a.com:8888/crossdomain/script_on_site_a.jsp
一切正常。

四、其他

1.在實際應用中，如果url帶參數，可以採用動態建立script元素，動態指定src來解決。

2.還有一種方法，就是在www.a.com網站中增加一個servlet，通過servlet調用urlConnection來擷取任意網站的資

源，再把結果傳回，網站a中的頁面只需要調用本地的servlet，避免了跨域。但這樣的方式，會帶來本機伺服器的

額外開銷。
可參看：http://deepin.javaeye.com/blog/512028
3.ajax架構提供的jsonp，可以在一定程度上解決跨域問題。這一定程度，就是說得伺服器支援你。
jsonp（JSON WITH PADDING）
利用script標籤，通過特定的src地址的調用，來執行一個用戶端的js函數，在伺服器端產生相對的資料（json格

式）並以參數的形式傳遞給這個用戶端的js函數並執行這個函數，前提是需要伺服器端的資料輸出格式必須是JSON

。
可參看文章http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html

4.iframe可以跨域，但存在一些問題。

解決辦法可參看http://liuhaixiao.javaeye.com/blog/81959（未測試）

5.如果所有資源都可以自己控制，可以考慮使用document.domain來解決。

6.最新進展：W3C 跨域請求標準已經出台，詳見《AJAX（XMLHttpRequest）進行跨域要求方法詳解》http://www.chinaz.com/Program/XML/01111035112010.html

7.有專門解決ajax跨域問題的js庫：

http://www.ajax-cross-domain.com/

五、思考：
1.為什麼不允許跨域？
    整半天這麼費勁，幹嘛不允許跨域呢？這是出於安全考慮。至於跨域請求到底有哪些風險呢？我能想到的，因為ajax可以不重新整理頁面進行一系列操作，一旦網站被惡意注入，使用者不知不覺就受害了

。不過，script標籤同樣可以做到這一點，為啥不被禁止呢？呵呵，這個問題有待考證。
2.為什麼一定要動態建立script呢？直接寫<script src="xxx"></script>不行嗎？
不是不行，而是說到ajax，往往是在頁面載入完之後，使用者進行了某種行為，比如點擊一個按鈕之後，才出發ajax請求，而script標籤是頁面載入完畢馬上要執行的。如果要實作類別似Ajax的效果，就要

在點擊按鈕的時候，動態建立script標籤，擷取遠端資源。但有局限性：不是真正的ajax，只能使用get方式，返回的結果，必須輸出script才有意義。
還可以參考：http://hi.baidu.com/reydingruhui/blog/item/05f0b3e9e0b95236b90e2dc7.html

3.參考文章
http://www.chinaunix.net/jh/80/988681.html
看完這篇文章，應該知道，後台輸出的東西，必須是javascript語句。一般使用json資料給變數賦值比如var person={id:'1',name:'sss'};這樣，在下面的js中，才能得到變數值，這和jsonp的原理應該差不多。
http://www.jz123.cn/text/284020.html

註：不管怎麼搞，如果你要訪問的跨域資源是未知的（不知道返回什麼結果），跨域往往是不能成功的。因為返回的東西只有是合法的純javascript，才能被讀取。