這篇文章主要介紹Ajax中如何實(shí)現(xiàn)jsonp跨域請求，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為貴池企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，貴池網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

什么是跨域？

簡單的來說，出于安全方面的考慮，頁面中的JavaScript無法訪問其他服務(wù)器上的數(shù)據(jù)，即“同源策略”。而跨域就是通過某些手段來繞過同源策略限制，實(shí)現(xiàn)不同服務(wù)器之間通信的效果。

具體策略限制情況可看下表：

URL	說明	允許通信
http://www.a.com/a.js  http://www.a.com/b.js	同一域名下	允許
http://www.a.com/lab/a.js  http://www.a.com/script/b.js	同一域名下不同文件夾	允許
http://www.a.com:8000/a.js  http://www.a.com/b.js	同一域名，不同端口	不允許
http://www.a.com/a.js  https://www.a.com/b.js	同一域名，不同協(xié)議	不允許
http://www.a.com/a.js  http://127.0.0.100/b.js	域名和域名對應(yīng)ip	不允許
http://www.a.com/a.js  http://script.a.com/b.js	主域相同，子域不同	不允許
http://www.a.com/a.js  http://a.com/b.js	同一域名，不同二級域名（同上）	不允許
http://www.a.com/a.js  http://www.b.com/b.js	不同域名	不允許

什么是JSONP？

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，而JSONP（JSON with Padding）則是JSON 的一種“使用模式”，通過這種模式可以實(shí)現(xiàn)數(shù)據(jù)的跨域獲取。

JSONP跨域的原理

在同源策略下，在某個(gè)服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的，但img、iframe、script等標(biāo)簽是個(gè)例外，這些標(biāo)簽可以通過src屬性請求到其他服務(wù)器上的數(shù)據(jù)。利用script標(biāo)簽的開放策略，我們可以實(shí)現(xiàn)跨域請求數(shù)據(jù)，當(dāng)然，也需要服務(wù)端的配合。當(dāng)我們正常地請求一個(gè)JSON數(shù)據(jù)的時(shí)候，服務(wù)端返回的是一串JSON類型的數(shù)據(jù)，而我們使用JSONP模式來請求數(shù)據(jù)的時(shí)候，服務(wù)端返回的是一段可執(zhí)行的JavaScript代碼。

跨域:js有一個(gè)同源限制,簡單說來源不一樣的話就無法相互間交互.那么怎么算來源不一樣呢, 舉個(gè)例子:瀏覽器訪問-->服務(wù)器A--->得到頁面A---頁面A中的js腳本只能訪問服務(wù)器A的資源(相同域名和端口,此外域名與對應(yīng)的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域問題,但是這里需要注意一點(diǎn)的是服務(wù)器A是沒有跨域的問題的,這個(gè)只有js存在這個(gè)問題,也就是說: 頁面A中js-->服務(wù)器A--->跨域資源,這個(gè)路徑是可以.只有 頁面A中的js--->跨域資源,這個(gè)路徑是不行的.

然后說一下解決方案中的jsonp,這個(gè)不是一種格式,而是一種解決方案.

jsonp的原理:js雖然有同源限制,但是引入js文件的時(shí)候卻沒有這個(gè)限制,也就是說:

<script type="text/javascript" src="xxx/xxxx.js"></script>

其中src屬性引入js文件的時(shí)候是沒有同源限制的,此時(shí)是可以引入域外資源的.jsonp的原理就在這里,通過動(dòng)態(tài)的創(chuàng)建一個(gè)以上那行js引入語句,通過其src屬性訪問域外資源.而域外資源服務(wù)器只要返回一個(gè)能被解析為js語句的字符串即可達(dá)到返回結(jié)果的目的,形如:

callback({"key":"value",...})

其中callback是需要事先約定的名字,綠字部分為要返回到j(luò)son字符串,然后拼接成以上那種形式直接返回即可.這樣頁面中的js從服務(wù)端接收到這個(gè)拼接的字符串后,就會(huì)直接執(zhí)行本地的名為callback的js方法,這也就是為何callback這個(gè)需要事先約定的原因,需要保證頁面?zhèn)纫嬖谶@個(gè)js方法,這個(gè)方法傳入的參數(shù)就為服務(wù)器側(cè)的返回值.

ajax是支持jsonp的,所以以上那些麻煩事情都會(huì)替我們做,寫法如下:

$.ajax({
     type: 'GET',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });

紅字部分標(biāo)識(shí)我們使用jsonp的方式調(diào)用,實(shí)際上此時(shí)這個(gè)已經(jīng)不是傳統(tǒng)意義上的ajax的get請求了,它的真實(shí)實(shí)現(xiàn)方式就是我們上文中說的那樣.其中紅字部分的callback為我們要和服務(wù)器端進(jìn)行溝通的部分,這個(gè)請求發(fā)送到服務(wù)器端,實(shí)際上這樣的:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

服務(wù)器端需要通過callback來取值(類似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自動(dòng)生成的值,這個(gè)值實(shí)際上就是對應(yīng)的我們發(fā)送請求的ajax方法中的success回調(diào)方法,服務(wù)器端如果返回

jqueryxxxx({"ret":"ok"})

頁面中會(huì)自動(dòng)執(zhí)行success方法,且將{"ret":"ok"}傳給success方法的參數(shù)result.

以上就是ajax通過jsonp的方式實(shí)現(xiàn)跨域訪問的過程.可以看出基本不用我們做什么額外操作,全都封裝好了.

ps：在jQuery中如何通過JSONP來跨域獲取數(shù)據(jù)

第一種方法是在ajax函數(shù)中設(shè)置dataType為'jsonp'： 

$.ajax({
    dataType: 'jsonp',
    url: 'http://www.a.com/user?id=123',
    success: function(data){
        //處理data數(shù)據(jù)
    }
});

第二種方法是利用getJSON來實(shí)現(xiàn)，只要在地址中加上callback=?參數(shù)即可： 

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
    //處理data數(shù)據(jù)
});

也可以簡單地使用getScript方法：

//此時(shí)也可以在函數(shù)外定義foo方法
function foo(data){
    //處理data數(shù)據(jù)
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');

以上是“Ajax中如何實(shí)現(xiàn)jsonp跨域請求”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：Ajax中如何實(shí)現(xiàn)jsonp跨域請求
文章來源：http://jinyejixie.com/article46/pshjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、商城網(wǎng)站、網(wǎng)站營銷、移動(dòng)網(wǎng)站建設(shè)、域名注冊、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)