JSONP原理及應(yīng)用實(shí)例詳解

2019-11-19 12:56:51

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

JSONP 被用于跨域獲取數(shù)據(jù)。在講解它之前，先講講它與 JSON 之間的區(qū)別

什么是JSON？

JSON 是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式。

其優(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、容易編寫(xiě)和解析，當(dāng)然前提是你要知道數(shù)據(jù)結(jié)構(gòu)；

JSON 的缺點(diǎn)當(dāng)然也有，跨域無(wú)法獲取數(shù)據(jù)，而 JSONP 的出現(xiàn)正好彌補(bǔ)了這一缺陷

什么是JSONP？

JSONP 是一種依靠開(kāi)發(fā)人員的聰明才智創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議，其本質(zhì)就是 js 文件。

JSONP的客戶端具體實(shí)現(xiàn)

Web頁(yè)面上調(diào)用js文件時(shí)不受是否跨域的影響（不僅如此，凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）
跨域js文件中的代碼（當(dāng)然指符合web腳本安全策略的），web頁(yè)面也是可以無(wú)條件執(zhí)行的。

接下來(lái)將以具體實(shí)例解釋 JSONP 的原理，首先確保你的電腦上安裝了nodejs

1.建立本地 web 服務(wù)器

新建文件夾 jsonp, 進(jìn)入該文件夾內(nèi)打開(kāi)命令行工具

npm install koa koa-static

新建 index.js 文件

// index.jsconst Koa = require('koa')const app = new Koa()app.use(require('koa-static')(__dirname + '/public'))app.listen(3000)

2.新建 public 文件夾后進(jìn)入文件夾，創(chuàng)建 index.html, somejsonp.js文件

// index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script>  var localHandler = function(data){   alert('我是本地函數(shù)，可以被跨域的remote.js文件調(diào)用，遠(yuǎn)程js帶來(lái)的數(shù)據(jù)是：' + data.result);  }; </script> <script type="text/javascript" src="./somejsonp.js"></script></body></html>

// somejsonp.jslocalHandler({"result":"我是遠(yuǎn)程js帶來(lái)的數(shù)據(jù)"});

3.然后回到 jsonp 文件夾，輸入命令node index.js后，用瀏覽器打開(kāi)http://localhost:3000即可看到瀏覽器窗口彈出js文件中的result，也就是我們獲取到了js的數(shù)據(jù)。這便是jsonp的基本原理。

動(dòng)態(tài)獲取 JSONP 的數(shù)據(jù)，就是在頁(yè)面中動(dòng)態(tài)插入一段script標(biāo)簽，scr中包含路徑及參數(shù)，這樣后臺(tái)可根據(jù)參數(shù)動(dòng)態(tài)生成JS文件，涉及后臺(tái)實(shí)現(xiàn)，這里不做過(guò)多闡述。

JSONP 在 JQuery 中的具體實(shí)現(xiàn)

jquery 中對(duì)于 jsonp 的封裝也是基于以上原理，下面是基于 jquery 的代碼

修改index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script>  $.ajax({    url: 'http://localhost:3000/somejsonp.js',    dataType: "jsonp",    jsonp: "callback",    jsonpCallback: "localHandler",    success: function (data) {     alert(data.result)    }  })  </script></body></html>

jquery 動(dòng)態(tài)生成script標(biāo)簽，并定義好方法。前提是jsonpCallback的方法名與引入的js文件方法名一致。

重新刷新頁(yè)面即可看到彈出框中獲取的 jsonp 中的數(shù)據(jù)。

簡(jiǎn)單描述就是――先定義一個(gè)方法，然后引入外部JS調(diào)用這個(gè)方法并攜帶數(shù)據(jù)。

具體示例

在同源策略下，在某個(gè)服務(wù)器下的頁(yè)面是無(wú)法獲取到該服務(wù)器以外的數(shù)據(jù)的，但img、iframe、script等標(biāo)簽是個(gè)例外，這些標(biāo)簽可以通過(guò)src屬性請(qǐng)求到其他服務(wù)器上的數(shù)據(jù)。而JSONP就是通過(guò)script節(jié)點(diǎn)中的src屬性調(diào)用跨域的請(qǐng)求。當(dāng)我們通過(guò)JSONP模式請(qǐng)求跨域資源時(shí)，服務(wù)器返回給客戶端一段javascript代碼，這段javascript代碼自動(dòng)調(diào)用客戶端回調(diào)函數(shù)。

前端

<!DOCTYPE html><head>  <title>jsonp</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head><body><script>  //動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并請(qǐng)求  function addScriptTag(src){    var script = document.createElement('script');    script.setAttribute('type', 'text/javascript');    script.src = src;    document.body.appendChild(script);  };  //在onload后，跨域請(qǐng)求  window.onload = function(){    addScriptTag('http://127.0.0.1:8080/jsonp?callback=test');  };  //回調(diào)函數(shù),必須為全局，不然會(huì)報(bào)錯(cuò)  function test(data){    alert(data.name);  };</script></body></html>

搭建node server

//告訴Node.js引入http模塊給該服務(wù)器應(yīng)用使用var http = require('http');//引入url模塊解析url字符串var url = require('url');//引入querystring模塊處理query字符串var querystring = require('querystring');//創(chuàng)建新的HTTP服務(wù)器var server = http.createServer();//通過(guò)request事件來(lái)響應(yīng)request請(qǐng)求server.on('request',function(req, res){  var urlPath = url.parse(req.url).pathname;  var qs = querystring.parse(req.url.split('?')[1]);  if(urlPath === '/jsonp' && qs.callback){    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});    var data = {      "name": "Monkey"    };    data = JSON.stringify(data);    var callback = qs.callback+'('+data+');';    res.end(callback);  }  else{    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});    res.end('Hell World/n');  }});//監(jiān)聽(tīng)8080端口server.listen('8080');//用于提示我們服務(wù)器啟動(dòng)成功console.log('Server running!');

運(yùn)行node server之后，在瀏覽器打開(kāi)上面所寫(xiě)的html頁(yè)面，運(yùn)行結(jié)果為：