资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/带你实现一个 JSONP 实例

带你实现一个 JSONP 实例

verano / 1692人阅读

摘要：前提是的方法名与引入的文件方法名一致。简单描述就是先定义一个方法，然后引入外部调用这个方法并携带数据。

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

什么是JSON？

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

其优点是：

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

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

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

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

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

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

什么是JSONP？

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

JSONP的客户端具体实现

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

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




  
  
  
  Document

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

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

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

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

混合云 私有云 只运行一个实例 又一个典型实例 带你学c带你飞 js 实例化一个数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97751.html

相关文章

  • javasscript - 收藏集 - 掘金

    摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

    Rango 评论0 收藏0

  • 一篇文章带你了解http/https

    摘要：基础，超文本传输协议。不验证通信方的身份，通信方的身份有可能遭遇伪装。无法证明报文的完整性，报文有可能遭篡改。多路复用，支持单个连接多次请求，即连接共享，即每一个都是是用作连接共享机制的。 走在前端的大道上 本篇将自己读过的相关 http/https 方法 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。 Web 基础 HTTP（HyperText...

    2bdenny 评论0 收藏0

  • 原生JavaScript实现AJAX、JSONP

    摘要：在这里讲解一下用原生如何实现。当然，前面也说过，你可以给定固定回调函数名最后我已经将和请求合并在一起了，下载链接原文链接原生实现如有问题，欢迎在下方留言 相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。 其实，原生JavaScript...

    xcc3641 评论0 收藏0

  • fetch使用的常见问题及其解决办法

    首先声明一下，本文不是要讲解fetch的具体用法，不清楚的可以参考MDN fetch教程。 引言 说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： f...

    pubdreamcc 评论0 收藏0

发表评论

登陆后可评论

0条评论

verano

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<