深入淺析Jsonp解決ajax跨域問(wèn)題

一、介紹

最近跨域問(wèn)題比較多，而且自己剛好也看到這一塊，就總結(jié)了一下，關(guān)于JSONP的東西百度的話(huà)東西確實(shí)很多，很多人都是復(fù)制別人的，如此下去，其實(shí)找的資料就那么幾份，關(guān)鍵是我還看不懂，可能是能力問(wèn)題吧，自己經(jīng)過(guò)很多嘗試，所以總結(jié)了一下，終究還是弄懂了皮毛。注意一點(diǎn)是，這里是用Jsonp解決ajax的跨域問(wèn)題，具體的實(shí)現(xiàn)其實(shí)不是ajax。

1、同源策略

瀏覽器有一個(gè)很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指，域名，協(xié)議，端口相同。不同源的客戶(hù)端腳本(JavaScript、ActionScript)在沒(méi)明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方的資源。

2、JSONP

JSONP（JSON with Padding）是JSON的一種”使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪(fǎng)問(wèn)的問(wèn)題。由于同源策略，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的script 元素是一個(gè)例外。利用 script> 元素的這個(gè)開(kāi)放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

二、實(shí)踐

1、模擬跨域請(qǐng)求

在本機(jī)弄兩個(gè)tomcat，端口分別為8080,8888，也就滿(mǎn)足了非同源的條件，那么要是從一個(gè)端口發(fā)送ajax去獲取另外一個(gè)端口的數(shù)據(jù)，那么肯定會(huì)報(bào)跨域請(qǐng)求問(wèn)題。

這里有兩個(gè)項(xiàng)目，分別是jsonp（8080），other（8888），在jsonp項(xiàng)目中index.jsp如下：

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
title>Insert title here/title>
script type="text/javascript" src="js/jquery.min.js">/script>
script type="text/javascript">
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/index.jsp',
type:'post',
dataType:'text',
success:function(data){
console.log(data);
}
});
}
/script>
/head>
body>
input type="button" value="jsonp" onclick="jsonp_fun()"/>
/body>
/html>

other（8888）項(xiàng)目中index.jsp如下：// 因?yàn)閖sp實(shí)際就是servlet，這里就用jsp代替servlet演示。

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
title>Insert title here/title>
script type="text/javascript" src="js/jquery.min.js">/script>
/head>
body>
other domain
/body>
/html>

其實(shí)中上面看無(wú)非就是jsonp頁(yè)面中點(diǎn)擊按鈕ajax去獲取other頁(yè)面中的數(shù)據(jù)。

結(jié)果如下：chrome控制臺(tái)

XMLHttpRequest cannot load http://localhost:8888/other/index.jsp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

以上提示就是指跨域問(wèn)題，不能從8080這個(gè)域去訪(fǎng)問(wèn)8888域的資源。

2、利用script標(biāo)簽去訪(fǎng)問(wèn)other域的js文件

由于script>標(biāo)簽的src是支持跨域請(qǐng)求的。最常見(jiàn)的就是CDN服務(wù)的應(yīng)用啦，比如我項(xiàng)目中，如果想用jQuery，但是就沒(méi)有這個(gè)js文件，去下載要找很久，而且版本還不知道下的對(duì)不對(duì)，那么可以百度搜jquery cdn，我隨便找一個(gè)，比如bootstrap的cdn：http://www.bootcdn.cn/jquery/，有很多版本供你選擇，只要在項(xiàng)目中加上就行了，最大缺點(diǎn)的話(huà)就是你沒(méi)網(wǎng)的話(huà)，就引入不到啦。

2.1 在other根路徑創(chuàng)建js/other.js文件，內(nèi)容如下：

alert("this is other(8888) js");

2.2 在jsonp/index.jsp中，加入script標(biāo)簽，引入other的js

script type="text/javascript" src="http://localhost:8888/other/js/other.js">/script>

進(jìn)入http://localhost:8080/jsonp/index.jsp，會(huì)立馬彈出alert，表示引入的js文件自動(dòng)執(zhí)行了，跨域請(qǐng)求js成功。

2.3 同樣的，直接引用，會(huì)立馬執(zhí)行立馬的alert，那么在other.js中寫(xiě)函數(shù)，同樣jsonp/index.jsp中也能調(diào)用到，這點(diǎn)就不演示了，項(xiàng)目開(kāi)發(fā)中大多都是這樣做的，頁(yè)面與js/css分離。

2.4 另外說(shuō)明一點(diǎn)，如果在other.js中有函數(shù)通過(guò)ajax調(diào)用8080中的東西，然后引入之后，調(diào)用這個(gè)函數(shù)，也是可以的，但是如果other.js中函數(shù)ajax調(diào)用8888的東西，引入之后，調(diào)用這個(gè)函數(shù)，同樣是跨域的。

3、script實(shí)現(xiàn)跨域請(qǐng)求

3.1 簡(jiǎn)單模擬服務(wù)器返回?cái)?shù)據(jù)

