前幾天我在開(kāi)發(fā)一個(gè)工具的時(shí)候，其中有個(gè)功能就是獲取本頁(yè)面的短網(wǎng)址。

這個(gè)想法是好的，可是在我付諸于行動(dòng)的時(shí)候，發(fā)現(xiàn)這個(gè)需要跨域。

起初我的想法就是，跨域的最簡(jiǎn)單的方法就是增加一個(gè)script標(biāo)簽，因?yàn)閟cript標(biāo)簽是允許跨域的。

但是問(wèn)題又來(lái)了，對(duì)方的API返回的是個(gè)json對(duì)象，用script標(biāo)簽只能執(zhí)行，卻不能獲取到里面的東西，也就是說(shuō)返回的東西是不可控的。

隨后我就想到了jQuery中的getJSON的方法，學(xué)習(xí)了一下，沒(méi)想到里面的文章這么大。

jQuery非常聰明，他也意識(shí)到只靠script請(qǐng)求是無(wú)法接受到返回的東西的，所以他就設(shè)計(jì)了一個(gè)全局的callback函數(shù)，發(fā)送請(qǐng)求的時(shí)候把這個(gè)callback函數(shù)也傳進(jìn)去。

服務(wù)器判斷是否有這個(gè)callback函數(shù)，如果沒(méi)有就返回一個(gè)對(duì)象，如果有就返回一個(gè)函數(shù)名（對(duì)象）。

我們可以通過(guò)下面這個(gè)地址來(lái)看一下

http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn

大家可以打開(kāi)一下，結(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é)的小技巧，比如說(shuō)如何在匿名函數(shù)中設(shè)置一個(gè)全局函數(shù)，如何將這個(gè)全局函數(shù)變?yōu)槟涿瘮?shù)！

本來(lái)想直接把jQuery中的getJSON拿來(lái)直接用的，可是看了才知道，jQuery的ajax方法都混合到一起了，想剝落下來(lái)也不是一件容易的事。

慶幸的是我還懂一點(diǎn)JavaScript，經(jīng)過(guò)我的加工與修改，下面的例子已經(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論