JSONP原理及應用實例詳解

更新時間：2018年09月13日 14:43:42 作者：suporka

這篇文章主要介紹了JSONP原理及應用實例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

什么是JSON？

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

其優(yōu)點是：

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

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

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

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

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

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

什么是JSONP？

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

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

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

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

1.建立本地 web 服務器

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

npm install koa koa-static

新建 index.js 文件

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

2.新建 public 文件夾后進入文件夾，創(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)用，遠程js帶來的數(shù)據(jù)是：' + data.result);
  };
 </script>
 <script type="text/javascript" src="./somejsonp.js"></script>
</body>
</html>

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

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

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

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

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

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

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

具體示例

在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數(shù)據(jù)的，但img、iframe、script等標簽是個例外，這些標簽可以通過src屬性請求到其他服務器上的數(shù)據(jù)。而JSONP就是通過script節(jié)點中的src屬性調(diào)用跨域的請求。當我們通過JSONP模式請求跨域資源時，服務器返回給客戶端一段javascript代碼，這段javascript代碼自動調(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>
  //動態(tài)創(chuàng)建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');
  };
  //回調(diào)函數(shù),必須為全局，不然會報錯
  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');
//創(chuàng)建新的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');
  }
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務器啟動成功
console.log('Server running!');

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