博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
带你实现一个 JSONP 实例
阅读量:5901 次
发布时间:2019-06-19

本文共 1359 字,大约阅读时间需要 4 分钟。

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.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  
Document
// 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

  
Document

jquery 动态生成script标签,并定义好方法。前提是jsonpCallback的方法名与引入的js文件方法名一致。

重新刷新页面即可看到弹出框中获取的 jsonp 中的数据。

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

以上就是对于 JSONP 的简洁描述,希望对你有帮助。

转载地址:http://mnesx.baihongyu.com/

你可能感兴趣的文章
Android介绍以及源码编译---Android源码下载
查看>>
SpringBoot集成redis缓存
查看>>
sql经典语句
查看>>
使用ffmpeg实现对h264视频解码 -- (实现了一个易于使用的c++封装库)
查看>>
第4周作业-面向对象设计与继承
查看>>
机器学习的原理
查看>>
flink watermark介绍
查看>>
[Flink原理介绍第四篇】:Flink的Checkpoint和Savepoint介绍
查看>>
mybatis学习之一 开发环境配置和接口编程
查看>>
Android Xutils 框架
查看>>
C#基础知识整理 基础知识(21) 委托(二)
查看>>
Android应用程序键盘(Keyboard)消息处理机制分析(16)
查看>>
Sysbench 0.5版安装配置
查看>>
统一沟通-技巧-11-Lync-联盟-无法-音频-远程桌面-传文件
查看>>
书摘—你不可不知的心理策略
查看>>
【博客话题】毕业——开始人生的艰苦历程
查看>>
2014.7.30-8.3日广大网友的提问解答(答问题的第2个工作周)
查看>>
Powershell管理系列(二十五)PowerShell操作之获取AD账号及邮箱信息
查看>>
Linux安装telnet
查看>>
【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...
查看>>