jsonp的实现原理
2024-10-07 18:51:21
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')
}
})
最新文章
- C语言产生标准正态分布或高斯分布随机数
- Linux posix线程库总结
- winform 打印控件
- 减小Chrome的内存占用的参数
- Procrustes Analysis普氏分析法
- 控制文本和外观------Attr Binding(attr属性绑定)
- Jfinal中定时器的初步探索(一)
- Codeforces Gym 100523E E - Gophers SET
- Oracle 体系结构及安全管理
- python——爬虫&;问题解决&;思考(四)
- spring+mybatis+c3p0数据库连接池或druid连接池使用配置整理
- C#基于websocket-sharp实现简易httpserver(封装)
- 数据库之mysql篇(5)—— 【转载】mysql练习题
- vue中的v-cloak
- ckeditor_学习(1) 基本使用
- st-link调试和下载程序(待写)
- Java:传值还是传引用?
- linux根据端口查找进程【原创】
- 每日Scrum--No.3
- 函数导出在kvm_intel.ko,kvm.ko不共享