从浅入深——理解JSONP的实现原理
由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）;
实现过程：
1.在客户端定义一个回调方法，预定义对数据的操作；
2.再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
3.服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
4.客户端拿到服务器返回得字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
//客户端.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function show() {
console.log('ok')
}
</script>
<script src="http://127.0.0.1:3000/getscript"></script>
<!-- 上面的script就相当于下面
<script>
show()
</script> -->
</body>
</html>
//app.js
const http = require('http')
const server = http.createServer()
server.on('request', function (req, res) {
const url = req.url
if (url === '/getscript') {
//拼接一个合法的JS脚本，这里拼接的是一个方法的调用
var scriptStr = 'show()'
//res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
})
server.listen(3000, function () {
console.log('server')
})
既然知道了原理就可以对其进行升级改造了。
上面我们的方法是写死的，但是后端并不知道我们的方法名是什么，我们用带参的形式传递给后端。
//客户端.html
...
<script>
function show() {
console.log('ok')
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script>
//app.js
const http = require('http')
const urlModule = require('url')
const server = http.createServer()
server.on('request', function (req, res) {
const {pathname: url,query} = urlModule.parse(req.url, true)
if (url === '/getscript') {
//拼接一个合法的JS脚本，这里拼接的是一个方法的调用
var scriptStr = `${query.callback}()`
//res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
})
server.listen(3000, function () {
console.log('server')
})
现在前端修改了方法名，只要改变请求参数，后端依旧能够使用。但是这只是单纯方法的调用，并没有发挥后端的作用呀。别着急，接下来就是获取数据
//客户端.html
...
<script>
function showInfo123(data) {
console.log(data)
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
//app.js
...
server.on('request', function (req, res) {
const {
pathname: url,
query
} = urlModule.parse(req.url, true)
if (url === '/getscript') {
//拼接一个合法的JS脚本，这里拼接的是一个方法的调用
var data = {
name: 'caicaicai',
age: 18,
gender: 'man'
}
//data对象不能直接往字符串里拼，所以使用JSON.stringfy()，对data进行转换
var scriptStr = `${query.callback}(${JSON.stringify(data)})`
//res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
})
...
从浅入深——理解JSONP的实现原理的更多相关文章
- JavaScript基础知识从浅入深理解（一）
JavaScript的简介 javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互. javascript是由三部分组成:ECMAScript.DO ...
- 浅入深出之Java集合框架（下）
Java中的集合框架(下) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,哈哈这篇其实也还是基础,惊不惊喜意不意外￣▽￣ 写文真的好累,懒得写了.. ...
- 浅入深出Vue：工具准备之PostMan安装配置及Mock服务配置
浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...
- 浅入深出Vue：前言
浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...
- 『浅入深出』MySQL 中事务的实现
在关系型数据库中,事务的重要性不言而喻,只要对数据库稍有了解的人都知道事务具有 ACID 四个基本属性,而我们不知道的可能就是数据库是如何实现这四个属性的:在这篇文章中,我们将对事务的实现进行分析,尝 ...
- 浅入深出Vue：代码整洁之封装
深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...
- Mybatis源码解析，一步一步从浅入深（六）：映射代理类的获取
在文章:Mybatis源码解析,一步一步从浅入深(二):按步骤解析源码中我们提到了两个问题: 1,为什么在以前的代码流程中从来没有addMapper,而这里却有getMapper? 2,UserDao ...
- 浅入深出之Java集合框架（上）
Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...
- 浅入深出之Java集合框架（中）
Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...
随机推荐
- L1-L11 jupter notebook 文件
L1-L11 jupter notebook 文件下载地址 https://download.csdn.net/download/xiuyu1860/12157961 包括L12 Transforme ...
- 无序map 记录一下
unordered_map<int ,int >mp; unordered_map是基于hash表实现的,查找元素的复杂度可以达到o(1),查找n个元素,复杂度为o(n). map是基于红 ...
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
- 【学习笔记】 $learn \ from \ failure \ ? ( 雾$
\(1.\)变量名不要用 \(next\) ,在某些编译器里可能是关键词,可以用 \(nxt\) 代替 \(\\\) \(2.\)在判断某些条件时应该写成 flag = 条件 ? 1 : flag; ...
- ASP.NET Core技术研究-全面认识Web服务器Kestrel
因为IIS不支持跨平台的原因,我们在升级到ASP.NET Core后,会接触到一个新的Web服务器Kestrel.相信大家刚接触这个Kestrel时,会有各种各样的疑问. 今天我们全面认识一下ASP. ...
- 前端面试的那些事儿（1）~JavaScript 原始数据类型
前言 自我总结面试常问的一些细节,方便不断回顾与补充.第一次发表文章,如有问题或不足之处望及时指出. JavaScript 原始数据类型 1.1 基础数据类型 7大基础数据类型 boolean nul ...
- 挑战全网最幽默的Vuex系列教程：第五讲 Vuex的小帮手
先说两句 前面已经讲完了 Vuex 下的 State.Getter.Mutation 及 Action 这四驾马车,不知道大家是否已经理解.当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行 ...
- 个人理解Linux文件权限--以前记录的,根据鸟哥的第二版去解释的
ps:鸟哥的第三版私房菜印刷的有问题 上面的意思:d指的是目录 档案拥有者权限:r可读w可写,x,可运行, 同群组的权限:r可读,这段有个-号,表示不可写,x表示可运行 其他非本群组的权限:r可读,这 ...
- Waiting for another flutter command to release the startup lock...
2019独角兽企业重金招聘Python工程师标准>>> rm ./flutter/bin/cache/lockfile info from 转载于:https://my.oschin ...
- Ubuntu+FastDFS+Nginx
一.安装libfastcommon 1.wget https://github.com/happyfish100/libfastcommon/archive/V1.0.7.tar.gz 2.tar - ...