专栏首页小皮咖带你实现一个 JSONP 实例

带你实现一个 JSONP 实例

JSONP 被用于跨域获取数据。在讲解它之前,先讲讲它与 JSON 之间的区别

什么是JSON?

JSON 是一种基于文本的数据交换方式,或者叫做数据描述格式。

其优点是:

1、基于纯文本,跨平台传递极其简单;

2、Javascript 原生支持,后台语言几乎全部支持;

3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4、可读性较强,虽然比不上 XML 那么一目了然,但在合理的依次缩进之后还是很容易识别的;

5、容易编写和解析,当然前提是你要知道数据结构;

JSON 的缺点当然也有,跨域无法获取数据,而 JSONP 的出现正好弥补了这一缺陷

什么是JSONP?

JSONP 是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议,其本质就是 js 文件。

JSONP的客户端具体实现

  1. Web页面上调用js文件时不受是否跨域的影响(不仅如此,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>
  2. 跨域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 的简洁描述,希望对你有帮助。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初探Java类型擦除

    本篇博客主要介绍了Java类型擦除的定义,详细的介绍了类型擦除在Java中所出现的场景。

    SH的全栈笔记
  • WebAssembly完全入门——了解wasm的前世今身

    接触WebAssembly之后,在google上看了很多资料。感觉对WebAssembly的使用、介绍、意义都说的比较模糊和笼统。感觉看了之后收获没有达到预期,...

    SH的全栈笔记
  • 你知道如何安全正确的关闭线程池吗?

    我们知道应用停机时需要释放资源,关闭连接,而对于一些定时任务或者网络请求服务会使用线程池,当应用停机时我们需要正确安全的关闭线程池,如果处理不当,可能造成数据丢...

    纯洁的微笑
  • javascrip基础:var,let和const区别在哪里

    虽然小编我主要工作时后端框架搭建,但空闲时候也经常捣鼓前端的东西,下面就分享一下入门基础知识,老鸟略过,废话也不多话,上代码之前先上概念,先理论后再实践是我一贯...

    用户4831957
  • Ethernaut WriteUp 更新到22题 Shop

    网上有几篇WP了,但是有的题目短缺,有的不够详细,有的POC,MagicNumber题目更新后是过不了的~~虽说我这里也不可能做到最详细,但是综合起来看的话,应...

    xuing
  • 【JS】382- JavaScript 模块化方案总结

    本文包含两部分,第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法,第二部分则根据实际问题指出在...

    pingan8787
  • 10分钟彻底搞懂前端页面性能监控

    前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigat...

    杂货铺老板
  • 聊聊nacos的ConfigDataChangeEvent

    nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/utils/event/Eve...

    codecraft
  • python 回调装饰器

    通过使用生成器和协程可以使得回调函数内联在某个函数中。 为了演示说明,假设你有如下所示的一个执行某种计算任务然后调用一个回调函数的函数(参考7.10小节):

    用户5760343
  • MySQL高可用工具—Orchestrator初识

    Orchestrator是一款开源的MySQL复制拓扑管理工具,采用go语言编写,支持MySQL主从复制拓扑关系的调整、支持MySQL主库故障自动切换、手动主从...

    用户1338460

扫码关注云+社区

领取腾讯云代金券