閱讀(30k) 書(shū)簽贊(2) 我要糾錯(cuò)

jquery ajax jsonp跨域調(diào)用實(shí)例代碼

2022-05-17 14:22 更新

什么是跨域？

簡(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類型的數(shù)據(jù)，而我們使用JSONP模式來(lái)請(qǐng)求數(shù)據(jù)的時(shí)候，服務(wù)端返回的是一段可執(zhí)行的JavaScript代碼。

舉個(gè)例子，假如需要從服務(wù)器（http://www.a.com/user?id=123）獲取的數(shù)據(jù)如下：

{"id": 123, "name" : 張三, "age": 17}

那么，使用JSONP方式請(qǐng)求（http://www.a.com/user?id=123?callback=foo）的數(shù)據(jù)將會(huì)是如下：

foo({"id": 123, "name" : 張三, "age": 17});

當(dāng)然，如果服務(wù)端考慮得更加充分，返回的數(shù)據(jù)可能如下：

try{foo({"id": 123, "name" : 張三, "age": 17});}catch(e){}

這時(shí)候我們只要定義一個(gè)foo()函數(shù)，并動(dòng)態(tài)地創(chuàng)建一個(gè)script標(biāo)簽，使其的src屬性為http://www.a.com/user?id=123?callback=foo：

function executeJsonp(url){
　　var eleScript= document.createElement("script");
　　eleScript.type = "text/javascript";
　　eleScript.src = url;
　　document.getElementsByTagName("head")[0].appendChild(eleScript);
}

function foo(data){
    for(var p in data){
      console.log(data[p]);
    }
}

var url = "http://www.a.com/user?id=123?callback=foo";
executeJsonp(url)

便可以使用foo函數(shù)來(lái)調(diào)用返回的數(shù)據(jù)了。

在jQuery中如何通過(guò)JSONP來(lái)跨域獲取數(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來(lái)實(shí)現(xiàn)，只要在地址中加上callback=?參數(shù)即可：

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

也可以簡(jiǎn)單地使用getScript方法：

//此時(shí)也可以在函數(shù)外定義foo方法
function foo(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)用的）。