跨域解決方案之一---->JQuery.Ajax JSONP解決跨域訪問(wèn)

http://blog.csdn.net/zlj_blog/article/details/43309593

出于安全方面的考慮,各大瀏覽器都使用同源策略,禁止跨域訪問(wèn)。所謂同源策略,簡(jiǎn)單地說(shuō),就是要求動(dòng)態(tài)內(nèi)容(如JavaScript)只能閱讀與之同源的那些HTTP應(yīng)答和cookies,而不能閱讀來(lái)自不同源的內(nèi)容。同源的判斷,應(yīng)該把握住 協(xié)議、域名和端口,只有同協(xié)議、同域名、同端口才可以算的上是同源,只要這三者中有一個(gè)不同,則兩個(gè)源就屬于不同的源,兩者之間的訪問(wèn)則屬于跨域訪問(wèn)。關(guān)于同源與非同源的判斷,可以參照下表(from?http://blog.sina.com.cn/s/blog_62d3ddc00101al1b.html)

特別注意兩點(diǎn):

第一,如果是協(xié)議和端口造成的跨域問(wèn)題“前臺(tái)”是無(wú)能為力的,

第二:在跨域問(wèn)題上,域僅僅是通過(guò)“URL的首部”來(lái)識(shí)別而不會(huì)去嘗試判斷相同的ip地址對(duì)應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上。

“URL的首部”指window.location.protocol +window.location.host,也可以理解為“Domains, protocols and ports must match”。

同源策略雖然在安全性方面起到了很大的作用,但是在開(kāi)發(fā)的工程中,也不可避免地會(huì)需要跨域訪問(wèn)資源。如目前在很多大型Web項(xiàng)目的開(kāi)發(fā)中,為了應(yīng)對(duì)大并發(fā),常常會(huì)采取前后端分開(kāi)部署,這樣就涉及到跨域訪問(wèn)的問(wèn)題。JSONP是目前應(yīng)用比較廣泛的一種跨域解決方案。JSONP的核心思想是利用JS標(biāo)簽的src屬性不受跨域限制進(jìn)行跨域訪問(wèn)的。其主要執(zhí)行過(guò)程可以總結(jié)為:首先在客戶(hù)端注冊(cè)一個(gè)回調(diào)函數(shù),然后把回調(diào)函數(shù)的名字傳給服務(wù)器;服務(wù)器端將要返回給客戶(hù)端的數(shù)據(jù)生成為json格式,同時(shí)獲取到客戶(hù)端傳過(guò)來(lái)的回調(diào)函數(shù)的名字,將要傳遞的json數(shù)據(jù)以實(shí)參的方式,放到回調(diào)函數(shù)中,然后將組合成的數(shù)據(jù)返回給客戶(hù)端,這樣返回給客戶(hù)端的數(shù)據(jù)格式則形如:回調(diào)函數(shù)名(data);客戶(hù)端則會(huì)解析返回的數(shù)據(jù),執(zhí)行預(yù)先定義好的回調(diào)函數(shù)。

JQuery.Ajax中使用JSONP很簡(jiǎn)單,只需要指定datatype為jsonp格式,至于回調(diào)函數(shù),可以采用默認(rèn)形式,JQuery會(huì)自動(dòng)生成隨機(jī)函數(shù)名,并以默認(rèn)參數(shù)名callback=函數(shù)名附加在請(qǐng)求的url后,當(dāng)然,也可以通過(guò)jsonp和jsonpcallback自己定義回調(diào)函數(shù)的參數(shù)名和回調(diào)函數(shù)名稱(chēng),這兩個(gè)參數(shù)含義如下(w3c):

---------------------------------------------------------

jsonp

類(lèi)型:String

在一個(gè) jsonp 請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名字。這個(gè)值用來(lái)替代在 "callback=?" 這種 GET 或 POST 請(qǐng)求中 URL 參數(shù)里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會(huì)導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器。

jsonpCallback

類(lèi)型:String

為 jsonp 請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來(lái)取代 jQuery 自動(dòng)生成的隨機(jī)函數(shù)名。這主要用來(lái)讓 jQuery 生成度獨(dú)特的函數(shù)名,這樣管理請(qǐng)求更容易,也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。你也可以在想讓瀏覽器緩存 GET 請(qǐng)求的時(shí)候,指定這個(gè)回調(diào)函數(shù)名。

---------------------------------------------------------

在后端,只需要通過(guò)request.getParameter("callback")獲取到回調(diào)函數(shù)名,并將數(shù)據(jù)封裝成"回調(diào)函數(shù)名(data)"的形式返回即可,前端在收到返回結(jié)果后,若返回的數(shù)據(jù)格式正確,則調(diào)用success方法,對(duì)數(shù)據(jù)做相應(yīng)處理,否則調(diào)用fail方法。

下面是一個(gè)簡(jiǎn)單的示例,后端使用servlet實(shí)現(xiàn),前端頁(yè)面部署在http://localhost:8086/容器中,后端代碼部署在http://localhost:8080/容器中,由于端口號(hào)不同,所以前端頁(yè)面請(qǐng)求后端servlet時(shí)為跨域訪問(wèn)。

前端頁(yè)面代碼如下(部署在http://localhost:8086/):

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容