JSONP原理及应用实例详解

2024-11-26 11:49:43

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 的简洁描述，希望对你有帮助。也希望大家多多支持我们。

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应
JSONP原理及应用实例详解

JSONP 被用于跨域获取数据.在讲解它之前,先讲讲它与 JSON 之间的区别什么是JSON? JSON 是一种基于文本的数据交换方式,或者叫做数据描述格式. 其优点是: 1.基于纯文本,跨平台传递极其简单: 2.Javascript 原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强,虽然比不上 XML 那么一目了然,但在合理的依次缩进之后还是很容易识别的: 5.容易编写和解析,当然前提是你要知道数据结构: JSON 的缺点当然也有,
JSONP跨域请求实例详解

JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON
Java设计模式之策略模式原理与用法实例详解

本文实例讲述了Java设计模式之策略模式原理与用法.分享给大家供大家参考,具体如下: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化.其中JDK里面的TreeSet类和TreeMap类就用到了策略模式.这两个类是带排序的集合类,其中排序的规则就相当于策略模式里定义的一系列算法,而集合类就相当于是策略模式里的环境类,供用户使用,用只知道TreeSet和TreeMap是带排序的,至于怎么排序的,是由排序的算法决定的. 策略模式
Java设计模式之装饰模式原理与用法实例详解

本文实例讲述了Java设计模式之装饰模式原理与用法.分享给大家供大家参考,具体如下: 装饰模式能在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象.JDK中IO的设计就用到了装饰模式,通过过滤流对节点流进行包装来实现功能的扩展. 装饰模式的角色的组成: ① 抽象构件(Component)角色:给出一个抽象接口,以规范准备接收附加工功能的对象.(InputStream.OutputStream) ② 具体构件(Concrete Co
Struts2拦截器Interceptor的原理与配置实例详解

一.Struts2拦截器原理: Struts2拦截器的实现原理相对简单,当请求struts2的action时,Struts 2会查找配置文件,并根据其配置实例化相对的拦截器对象,然后串成一个列表,最后一个一个地调用列表中的拦截器. 比如:应用要求用户登陆,且必须为指定用户名才可以查看系统中某个视图资源:否则,系统直接转入登陆页面.对于上面的需求,可以在每个Action的执行实际处理逻辑之前,先执行权限检查逻辑,但这种做法不利于代码复用.因为大部分Action里的权限检查代码都大同小异,故
JavaScript数据结构与算法之队列原理与用法实例详解

本文实例讲述了JavaScript数据结构与算法之队列原理与用法.分享给大家供大家参考,具体如下: 队列是一种列表,不同的是队列只能在队尾插入元素,在队首删除元素.队列用于存储按顺序排列的数据,先进先出,这点和栈不一样(后入先出).在栈中,最后入栈的元素反而被优先处理.我们现在可以把队列想象对我们去餐馆吃饭的情景,很多人排队吃饭,排在最前面的人先打饭.新来的人只能在后面排队.直到轮到他们为止. 一:对队列的操作队列有2种主要的操作,向队尾中插入新元素enqueue()方法和删除队列中的队首的元
Java延迟队列原理与用法实例详解

本文实例讲述了Java延迟队列原理与用法.分享给大家供大家参考,具体如下: 延时队列,第一他是个队列,所以具有对列功能第二就是延时,这就是延时对列,功能也就是将任务放在该延时对列中,只有到了延时时刻才能从该延时对列中获取任务否则获取不到-- 应用场景比较多,比如延时1分钟发短信,延时1分钟再次执行等,下面先看看延时队列demo之后再看延时队列在项目中的使用: 简单的延时队列要有三部分:第一实现了Delayed接口的消息体.第二消费消息的消费者.第三存放消息的延时队列,那下面就来看看延时队列dem
Python单向链表和双向链表原理与用法实例详解

本文实例讲述了Python单向链表和双向链表原理与用法.分享给大家供大家参考,具体如下: 链表是一种数据结构,链表在循环遍历的时候效率不高,但是在插入和删除时优势比较大. 链表由一个个节点组成. 单向链表的节点分为两个部分:存储的对象和对下一个节点的引用.注意是指向下一个节点. 而双向链表区别于单向链表的是它是由三个部分组成:存储的对象.对下一个节点的引用.对上一个节点的引用,可以实现双向遍历. 单向列表的结构如下图: head是头节点,tail是尾节点,每个节点由Data存储对象和Next对下
Python3.5装饰器原理及应用实例详解

本文实例讲述了Python3.5装饰器原理及应用.分享给大家供大家参考,具体如下: 1.装饰器: (1)本质:装饰器的本质是函数,其基本语法都是用关键字def去定义的. (2)功能:装饰其他函数,即:为其他函数添加附加功能. (3)原则:不能修改被装饰的函数的源代码,不能修改被装饰的函数的调用方式.即:装饰器对待被修饰的函数是完全透明的. (4)简单应用:统计函数运行时间的装饰器 import time #统计函数运行时间的砖装饰器 def timmer(func): def warpper(*
Java抽象类原理与用法实例详解

本文实例讲述了Java抽象类原理与用法.分享给大家供大家参考,具体如下: 一.抽象类的基本概念普通类是一个完善的功能类,可以直接产生实例化对象,并且在普通类中可以包含有构造方法.普通方法.static方法.常量和变量等内容.而抽象类是指在普通类的结构里面增加抽象方法的组成部分. 那么什么叫抽象方法呢?在所有的普通方法上面都会有一个"{}",这个表示方法体,有方法体的方法一定可以被对象直接使用.而抽象方法,是指没有方法体的方法,同时抽象方法还必须使用关键字abstract做修饰. 而拥

JSONP原理及应用实例详解

相关推荐

随机推荐