带你实现一个 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 中的数据。

简单描述就是——先定义一个方法，而后引入外部JS调用这个方法并携带数据。

以上就是对于 JSONP 的简洁描述，但愿对你有帮助。