剖析JSONP原理的小例子
2024-09-08 07:21:33
1. 服务器端代码(Node.js)
// 导入 http 内置模块
const http = require('http');
// 这个核心模块,能够帮我们解析 URL地址,从而拿到 pathname query
const urlModule = require('url'); // 创建一个 http 服务器
const server = http.createServer();
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {
// 解构赋值,将pathname重命名为url
const { pathname: url, query } = urlModule.parse(req.url, true); if (url === '/getScript') {
let data = {
name: 'tom',
age: 6,
friend: 'jerry'
};
// 把需要调用的方法和需要传递的参数放到一个字符串中发给客户端
let str = `${query.callback}(${JSON.stringify(data)})`;
// res.end 发送给客户端, 客户端去把这个字符串,当作JS代码去解析执行
res.end(str);
} else {
res.end('404')
}
}); // 指定端口号并启动服务器监听
server.listen(3000, function () {
console.log('server is running ...');
});
2. 客户端代码
<script>
function showInfo(data){
console.log(data);
}
</script>
<script src="http://127.0.0.1:3000/getScript?callback=showInfo"></script>
3. 备注
3.1 在客户端先定义好方法,然后通过script标签的src属性发起get请求将方法名传递到服务端。在服务端通过模板字符串将获取的方法名和需要返回的数据包装起来然后响应给客户端,这样就完成了JSONP的数据传递。
3.2 es6中的模板字符串:
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.` // 多行字符串
`In JavaScript this is
not legal.` console.log(`string text line 1
string text line 2`); // 字符串中嵌入变量
var name = "tom", friend = "jerry";
`Hello ${name}, how are you ${friend}?`
3.3 解构赋值
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
最新文章
- Python爬虫入门案例:获取百词斩已学单词列表
- 仿qq空间相册的图片批量上传
- 通过正则获取url参数
- Python中的redis学习笔记
- mysql 建立加密连接
- iOS 7 新特性
- 性能测试中vmstat命令的常见使用。
- ArcGIS API for JavaScript 与 Vue.js
- toString()方法细节
- C语言实现链栈
- Python全栈之路----Python基础元素
- eclipse修改工作目录颜色
- windows下手动安装 Apache+php+mysql
- 在Java中多段执行adb或者shell的命令
- 区分重载(overload),覆盖(Override)和隐藏(hide)
- 系统目录结构/ls命令/文件类型/alias命令
- python的数据结构之数字和字符串(四)
- Python-WSGI协议,mini-web框架
- 学生信息管理系统-顺序表&;&;链表(数据结构第一次作业)
- 编写高质量代码改善C#程序的157个建议——建议15: 使用dynamic来简化反射实现