JSONP原理及應用實例詳解

2019-11-19 12:56:51

字體：大中小

來源：轉載

供稿：網友

JSONP 被用于跨域獲取數據。在講解它之前，先講講它與 JSON 之間的區別

什么是JSON？

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

其優點是：

1、基于純文本，跨平臺傳遞極其簡單；

2、Javascript 原生支持，后臺語言幾乎全部支持；

3、輕量級數據格式，占用字符數量極少，特別適合互聯網傳遞；

4、可讀性較強，雖然比不上 XML 那么一目了然，但在合理的依次縮進之后還是很容易識別的；

5、容易編寫和解析，當然前提是你要知道數據結構；

JSON 的缺點當然也有，跨域無法獲取數據，而 JSONP 的出現正好彌補了這一缺陷

什么是JSONP？

JSONP 是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議，其本質就是 js 文件。

JSONP的客戶端具體實現

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

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

1.建立本地 web 服務器

新建文件夾 jsonp, 進入該文件夾內打開命令行工具

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 文件夾后進入文件夾，創建 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('我是本地函數，可以被跨域的remote.js文件調用，遠程js帶來的數據是：' + data.result);  }; </script> <script type="text/javascript" src="./somejsonp.js"></script></body></html>

// somejsonp.jslocalHandler({"result":"我是遠程js帶來的數據"});

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

動態獲取 JSONP 的數據，就是在頁面中動態插入一段script標簽，scr中包含路徑及參數，這樣后臺可根據參數動態生成JS文件，涉及后臺實現，這里不做過多闡述。

JSONP 在 JQuery 中的具體實現

jquery 中對于 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 動態生成script標簽，并定義好方法。前提是jsonpCallback的方法名與引入的js文件方法名一致。

重新刷新頁面即可看到彈出框中獲取的 jsonp 中的數據。

簡單描述就是――先定義一個方法，然后引入外部JS調用這個方法并攜帶數據。

具體示例

在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數據的，但img、iframe、script等標簽是個例外，這些標簽可以通過src屬性請求到其他服務器上的數據。而JSONP就是通過script節點中的src屬性調用跨域的請求。當我們通過JSONP模式請求跨域資源時，服務器返回給客戶端一段javascript代碼，這段javascript代碼自動調用客戶端回調函數。

前端

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

搭建node server

//告訴Node.js引入http模塊給該服務器應用使用var http = require('http');//引入url模塊解析url字符串var url = require('url');//引入querystring模塊處理query字符串var querystring = require('querystring');//創建新的HTTP服務器var server = http.createServer();//通過request事件來響應request請求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');  }});//監聽8080端口server.listen('8080');//用于提示我們服務器啟動成功console.log('Server running!');

運行node server之后，在瀏覽器打開上面所寫的html頁面，運行結果為：