http://blog.csdn.net/zlj_blog/article/details/43309593
出于安全方面的考慮颓遏,各大瀏覽器都使用同源策略抖誉,禁止跨域訪問易结。所謂同源策略檀轨,簡單地說蹬耘,就是要求動態(tài)內(nèi)容(如JavaScript)只能閱讀與之同源的那些HTTP應(yīng)答和cookies剥啤,而不能閱讀來自不同源的內(nèi)容锦溪。同源的判斷,應(yīng)該把握住 協(xié)議府怯、域名和端口刻诊,只有同協(xié)議、同域名牺丙、同端口才可以算的上是同源则涯,只要這三者中有一個(gè)不同,則兩個(gè)源就屬于不同的源冲簿,兩者之間的訪問則屬于跨域訪問是整。關(guān)于同源與非同源的判斷,可以參照下表(from?http://blog.sina.com.cn/s/blog_62d3ddc00101al1b.html)
特別注意兩點(diǎn):
第一民假,如果是協(xié)議和端口造成的跨域問題“前臺”是無能為力的浮入,
第二:在跨域問題上,域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上羊异。
“URL的首部”指window.location.protocol +window.location.host事秀,也可以理解為“Domains, protocols and ports must match”彤断。
同源策略雖然在安全性方面起到了很大的作用,但是在開發(fā)的工程中易迹,也不可避免地會需要跨域訪問資源宰衙。如目前在很多大型Web項(xiàng)目的開發(fā)中,為了應(yīng)對大并發(fā)睹欲,常常會采取前后端分開部署供炼,這樣就涉及到跨域訪問的問題。JSONP是目前應(yīng)用比較廣泛的一種跨域解決方案窘疮。JSONP的核心思想是利用JS標(biāo)簽的src屬性不受跨域限制進(jìn)行跨域訪問的袋哼。其主要執(zhí)行過程可以總結(jié)為:首先在客戶端注冊一個(gè)回調(diào)函數(shù),然后把回調(diào)函數(shù)的名字傳給服務(wù)器闸衫;服務(wù)器端將要返回給客戶端的數(shù)據(jù)生成為json格式涛贯,同時(shí)獲取到客戶端傳過來的回調(diào)函數(shù)的名字,將要傳遞的json數(shù)據(jù)以實(shí)參的方式蔚出,放到回調(diào)函數(shù)中弟翘,然后將組合成的數(shù)據(jù)返回給客戶端,這樣返回給客戶端的數(shù)據(jù)格式則形如:回調(diào)函數(shù)名(data)骄酗;客戶端則會解析返回的數(shù)據(jù)稀余,執(zhí)行預(yù)先定義好的回調(diào)函數(shù)。
JQuery.Ajax中使用JSONP很簡單趋翻,只需要指定datatype為jsonp格式睛琳,至于回調(diào)函數(shù),可以采用默認(rèn)形式嘿歌,JQuery會自動生成隨機(jī)函數(shù)名掸掏,并以默認(rèn)參數(shù)名callback=函數(shù)名附加在請求的url后,當(dāng)然宙帝,也可以通過jsonp和jsonpcallback自己定義回調(diào)函數(shù)的參數(shù)名和回調(diào)函數(shù)名稱,這兩個(gè)參數(shù)含義如下(w3c):
---------------------------------------------------------
jsonp
類型:String
在一個(gè) jsonp 請求中重寫回調(diào)函數(shù)的名字丧凤。這個(gè)值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器步脓。
jsonpCallback
類型:String
為 jsonp 請求指定一個(gè)回調(diào)函數(shù)名愿待。這個(gè)值將用來取代 jQuery 自動生成的隨機(jī)函數(shù)名。這主要用來讓 jQuery 生成度獨(dú)特的函數(shù)名靴患,這樣管理請求更容易仍侥,也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時(shí)候鸳君,指定這個(gè)回調(diào)函數(shù)名农渊。
---------------------------------------------------------
在后端,只需要通過request.getParameter("callback")獲取到回調(diào)函數(shù)名或颊,并將數(shù)據(jù)封裝成"回調(diào)函數(shù)名(data)"的形式返回即可,前端在收到返回結(jié)果后砸紊,若返回的數(shù)據(jù)格式正確传于,則調(diào)用success方法,對數(shù)據(jù)做相應(yīng)處理醉顽,否則調(diào)用fail方法沼溜。
下面是一個(gè)簡單的示例,后端使用servlet實(shí)現(xiàn)游添,前端頁面部署在http://localhost:8086/容器中系草,后端代碼部署在http://localhost:8080/容器中,由于端口號不同唆涝,所以前端頁面請求后端servlet時(shí)為跨域訪問找都。
前端頁面代碼如下(部署在http://localhost:8086/):