带你实现一个 JSONP 实例

程序牛0314

于 2020-12-27 16:16:22 发布

阅读量253

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_53592673/article/details/111816477

版权

本文介绍了JSON和JSONP的区别，重点讲解了JSONP的工作原理及其在Web页面上的实现，包括如何使用JavaScript动态创建script标签来获取跨域数据，以及在jQuery中如何封装和使用JSONP。

摘要由CSDN通过智能技术生成

带你实现一个 JSONP 实例

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

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

其优点是：

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

2、Javascript 原生支持，后台语言几乎全部支持；

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

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

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

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

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

JSONP的客户端具体实现
Web页面上调用js文件时不受是否跨域的影响（不仅如此，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如

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 文件夹后进入文件夹，创建 in

关注