JSONP原理及应用实例详解


Posted in Javascript onSeptember 13, 2018

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

什么是JSON?

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

其优点是:

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

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

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

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

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

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

什么是JSONP?

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

JSONP的客户端具体实现

  • Web页面上调用js文件时不受是否跨域的影响(不仅如此,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)
  • 跨域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调用这个方法并携带数据。

具体示例

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

前端

<!DOCTYPE html>
<head>
  <title>jsonp</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
  //动态创建script标签,并请求
  function addScriptTag(src){
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.src = src;
    document.body.appendChild(script);
  };
  //在onload后,跨域请求
  window.onload = function(){
    addScriptTag('http://127.0.0.1:8080/jsonp?callback=test');
  };
  //回调函数,必须为全局,不然会报错
  function test(data){
    alert(data.name);
  };
</script>
</body>
</html>

搭建node server

//告诉Node.js引入http模块给该服务器应用使用
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  var qs = querystring.parse(req.url.split('?')[1]);
  if(urlPath === '/jsonp' && qs.callback){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    var callback = qs.callback+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');
  }
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

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

JSONP原理及应用实例详解

以上就是对于 JSONP 的简洁描述,希望对你有帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js显示当前日期时间和星期几
Oct 22 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
javascript中UMD规范的代码推演
Aug 29 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 #Javascript
javascript将非数值转换为数值
Sep 13 #Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 #Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 #Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 #Javascript
详解react内联样式使用webpack将px转rem
Sep 13 #Javascript
详解webpack 热更新优化
Sep 13 #Javascript
You might like
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
JavaScript与函数式编程解释
2007/04/27 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
项目管理计划书
2014/01/09 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
执行力心得体会范文
2016/01/11 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python