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 ...
随机推荐
- 函数节流及手机端点击延迟200ms解决方法
不论是H5开发还是微信小程序,手机端点击都会有300ms的延迟,在实际项目中,会到此频繁触发,如有接口会频繁的请求接口,除了会引起不必要的多次请求还会导致数据有问题.下面有二种方式来处理这个问题: 1 ...
- Shell内置命令 eval
- Stm32CubeMX5 创建LED控制工程 - 基于stmf051k8u6
一. 创建一个控制LED的工程 1. 安装好 Stm32CubeMX5 后 打开软件 选择 “ File--> New Project...” 创建一个新工程 2. 之后会出现一个选择芯片的窗 ...
- k8s容器-运维管理篇
二. 运维和管理 维护参考网址 https://jimmysong.io/kubernetes-handbook/practice/install-kubernetes-on-centos.html ...
- linux常用命令记录(一)
文件搜索命令 grep在文件中查找字符并输出 grep 字符或字符串 文件目录 grep pub /teach/.txt -c 字符出现总行数 grep .txt -n 行号 grep .txt -i ...
- thrift 的required、optional探究
原因 经常使用thrift来编写rpc通信,但是对下面两个问题还是有些疑惑 thrift 的required.optional和不写有什么区别 optional不设置isset的话被传输后值? 实验 ...
- 上传图片,预览并保存成blob类型 和 base64
场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来.有两种方法: 方法一:利用URL.createObjectURL ...
- jq随机生成数字加字母的字符串
html代码: <dl class="row"> <dt class="tit"> <label for="title& ...
- Unity Document
{ https://docs.unity3d.com/ScriptReference/Events.UnityEventTools.html }
- Magento多语言注意事项
Magento一般使用CSV文件方式翻译国际化词条 一般用法是代码中: <?php echo Mage::helper("module_name")->__('Item ...