前幾天我在開發一個工具的時候，其中有個功能就是獲取本頁面的短網址。
這個想法是好的，可是在我付諸于行動的時候，發現這個需要跨域。
起初我的想法就是，跨域的最簡單的方法就是增加一個script標簽，因為script標簽是允許跨域的。
但是問題又來了，對方的API返回的是個json對象，用script標簽只能執行，卻不能獲取到里面的東西，也就是說返回的東西是不可控的。
隨后我就想到了jQuery中的getJSON的方法，學習了一下，沒想到里面的文章這么大。
jQuery非常聰明，他也意識到只靠script請求是無法接受到返回的東西的，所以他就設計了一個全局的callback函數，發送請求的時候把這個callback函數也傳進去。
服務器判斷是否有這個callback函數，如果沒有就返回一個對象，如果有就返回一個函數名（對象）。
我們可以通過下面這個地址來看一下
http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn
大家可以打開一下，結果返回的是一個json對象。
如果我加上callback參數
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}) |
傳入的也正好是函數名。
這個想法很不錯，缺點就是對方服務器必須是可控的。
大方向是這個的，但是還有一些細節的小技巧，比如說如何在匿名函數中設置一個全局函數，如何將這個全局函數變為匿名函數！
本來想直接把jQuery中的getJSON拿來直接用的，可是看了才知道，jQuery的ajax方法都混合到一起了，想剝落下來也不是一件容易的事。
慶幸的是我還懂一點JavaScript，經過我的加工與修改，下面的例子已經可以正常使用。詳細的可以查看注釋。
以下是代碼片段：
|
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 = { //設置一個隨機的callback函數..防止跟其他的全局函數重名 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 //將函數名設置為window的一個方法,這樣此方法就是全局的了. window[ c ] = window[ c ] || function( data ) { //調用匿名函數 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();})(); |
總結
到此這篇關于jQuery中getJSON跨域原理的文章就介紹到這了,更多相關jQuery getJSON跨域原理內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blogread.cn/it/article/1710
