JSONP原理及簡(jiǎn)單實(shí)現(xiàn)
在web2.0時(shí)代,熟練的使用ajax是每個(gè)前端攻城師必備的技能。然而由于受到瀏覽器的限制,ajax不允許跨域通信。
JSONP就是目前主流的實(shí)現(xiàn)跨域通信的解決方案。
雖然在在jquery中,我們可以通過$.ajax的dataType設(shè)置為jsonp來調(diào)用jsonp,但是jsonp和ajax的實(shí)現(xiàn)原理一個(gè)關(guān)系都木有。jsonp主要是通過script可以鏈接遠(yuǎn)程url來實(shí)現(xiàn)跨域請(qǐng)求的。如:
<script src="http://jsonp.js?callback=xxx"></script>
callback定義了一個(gè)函數(shù)名,而遠(yuǎn)程服務(wù)端通過調(diào)用指定的函數(shù)并傳入?yún)?shù)來實(shí)現(xiàn)傳遞參數(shù)。
搜索了網(wǎng)上好多文章,他們實(shí)現(xiàn)方法都過于簡(jiǎn)單,要實(shí)際應(yīng)用還要多加修改,我在這里封裝了一個(gè)對(duì)象,可以直接運(yùn)用于實(shí)際操作。
var JSONP = { // 獲取當(dāng)前時(shí)間戳 now: function() { return (new Date()).getTime(); }, // 獲取16位隨機(jī)數(shù) rand: function() { return Math.random().toString().substr(2); }, // 刪除節(jié)點(diǎn)元素 removeElem: function(elem) { var parent = elem.parentNode; if(parent && parent.nodeType !== 11) { parent.removeChild(elem); } }, // url組裝 parseData: function(data) { var ret = ""; if(typeof data === "string") { ret = data; } else if(typeof data === "object") { for(var key in data) { ret += "&" + key + "=" + encodeURIComponent(data[key]); } } // 加個(gè)時(shí)間戳,防止緩存 ret += "&_time=" + this.now(); ret = ret.substr(1); return ret; }, getJSON: function(url, data, func) { // 函數(shù)名稱 var name; // 拼裝url url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data); // 檢測(cè)callback的函數(shù)名是否已經(jīng)定義 var match = /callback=(\w+)/.exec(url); if(match && match[1]) { name = match[1]; } else { // 如果未定義函數(shù)名的話隨機(jī)成一個(gè)函數(shù)名 // 隨機(jī)生成的函數(shù)名通過時(shí)間戳拼16位隨機(jī)數(shù)的方式,重名的概率基本為0 // 如:jsonp_1355750852040_8260732076596469 name = "jsonp_" + this.now() + '_' + this.rand(); // 把callback中的?替換成函數(shù)名 url = url.replace("callback=?", "callback="+name); // 處理?被encode的情況 url = url.replace("callback=%3F", "callback="+name); } // 創(chuàng)建一個(gè)script元素 var script = document.createElement("script"); script.type = "text/javascript"; // 設(shè)置要遠(yuǎn)程的url script.src = url; // 設(shè)置id,為了后面可以刪除這個(gè)元素 script.id = "id_" + name; // 把傳進(jìn)來的函數(shù)重新組裝,并把它設(shè)置為全局函數(shù),遠(yuǎn)程就是調(diào)用這個(gè)函數(shù) window[name] = function(json) { // 執(zhí)行這個(gè)函數(shù)后,要銷毀這個(gè)函數(shù) window[name] = undefined; // 獲取這個(gè)script的元素 var elem = document.getElementById("id_" + name); // 刪除head里面插入的script,這三步都是為了不影響污染整個(gè)DOM啊 JSONP.removeElem(elem); // 執(zhí)行傳入的的函數(shù) func(json); }; // 在head里面插入script元素 var head = document.getElementsByTagName("head"); if(head && head[0]) { head[0].appendChild(script); } } };
實(shí)現(xiàn)過程基本寫在注釋里啦,自己看。調(diào)用的方法跟jQuery基本一樣。如:
var data = { from: "北京", count: 27, output: "json", callback: "?" } JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});
當(dāng)然要這么寫也行:
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});
至于服務(wù)端的實(shí)現(xiàn),那就比較簡(jiǎn)單了,以php為例:
$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback'; echo $callback.'( .json_encode( $data ).')';
ajax與jsonp的異同再做一些補(bǔ)充說明:
1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來”很像,目的也一樣,都是請(qǐng)求一個(gè)url,然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理,因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝;
2、但ajax和jsonp其實(shí)本質(zhì)上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁(yè)內(nèi)容,而jsonp的核心則是動(dòng)態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js腳本。
3、所以說,其實(shí)ajax與jsonp的區(qū)別不在于是否跨域,ajax通過服務(wù)端代理一樣可以實(shí)現(xiàn)跨域,jsonp本身也不排斥同域的數(shù)據(jù)的獲取。
4、還有就是,jsonp是一種方式或者說非強(qiáng)制性協(xié)議,如同ajax一樣,它也不一定非要用json格式來傳遞數(shù)據(jù),如果你愿意,字符串都行,只不過這樣不利于用jsonp提供公開服務(wù)。
總而言之,jsonp不是ajax的一個(gè)特例,哪怕jquery等巨頭把jsonp封裝進(jìn)了ajax,也不能改變這一點(diǎn)!
好了,寫完了,有什么問題歡迎討論。
相關(guān)文章
antDesign 自定義分頁(yè)樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了antDesign 自定義分頁(yè)樣式的實(shí)現(xiàn)代碼,這里用到了自定義指令,如果大家用不到可以按照自己的實(shí)際效果開發(fā),本文通過實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10javaScript Array(數(shù)組)相關(guān)方法簡(jiǎn)述
javaScript Array(數(shù)組)相關(guān)方法簡(jiǎn)述,讓大家更快的熟悉array數(shù)組的用法。2009-07-07JS關(guān)閉子窗口并且刷新上一個(gè)窗口的實(shí)現(xiàn)示例
這篇文章主要介紹了JS關(guān)閉子窗口并且刷新上一個(gè)窗口的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03小程序?qū)崿F(xiàn)人臉識(shí)別的項(xiàng)目實(shí)踐
人臉識(shí)別在現(xiàn)在很多地方都可以用的到,例如支付,解鎖等,本文就來介紹一下小程序?qū)崿F(xiàn)人臉識(shí)別,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10ES6 Object方法擴(kuò)展的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Object方法擴(kuò)展的應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了ES6針對(duì)對(duì)象方法的擴(kuò)展與優(yōu)化,需要的朋友可以參考下2019-06-06基于 Bootstrap Datetimepicker 聯(lián)動(dòng)
這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動(dòng)效果,需要的朋友可以參考下2017-08-08微信小程序?qū)崿F(xiàn)打開內(nèi)置地圖功能【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開內(nèi)置地圖功能,涉及微信小程序使用wx.openLocation函數(shù)獲取經(jīng)緯度信息的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12關(guān)于layui的動(dòng)態(tài)圖標(biāo)不顯示的解決方法
今天小編就為大家分享一篇關(guān)于layui的動(dòng)態(tài)圖標(biāo)不顯示的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09