將jsonp/index.jsp改成如下：這里注意引入的other.js的位置，是在函數(shù)getResult之后的，如果在它之前的話(huà)，會(huì)提示函數(shù)不存在。js加載順序是從上開(kāi)始，在之前調(diào)用沒(méi)創(chuàng)建的，不能成功。注意這里是指引入的js文件，如果是同一個(gè)js文件或者當(dāng)前頁(yè)面的js中，先執(zhí)行調(diào)用，然后再寫(xiě)函數(shù)也是沒(méi)有問(wèn)題的，但是如果先執(zhí)行調(diào)用引入js文件中的函數(shù)，然后再引入js文件，就會(huì)提示函數(shù)不存在。

script type="text/javascript" src="js/jquery.min.js">/script>
script type="text/javascript">
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/index.jsp',
type:'post',
dataType:'text',
success:function(data){
console.log(data);
}
});
}
function getResult(data){
alert(data.result);
}
/script>
script type="text/javascript" src="http://localhost:8888/other/js/other.js">/script>

然后other.js

getResult({"result":"this is other domain's data"});

也就是在jsonp/index.jsp頁(yè)面寫(xiě)好函數(shù)，然后引入其他域的js傳入?yún)?shù)去調(diào)用這個(gè)函數(shù)，這里的參數(shù)你可以先看做是其他域服務(wù)器的接口返回的數(shù)據(jù)。

刷新頁(yè)面，效果當(dāng)然是

彈出alert框，this is other domain's data

3.2 模擬接口訪(fǎng)問(wèn)

看到這里，你會(huì)不會(huì)還是想不懂，上面js弄啥的，傳個(gè)死的數(shù)據(jù)，有什么實(shí)際意義嗎？，其實(shí)script的src不僅可以接js的地址，還可以接servlet的地址，也就是http接口地址，所以接下來(lái)，懶得寫(xiě)servlet，這里還是寫(xiě)jsp當(dāng)做接口，在other項(xiàng)目中新建other.jsp頁(yè)面，內(nèi)容如下：

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
%
String params = request.getParameter("params");
out.println("ajax cross success,the server receive params :"+params);
%>

內(nèi)容很簡(jiǎn)單，也就是接受一個(gè)params的參數(shù)，然后返回?cái)?shù)據(jù)給調(diào)用者。

我們?cè)趈sonp/index.jsp中加上

script type="text/javascript" src="http://localhost:8888/other/other.jsp?params=fromjsonp">/script>

看到這個(gè)地址，你是不是很熟悉，不熟悉的證明你用servlet用蠢了，jsp也是servlet，流程就是頁(yè)面一加載的時(shí)候，script標(biāo)簽就會(huì)去發(fā)送請(qǐng)求，然后返回?cái)?shù)據(jù)。那么我們刷新頁(yè)面，看看效果。

Uncaught SyntaxError: Unexpected identifier

報(bào)錯(cuò)了，如上，然后代碼有問(wèn)題？No，點(diǎn)擊錯(cuò)誤，你會(huì)看到請(qǐng)求的東西也打印出來(lái)了，就是提示錯(cuò)誤，表示這個(gè)東西瀏覽器不認(rèn)識(shí)，其實(shí)是script不認(rèn)識(shí)啦。

還不明白，那么你去頁(yè)面加上如下內(nèi)容，你看報(bào)不報(bào)錯(cuò)??！肯定報(bào)錯(cuò)

script type="text/javascript">
ajax cross success,the server receive params : jsonp_param
/script>

那么js不能解析，我們換一種思路，要是我們輸出的是JSON字符串或者調(diào)用當(dāng)前頁(yè)面函數(shù)的字符串了，類(lèi)似于3.1中返回的getResult({“result”:”this is other domain's data”});

所以改造一下，把other.jsp中的內(nèi)容改成

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
%
String params = request.getParameter("params");
//out.println("ajax cross success,the server receive params :"+params);
out.println("getResult({'result':'"+params+"'})");
%>

別忘了，之前jsonp/index.jsp中我們定義了，那么加入引用之后，依然記得getResult函數(shù)與引入函數(shù)的先后順序問(wèn)題。

script type="text/javascript">
function getResult(data){
alert(data.result);
}
/script>
script type="text/javascript" src="http://localhost:8888/other/other.jsp?params=fromjsonp">/script>

刷新頁(yè)面，發(fā)現(xiàn)大工告成。

至此，大部分原理已經(jīng)講完了，還有一個(gè)問(wèn)題，這里服務(wù)器返回的是getResult（xxx），其中這里的xxx可以當(dāng)做是經(jīng)過(guò)接口的很多處理，然后塞進(jìn)去的值，但是這個(gè)getResult這個(gè)函數(shù)名，調(diào)用方與其他域服務(wù)器這一方怎么約定這個(gè)名字是一致的了，況且很多公司自己做服務(wù)的，別的公司的開(kāi)發(fā)人員去調(diào)用，難道每個(gè)人都去那么公司去約定調(diào)用函數(shù)的名字？怎么可能，所以有人就想出來(lái)了一種解決方案，當(dāng)然不是我~~，其實(shí)也很簡(jiǎn)單啦，也就是把回調(diào)的函數(shù)名字也一起傳過(guò)去不就行了，所以代碼如下：

script type="text/javascript" src="http://localhost:8888/other/other.jsp?params=fromjsonpcallback=getResult">/script>

other.jsp

%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
%
String params = request.getParameter("params");
String callback = request.getParameter("callback");
// 經(jīng)過(guò)該接口一系列操作，然后得到data，將data返回給調(diào)用者
String data = "{'result':'"+params+"'}";
out.println(callback + "("+data+")");
%>

代碼很簡(jiǎn)單，也就是傳遞一個(gè)回調(diào)函數(shù)的參數(shù)名，然后經(jīng)過(guò)該接口一系列操作，將返回?cái)?shù)據(jù)，塞到回調(diào)函數(shù)里面，調(diào)用端的函數(shù)就得到了該接口的數(shù)據(jù)，也就是類(lèi)似于ajax中succsss：function(data)，然后處理data一樣，這里的success回調(diào)函數(shù)，相當(dāng)于上面的getResult函數(shù)。當(dāng)然你也可以寫(xiě)的優(yōu)雅一點(diǎn)，比如：

