JSONP原理及应用实例详解

前端之家收集整理的这篇文章主要介绍了JSONP原理及应用实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

什么是JSON?

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

其优点是:

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

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

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

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

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

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

什么是JSONP?

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

JSONP的客户端具体实现

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

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

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

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

具体示例

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。 而JSONP就是通过script节点中的src属性调用跨域的请求。当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客户端回调函数

前端

jsonp <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

搭建node server

提示我们服务器启动成功 console.log('Server running!');

运行node server之后,在浏览器打开上面所写的html页面,运行结果为:

以上就是对于 JSONP 的简洁描述,希望对你有帮助。也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章