帶你實現一個 JSONP 實例

時間 2019-12-05

標籤實現一個 jsonp 實例欄目 JSON 简体版

原文原文鏈接

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

什麼是JSON？

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

其優勢是：java

一、基於純文本，跨平臺傳遞極其簡單；node

二、Javascript 原生支持，後臺語言幾乎所有支持；jquery

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

四、可讀性較強，雖然比不上 XML 那麼一目瞭然，但在合理的依次縮進以後仍是很容易識別的；ajax

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

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

什麼是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.js
const 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.js
localHandler({"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 中的數據。