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