天天看點

ajax跨域和js跨域解決方案

ajax跨域和JS的跨域通信(Cross The Site)的幾種解決方案

    最近做的一個項目中需要ajax跨域取得資料,如果是在本域中确實沒有問題,但是放到二級域和其他域下浏覽器直接就彈出提示框:“該頁正在

1.什麼引起了ajax跨域不能的問題

ajax本身實際上是通過XMLHttpRequest對象來進行資料的互動,而浏覽器出于安全考慮,不允許js代碼進行跨域操作,是以會警告。

2.有什麼完美的解決方案麼?

沒有。解決方案有不少,但是隻能是根據自己的實際情況來選擇。

具體情況有:

一、本域和子域的互相通路: www.aa.com和book.aa.com

二、本域和其他域的互相通路: www.aa.com和www.bb.com 用 iframe

三、本域和其他域的互相通路: www.aa.com和www.bb.com 用 XMLHttpRequest通路代理

四、本域和其他域的互相通路: www.aa.com和www.bb.com 用 JS建立動态腳本

解決方法:

一、如果想做到資料的互動,那麼www.aa.com和book.aa.com必須由你來開發才可以。可以将book.aa.com用iframe添加到www.aa.com的某個頁面下,在www.aa.com和iframe裡面都加上document.domain = "aa.com",這樣就可以統一域了,可以實作跨域通路。就和平時同一個域中鑲嵌iframe一樣,直接調用裡面的JS就可以了。(這個辦法我沒有嘗試,不過理論可行)

二、當兩個域不同時,如果想互相調用,那麼同樣需要兩個域都是由你來開發才可以。用iframe可以實作資料的互相調用。解決方案就是用window.location對象的hash屬性。hash屬性就是http://domian/web/a.htm#dshakjdhsjka裡面的#dshakjdhsjka。利用JS改變hash值網頁不會重新整理,可以這樣實作通過JS通路hash值來做到通信。不過除了IE之外其他大部分浏覽器隻要改變hash就會記錄曆史,你在前進和後退時就需要處理,非常麻煩。不過再做簡單的處理時還是可以用的,具體的代碼我再下面有下載下傳。大體的過程是頁面a和頁面b在不同域下,b通過iframe添加到a裡,a通過JS修改iframe的hash值,b裡面做一個監聽(因為JS隻能修改hash,資料是否改變隻能由b自己來判斷),檢測到b的hash值被修改了,得到修改的值,經過處理傳回a需要的值,再來修改a的hash值(這個地方要注意,如果a本身是那種查詢頁面的話比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是無法取得資料的,同樣報沒有權限的錯誤,需要a把這個傳過來,是以也比較麻煩),同樣a裡面也要做監聽,如果hash變化的話就取得傳回的資料,再做相應的處理。

三、這種情形是最經常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你隻能修改一個,也就是另外一個是别人的,人家告訴你你要取得資料就通路某某連接配接參數是什麼樣子的,最後傳回資料是什麼格式的。而你需要做的就是在你的域下建立一個網頁,讓伺服器去别人的網站上取得資料,再傳回給你。domain1下的a向同域下的GetData.aspx請求資料,GetData.aspx向domain2下的ResponseData.aspx發送請求,ResponseData.aspx傳回資料給GetData.aspx, GetData.aspx再傳回給a,這樣就完成了一次資料請求。GetData.aspx在其中充當了代理的作用。具體可以看下我的代碼。

四、這個和上個的差別就是請求是使用<script>标簽來請求的,這個要求也是兩個域都是由你來開發才行。原理就是JS檔案注入,在本域内的a内生成一個JS标簽,它的SRC指向請求的另外一個域的某個頁面b,b傳回資料即可,可以直接傳回JS的代碼。因為script的src屬性是可以跨域的。具體看代碼,這個也比較簡單。

code:

http://www.live-share.com/files/300697/Cross_The_Site_Test_code.rar.html

(csdn不能粘貼附件麼?)

總結:

第一種情況:域和子域的問題,可以完全解決互動。

第二種情況:跨域,實作過程非常麻煩,需要兩個域開發者都能控制,适用于簡單互動。

第三種情況:跨域,開發者隻控制一個域即可,實作過程需要增加代理取得資料,是常用的方式。

第四種情況:跨域,兩個域開發者都需要控制,傳回一段js代碼。

PS:代碼自己按照情況修改即可。

這是拿别人的參考連結,老美的文章比較多。

1. Security Considerations: Dynamic HTML

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/sec_dhtml.asp

2. About Cross-Frame Scripting and Security

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp

3. Cross-Domain Proxy

http://ajaxpatterns.org/Cross-Domain_Proxy

4. Cross Domain XMLHttpRequest using an IFrame Proxy

http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75

5. Back Button Support for Atlas UpdatePanels

http://www.nikhilk.net/BackButtonSupport.aspx

6. Cross-document messaging hack

http://blog.monstuff.com/archives/000304.html

7. Building Mash-ups with "Atlas"

http://atlas.asp.net/docs/Walkthroughs/DevScenarios/bridge.aspx

8. Calling web services hosted outside of your application with “Atlas”

http://blogs.msdn.com/federaldev/archive/2006/07/31/684229.aspx

http://www.federaldeveloper.com/Shared%20Documents/Presentations%20by%20Marc%

20Schweigert/CallAtlasWebServiceInDifferentProject.zip

9. AJAX Tip: Passing Messages Between iframes 

http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=3b03cf9d-b589-4838-806e-64efcc0a1a15

10. OSCON Cross-site Ajax Slides

http://blog.plaxo.com/archives/2006/07/oscon_crosssite.html

http://www.plaxo.com/css/api/Joseph-Smarr-Plaxo-OSCON-2006.ppt

11. OSCON 2006: Cross-site Ajax

http://www.sitepoint.com/blogs/2006/07/28/oscon-2006-cross-site-ajax/

轉載自:http://blog.csdn.net/macky0668/article/details/6247803