jQuery中g(shù)etJSON跨域原理的深入講解
前幾天我在開發(fā)一個工具的時候,其中有個功能就是獲取本頁面的短網(wǎng)址。
這個想法是好的,可是在我付諸于行動的時候,發(fā)現(xiàn)這個需要跨域。
起初我的想法就是,跨域的最簡單的方法就是增加一個script標簽,因為script標簽是允許跨域的。
但是問題又來了,對方的API返回的是個json對象,用script標簽只能執(zhí)行,卻不能獲取到里面的東西,也就是說返回的東西是不可控的。
隨后我就想到了jQuery中的getJSON的方法,學(xué)習(xí)了一下,沒想到里面的文章這么大。
jQuery非常聰明,他也意識到只靠script請求是無法接受到返回的東西的,所以他就設(shè)計了一個全局的callback函數(shù),發(fā)送請求的時候把這個callback函數(shù)也傳進去。
服務(wù)器判斷是否有這個callback函數(shù),如果沒有就返回一個對象,如果有就返回一個函數(shù)名(對象)。
我們可以通過下面這個地址來看一下
http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn
大家可以打開一下,結(jié)果返回的是一個json對象。
如果我加上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ù)名。
這個想法很不錯,缺點就是對方服務(wù)器必須是可控的。
大方向是這個的,但是還有一些細節(jié)的小技巧,比如說如何在匿名函數(shù)中設(shè)置一個全局函數(shù),如何將這個全局函數(shù)變?yōu)槟涿瘮?shù)!
本來想直接把jQuery中的getJSON拿來直接用的,可是看了才知道,jQuery的ajax方法都混合到一起了,想剝落下來也不是一件容易的事。
慶幸的是我還懂一點JavaScript,經(jīng)過我的加工與修改,下面的例子已經(jīng)可以正常使用。詳細的可以查看注釋。
以下是代碼片段:
(function() {
var cross = {
//設(shè)置一個隨機的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的一個方法,這樣此方法就是全局的了.
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JQuery判斷radio(單選框)是否選中和獲取選中值方法總結(jié)
這篇文章主要介紹了JQuery判斷radio(單選框)是否選中和獲取選中值方法總結(jié),本文講解了利用獲取選中值判斷選中、使用checked屬性判斷選中、jquery獲取radio單選按鈕的值、獲取一組radio被選中項的值、設(shè)置單選按鈕被選中等內(nèi)容,需要的朋友可以參考下2015-04-04
jquery實現(xiàn)全選功能效果的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query實現(xiàn)全選功能效果的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery圖片切換插件jquery.cycle.js使用示例
Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能,下面是它的一個非常不錯的示例,大家可以學(xué)習(xí)下2014-06-06

