ajax跨域請(qǐng)求(jsonp)
利用JSONP解決AJAX跨域問(wèn)題的原理與jQuery解決方案JSONP jQuery
跨域的解決方案有多種,其中最常見(jiàn)的是使用同一服務(wù)器下的代理來(lái)獲取遠(yuǎn)端數(shù)據(jù),再通過(guò)ajax進(jìn)行讀取,而在這期間經(jīng)過(guò)了兩次請(qǐng)求過(guò)
程,使得獲取數(shù)據(jù)的效率大大降低,這篇文章藍(lán)飛就為大家介紹一下解決跨域問(wèn)題的一種比較通用的方案——JSONP。
什么是跨域?
簡(jiǎn)單的來(lái)說(shuō),出于安全方面的考慮,頁(yè)面中的JavaScript無(wú)法訪問(wèn)其他服務(wù)器上的數(shù)據(jù),即“同源策略”。而跨域就是通過(guò)某些手段來(lái)繞
過(guò)同源策略限制,實(shí)現(xiàn)不同服務(wù)器之間通信的效果。
具體策略限制情況可看下表:
URL
說(shuō)明
允許通信
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域名和域名對(duì)應(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同一域名,不同二級(jí)域名(同上)
不允許
http://www.a.com/a.js
http://www.b.com/b.js不同域名
不允許
什么是JSONP?
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,而JSONP(JSON with Padding)則是JSON 的一種“使用模
式”,通過(guò)這種模式可以實(shí)現(xiàn)數(shù)據(jù)的跨域獲取。
JSONP跨域的原理
在同源策略下,在某個(gè)服務(wù)器下的頁(yè)面是無(wú)法獲取到該服務(wù)器以外的數(shù)據(jù)的,但img、iframe、script等標(biāo)簽是個(gè)例外,這些標(biāo)簽可以通
過(guò)src屬性請(qǐng)求到其他服務(wù)器上的數(shù)據(jù)。利用script標(biāo)簽的開(kāi)放策略,我們可以實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù),當(dāng)然,也需要服務(wù)端的配合。當(dāng)我們正
常地請(qǐng)求一個(gè)JSON數(shù)據(jù)的時(shí)候,服務(wù)端返回的是一串JSON類(lèi)型的數(shù)據(jù),而我們使用JSONP模式來(lái)請(qǐng)求數(shù)據(jù)的時(shí)候,服務(wù)端返回的是一段
可執(zhí)行的JavaScript代碼。
舉個(gè)例子,假如需要從服務(wù)器(http://www.a.com/user?id=123)獲取的數(shù)據(jù)如下:
1.{"id":123,"name":張三,"age":17}
那么,使用JSONP方式請(qǐng)求(http://www.a.com/user?id=123?callback=foo)的數(shù)據(jù)將會(huì)是如下:
當(dāng)然,如果服務(wù)端考慮得更加充分,返回的數(shù)據(jù)可能如下:
這時(shí)候我們只要定義一個(gè)foo()函數(shù),并動(dòng)態(tài)地創(chuàng)建一個(gè)script標(biāo)簽,使其的src屬性為http://www.a.com/user?id=123?callback=foo:
便可以使用foo函數(shù)來(lái)調(diào)用返回的數(shù)據(jù)了。
第一種方法是在ajax函數(shù)中設(shè)置dataType為'jsonp':
第二種方法是利用getJSON來(lái)實(shí)現(xiàn),只要在地址中加上callback=?參數(shù)即可:
也可以簡(jiǎn)單地使用getScript方法:
在jQuery中如何通過(guò)JSONP來(lái)跨域獲取數(shù)據(jù)
1.
2.
3.
4.
5.
6.
7.
$.ajax({
dataType:'jsonp',
url:'http://www.a.com/user?id=123',success:function(data){
}
});
//處理data數(shù)據(jù)
1.$.getJSON('http://www.a.com/user?id=123&callback=?',function(data){2.//處理data數(shù)據(jù)
3.});
//此時(shí)也可以在函數(shù)外定義foo方法
functionfoo(data){
//處理data數(shù)據(jù)
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');
JSONP的應(yīng)用
JSONP在開(kāi)放API中可以起到非常重要的作用,開(kāi)放API是運(yùn)用在開(kāi)發(fā)者自己的應(yīng)用上,而許多應(yīng)用往往是在開(kāi)發(fā)者的服務(wù)器上而不是在
新浪微博的服務(wù)器上,因此跨域請(qǐng)求數(shù)據(jù)成為開(kāi)發(fā)者們所需要解決的一大問(wèn)題,廣大開(kāi)放平臺(tái)應(yīng)該實(shí)現(xiàn)對(duì)JSONP的支持,這一點(diǎn)新浪微博
開(kāi)放平臺(tái)便做的非常好(雖然某些API里沒(méi)有說(shuō)明,但實(shí)際上是可以使用JSONP方式調(diào)用的)。
function GetAjaxData() {
$.ajax({
type: "get",
async: false,
url: "http://localhost:4071/SearchBook.ashx",
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的,標(biāo)識(shí)jsonp回調(diào)函數(shù)名(一般為:callback)jsonpCallback: "GetData",//callback的function名稱(chēng)
success: function (data) {
alert(data.BookName + " " + data.Pages);
},
error: function () {
alert('fail');
}
});
}
