jQuery中g(shù)etJSON跨域原理的深入講解
前幾天我在開發(fā)一個(gè)工具的時(shí)候,其中有個(gè)功能就是獲取本頁面的短網(wǎng)址。
這個(gè)想法是好的,可是在我付諸于行動(dòng)的時(shí)候,發(fā)現(xiàn)這個(gè)需要跨域。
起初我的想法就是,跨域的最簡單的方法就是增加一個(gè)script標(biāo)簽,因?yàn)閟cript標(biāo)簽是允許跨域的。
但是問題又來了,對(duì)方的API返回的是個(gè)json對(duì)象,用script標(biāo)簽只能執(zhí)行,卻不能獲取到里面的東西,也就是說返回的東西是不可控的。
隨后我就想到了jQuery中的getJSON的方法,學(xué)習(xí)了一下,沒想到里面的文章這么大。
jQuery非常聰明,他也意識(shí)到只靠script請(qǐng)求是無法接受到返回的東西的,所以他就設(shè)計(jì)了一個(gè)全局的callback函數(shù),發(fā)送請(qǐng)求的時(shí)候把這個(gè)callback函數(shù)也傳進(jìn)去。
服務(wù)器判斷是否有這個(gè)callback函數(shù),如果沒有就返回一個(gè)對(duì)象,如果有就返回一個(gè)函數(shù)名(對(duì)象)。
我們可以通過下面這個(gè)地址來看一下
http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn
大家可以打開一下,結(jié)果返回的是一個(gè)json對(duì)象。
如果我加上callback參數(shù)
http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn&callback=somefunc
大家可以看到返回的是
somefunc({“shorturl”: “http:\/\/to.ly\/3XHP”, “ok”: true})
傳入的也正好是函數(shù)名。
這個(gè)想法很不錯(cuò),缺點(diǎn)就是對(duì)方服務(wù)器必須是可控的。
大方向是這個(gè)的,但是還有一些細(xì)節(jié)的小技巧,比如說如何在匿名函數(shù)中設(shè)置一個(gè)全局函數(shù),如何將這個(gè)全局函數(shù)變?yōu)槟涿瘮?shù)!
本來想直接把jQuery中的getJSON拿來直接用的,可是看了才知道,jQuery的ajax方法都混合到一起了,想剝落下來也不是一件容易的事。
慶幸的是我還懂一點(diǎn)JavaScript,經(jīng)過我的加工與修改,下面的例子已經(jīng)可以正常使用。詳細(xì)的可以查看注釋。
以下是代碼片段:
(function() {
var cross = {
//設(shè)置一個(gè)隨機(jī)的callback函數(shù)..防止跟其他的全局函數(shù)重名
callback : 'cross' + parseInt(Math.random()*1000),
init : function() {
this.getJSON('http://to.ly/api.php?json=1&longurl='+encodeURIComponent('http://www.skiyo.cn/'), function(data){
alert(data.shorturl);
});
},
getJSON : function(url, callback) {
var c = this.callback;
url = url + "&callback=" + c;
// Handle JSONP-style loading
//將函數(shù)名設(shè)置為window的一個(gè)方法,這樣此方法就是全局的了.
window[ c ] = window[ c ] || function( data ) {
//調(diào)用匿名函數(shù)
callback(data);
// Garbage collect
window[ c ] = undefined;
try {
delete window[ c ];
} catch(e) {}
if ( head ) {
head.removeChild( script );
}
};
var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
script.src = url;
// Handle Script loading
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if ( !done && (!this.readyState
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
head.insertBefore( script, head.firstChild );
},
};
//go
cross.init();
})();
總結(jié)
到此這篇關(guān)于jQuery中g(shù)etJSON跨域原理的文章就介紹到這了,更多相關(guān)jQuery getJSON跨域原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JQuery判斷radio(單選框)是否選中和獲取選中值方法總結(jié)
這篇文章主要介紹了JQuery判斷radio(單選框)是否選中和獲取選中值方法總結(jié),本文講解了利用獲取選中值判斷選中、使用checked屬性判斷選中、jquery獲取radio單選按鈕的值、獲取一組radio被選中項(xiàng)的值、設(shè)置單選按鈕被選中等內(nèi)容,需要的朋友可以參考下2015-04-04
jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jquery 注意事項(xiàng)與常用語法小結(jié)
jquery 注意事項(xiàng)與常用語法小結(jié),學(xué)習(xí)jquery的朋友最好收藏下。2010-06-06
jQuery圖片切換插件jquery.cycle.js使用示例
Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能,下面是它的一個(gè)非常不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-06-06
Jquery選擇器簡明版?Jquery選擇器實(shí)用版
最近需要用jquery獲取一些dom數(shù)據(jù)的操作,發(fā)現(xiàn)jquery的選擇器非常強(qiáng)大,很方便進(jìn)行一些dom操作,下面就專門針對(duì)這塊內(nèi)容做個(gè)簡單的介紹,需要的朋友可以參考下2023-05-05

