前幾天我在開(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
大家可以看到返回的是
|
1
|
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ì)的可以查看注釋。
以下是代碼片段：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
(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)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blogread.cn/it/article/1710
