jsonp格式前端發(fā)送和后臺(tái)接收的示例分析

這篇文章主要介紹了jsonp格式前端發(fā)送和后臺(tái)接收的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

什么是JSONP？

先說說JSONP是怎么產(chǎn)生的：

其實(shí)網(wǎng)上關(guān)于JSONP的講解有很多，但卻千篇一律，而且云里霧里，對(duì)于很多剛接觸的人來講理解起來有些困難，小可不才，試著用自己的方式來闡釋一下這個(gè)問題，看看是否有幫助。

1、一個(gè)眾所周知的問題，Ajax直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問的問題，甭管你是靜態(tài)頁(yè)面、動(dòng)態(tài)網(wǎng)頁(yè)、web服務(wù)、WCF，只要是跨域請(qǐng)求，一律不準(zhǔn)；

2、不過我們又發(fā)現(xiàn)，Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；

3、于是可以判斷，當(dāng)前階段如果想通過純web端（ActiveX控件、服務(wù)端代理、HTML5之Websocket等方式不算）跨域訪問數(shù)據(jù)就只有一種可能，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里，供客戶端調(diào)用和進(jìn)一步處理；

4、恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)；

5、這樣子解決方案就呼之欲出了，web客戶端通過與調(diào)用腳本一模一樣的方式，來調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件（一般以JSON為后綴），顯而易見，服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件，目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。

6、客戶端在對(duì)JSON文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了，這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像AJAX，但其實(shí)并不一樣。

7、為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。

什么是JSON？

前面簡(jiǎn)單說了一下，JSON是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式，你是否該選用他首先肯定要關(guān)注它所擁有的優(yōu)點(diǎn)。

JSON的優(yōu)點(diǎn)：

1、基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單；

2、Javascript原生支持，后臺(tái)語(yǔ)言幾乎全部支持；

3、輕量級(jí)數(shù)據(jù)格式，占用字符數(shù)量極少，特別適合互聯(lián)網(wǎng)傳遞；

4、可讀性較強(qiáng)，雖然比不上XML那么一目了然，但在合理的依次縮進(jìn)之后還是很容易識(shí)別的；

5、容易編寫和解析，當(dāng)然前提是你要知道數(shù)據(jù)結(jié)構(gòu)；

JSON的缺點(diǎn)當(dāng)然也有，但在作者看來實(shí)在是無(wú)關(guān)緊要的東西，所以不再單獨(dú)說明。

好了，回歸正題，

jsonp是ajax提交的一種格式不會(huì)受跨域限制

一.前端發(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)會(huì)給你加上""變成字符串但是不會(huì)當(dāng)成變量
      },         //字典后面value有''為字符串,沒有為變量
      success: function (data) {
        console.log(data);
      }
    });
  }
</script>

二.后臺(tái)接受

#我就拿python舉例,其他也大同小異
from django.shortcuts import render,HttpResponse,redirect
def test(request):
  callback=request.GET.get('callback')
  print(dict(request.GET)) #傳過來的內(nèi)容他會(huì)打散,具體的自己看一下就知道
  
  #注意點(diǎn)返回的字符串必須是 'callback+("返回的字符串")' 這樣的一個(gè)字符串,不然前端不會(huì)接收
  return HttpResponse(callback+'("ok")')

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jsonp格式前端發(fā)送和后臺(tái)接收的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!