function CreateScript(src) {
$("script>//script>").attr("src", src).appendTo("body")
}
function jsonp_fun(){
CreateScript("http://localhost:8888/other/other.jsp?params=fromjsonpcallback=getResult")
}

4、Jquery的JSONP

至此跨域請(qǐng)求的原理已經(jīng)講清楚了，但是仍然還有一個(gè)問(wèn)題，總覺(jué)得這樣用有點(diǎn)怪是不是，如果用jquery的話(huà)，調(diào)用就很簡(jiǎn)單了，其實(shí)jquery底層實(shí)現(xiàn)也是拼了一個(gè)script，然后指定src這種方式，跟上面講的一樣，只是jquery封裝了一下，顯得更加優(yōu)雅，跟ajax調(diào)用方式差不多，所以容易記，代碼如下：

script type="text/javascript">
function getResult(data){
alert("through jsonp,receive data from other domain : "+data.result);
}
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback:"getResult",//自定義的jsonp回調(diào)函數(shù)名稱(chēng)，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以不寫(xiě)這個(gè)參數(shù)，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
success: function(data){
},
error: function(){
alert('fail');
}
});
}
/script>
body>
input type="button" value="jsonp" onclick="jsonp_fun()"/>
/body>

這里的jsonCallback，回調(diào)函數(shù)設(shè)置為getResult，那么返回后會(huì)先調(diào)用getResult函數(shù)中的代碼，再調(diào)用success函數(shù)中的代碼，一般情況下，不用定義getResult函數(shù)，同樣jsonCallback不需要設(shè)置，那么就只執(zhí)行success中的代碼，也就跟平時(shí)的ajax一樣用啦。

所以實(shí)際工作用法如下：

function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
success: function(data){
alert("through jsonp,receive data from other domain : "+data.result);
},
error: function(){
alert('fail');
}
});
}
%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
%
String params = request.getParameter("params");
String callback = request.getParameter("callback");
// 經(jīng)過(guò)該接口一系列操作，然后得到data，將data返回給調(diào)用者
String data = "{\"result\":\""+params+"\"}";
out.println(callback + "("+data+")");
%>

這里沒(méi)有指定jsonpCallback，實(shí)際上jquery底層拼裝了一個(gè)函數(shù)名，當(dāng)然生成函數(shù)規(guī)則就沒(méi)研究了。

補(bǔ)充：

1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來(lái)”很像，目的也一樣，都是請(qǐng)求一個(gè)url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝；

2、但ajax和jsonp其實(shí)本質(zhì)上是不同的東西。ajax的核心是通過(guò)XmlHttpRequest獲取非本頁(yè)內(nèi)容，而jsonp的核心則是動(dòng)態(tài)添加script>標(biāo)簽來(lái)調(diào)用服務(wù)器提供的js腳本。

3、所以說(shuō)，其實(shí)ajax與jsonp的區(qū)別不在于是否跨域，ajax通過(guò)服務(wù)端代理一樣可以實(shí)現(xiàn)跨域，jsonp本身也不排斥同域的數(shù)據(jù)的獲取。

4、還有就是，jsonp是一種方式或者說(shuō)非強(qiáng)制性協(xié)議，如同ajax一樣，它也不一定非要用json格式來(lái)傳遞數(shù)據(jù)，如果你愿意，字符串都行，只不過(guò)這樣不利于用jsonp提供公開(kāi)服務(wù)。

以上內(nèi)容是小編給大家介紹的Jsonp解決ajax跨域問(wèn)題的相關(guān)資料，希望對(duì)大家有所幫助！