jsonp的实现原理
jsonp的实现原理
由于浏览器的安全性(同源策略)限制,不允许AJAX访问协议不同或域名不同或端口号不同的数据接口;
可以通过动态创建script标签的方式,把script标签的src属性指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式称为jsonp[由原理可知其只支持get请求];
具体实现过程:
a、先在客户端定义一个回调函数,预定义对数据的操作; //客户端定义回调函数名传给服务器,这样服务器端返回数据的方法名不用写死,客户端灵活设置而服务端不用变化。
b、再把这个回调方法的名称通过URL传参的形式提交到服务器的数据接口;
c、服务器数据接口组织好要发送给客户的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析;
d、客户端拿到服务器返回的字符串之后,添加到script脚本去解析执行,这样就能够拿到jsonp的数据了;
例如://下面结合node搭建个服务器实现jsonp
客户端:<script> function show(data){ console.log(data)}</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script> 服务器端:const http = require('http') //导入http内置模块
const urlModule = require('url') //这个核心模块能解析URL地址拿到pathname query等
const server = http.createServer() //创建一个http服务器
server.on('request',function(req,res){ //监听http服务器的request请求
const { pathname: url,query} = urlModule.parse(req.url,true) //node的结构赋值
if (url ==='getscript'){
var data = {
id:'1',
name: '宝马',
createtime: new Date()}
var scriptStr = `${query.callback}(${JSON.stringify(data)})` //拼接一个合法的JS脚本,这里拼接的是一个方法的调用
res.end(scriptStr) //res.end把这个字符串发送给客户端,客户端当做JS代码去解析执行
}else{
res.end('404')
}
})
jsonp的实现原理的更多相关文章
- jQuery 调用jsonp实现与原理
jQuery 调用jsonp实现与原理 您的评价: 收藏该经验 阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...
- jsonp跨域原理
Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...
- jsonp 跨域原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jsonp的工作原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 9.jsonp的实现原理
1. 由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的数据接口,浏览器认为这种访问不安全:2. 以通过动态创建script标签的形式,把script标签的src属性,指向数 ...
- 从浅入深——理解JSONP的实现原理
由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的 数据接口,浏览器认为这种访问不安全: 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口 ...
- jquery 中jsonp的实现原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...
- 深入剖析jsonp跨域原理
在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...
- JSONP前世今生及原理
https://blog.csdn.net/hansexploration/article/details/80314948 http://www.cnblogs.com/yuzhongwusan/a ...
随机推荐
- Msys2升级后不能编译
Msys2升级后不能编译 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} cod ...
- Set 对象和WeakSet对象
Set对象是值的集合,你可以按照插入的顺序迭代它的元素. Set中的元素只会出现一次,即 Set 中的元素是唯一的,一种有效去重方式. , , , , ]); console.log(set1.has ...
- python基础之数据类型初始
变量 贴标签 变量名规则:只能是字母下划线和数字组成,不能以数字开头,不能和关键字同名,不能使用拼音和中文,具有可描述性,区别大小写,变量名推荐写法:驼峰提,下划线(官方推荐) 变量赋值 常量 特性: ...
- Python之元组、列表and 字典
序列: 元组和字符串都是不可变的哦 你看,数据空间不一样了 元组的话,你可以联想到C里面的结构体变量啊,为了包容不同的数据类型: 也可以这样取值哦: 列表:列表是可修改的哦~ 不然数据大了再另外开辟空 ...
- Windows IIS7 下安装配置 PHP7.0
确认Microsoft Visual C++版本 Microsoft Visual C++的版本至关重要,根据Microsoft Visual C++版本下载的PHP不同. PHP官网的 ...
- tail - 输出文件的末尾部分
SYNOPSIS(总览) ../src/tail [OPTION]... [FILE]... DESCRIPTION(描述) 在标准输出上显示每个FILE的最后10行. 如果多于一个FILE,会一个接 ...
- batch normlization (BN)的讲解
1. https://zhuanlan.zhihu.com/p/54073204(简单理解) 2. https://zhuanlan.zhihu.com/p/34879333 (有举例说明,但是不太理 ...
- RMI远端方法调用
一.RMI介绍 RMI(Remote Method Invocation),RMI是分布式对象软件包,它简化了在多台计算机上的JAVA应用之间的通信.必须在jdk1.1以上,RMI用到的类:java. ...
- mongoose 常用数据库操作 查询
条件查询 Model.find(conditions, [fields], [options], [callback]) demo1 try.js var User = require(". ...
- php操作redis--集合(set)篇
常用函数:sAdd,sMembers,sPop,sUnion等 应用场景:与list类型类似,是一个列表的功能,不同的是set可以自动排重,提供了一个判断某一个成员是否存在一个set集合内的重要接口. ...