這篇文章主要介紹了jsonp格式前端發(fā)送和后臺接收的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)是專業(yè)的通化縣網(wǎng)站建設(shè)公司,通化縣接單;提供網(wǎng)站設(shè)計、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行通化縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
什么是JSONP?
先說說JSONP是怎么產(chǎn)生的:
其實網(wǎng)上關(guān)于JSONP的講解有很多,但卻千篇一律,而且云里霧里,對于很多剛接觸的人來講理解起來有些困難,小可不才,試著用自己的方式來闡釋一下這個問題,看看是否有幫助。
1、一個眾所周知的問題,Ajax直接請求普通文件存在跨域無權(quán)限訪問的問題,甭管你是靜態(tài)頁面、動態(tài)網(wǎng)頁、web服務(wù)、WCF,只要是跨域請求,一律不準(zhǔn);
2、不過我們又發(fā)現(xiàn),Web頁面上調(diào)用js文件時則不受是否跨域的影響(不僅如此,我們還發(fā)現(xiàn)凡是擁有"src"這個屬性的標(biāo)簽都擁有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判斷,當(dāng)前階段如果想通過純web端(ActiveX控件、服務(wù)端代理、HTML5之Websocket等方式不算)跨域訪問數(shù)據(jù)就只有一種可能,那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進js格式的文件里,供客戶端調(diào)用和進一步處理;
4、恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡潔的描述復(fù)雜數(shù)據(jù),更妙的是JSON還被js原生支持,所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù);
5、這樣子解決方案就呼之欲出了,web客戶端通過與調(diào)用腳本一模一樣的方式,來調(diào)用跨域服務(wù)器上動態(tài)生成的js格式文件(一般以JSON為后綴),顯而易見,服務(wù)器之所以要動態(tài)生成JSON文件,目的就在于把客戶端需要的數(shù)據(jù)裝入進去。
6、客戶端在對JSON文件調(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進行處理和展現(xiàn)了,這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像AJAX,但其實并不一樣。
7、為了便于客戶端使用數(shù)據(jù),逐漸形成了一種非正式傳輸協(xié)議,人們把它稱作JSONP,該協(xié)議的一個要點就是允許用戶傳遞一個callback參數(shù)給服務(wù)端,然后服務(wù)端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)了。
什么是JSON?
前面簡單說了一下,JSON是一種基于文本的數(shù)據(jù)交換方式,或者叫做數(shù)據(jù)描述格式,你是否該選用他首先肯定要關(guān)注它所擁有的優(yōu)點。
JSON的優(yōu)點:
1、基于純文本,跨平臺傳遞極其簡單;
2、Javascript原生支持,后臺語言幾乎全部支持;
3、輕量級數(shù)據(jù)格式,占用字符數(shù)量極少,特別適合互聯(lián)網(wǎng)傳遞;
4、可讀性較強,雖然比不上XML那么一目了然,但在合理的依次縮進之后還是很容易識別的;
5、容易編寫和解析,當(dāng)然前提是你要知道數(shù)據(jù)結(jié)構(gòu);
JSON的缺點當(dāng)然也有,但在作者看來實在是無關(guān)緊要的東西,所以不再單獨說明。
好了,回歸正題,
jsonp是ajax提交的一種格式不會受跨域限制
一.前端發(fā)送
<button>11111</button> <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> <script> document.querySelector('button').onclick = function () { $.ajax({ url: 'http://localhost:8000/test', type: 'get', dataType: 'jsonp', data: { //注意內(nèi)容必須為字典 aaa:aaa //字典里內(nèi)容前面key可以不加"",默認(rèn)會給你加上""變成字符串但是不會當(dāng)成變量 }, //字典后面value有''為字符串,沒有為變量 success: function (data) { console.log(data); } }); } </script>
二.后臺接受
#我就拿python舉例,其他也大同小異 from django.shortcuts import render,HttpResponse,redirect def test(request): callback=request.GET.get('callback') print(dict(request.GET)) #傳過來的內(nèi)容他會打散,具體的自己看一下就知道 #注意點返回的字符串必須是 'callback+("返回的字符串")' 這樣的一個字符串,不然前端不會接收 return HttpResponse(callback+'("ok")')
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“jsonp格式前端發(fā)送和后臺接收的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
網(wǎng)頁名稱:jsonp格式前端發(fā)送和后臺接收的示例分析
分享地址:http://muchs.cn/article22/gesgcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、手機網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)