黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理
黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理
一、总结
一句话总结:
服务端可以返回js代码给script标签,那么标签会执行它,并且可带json字符串作为参数,这样就成功把数据传过去了
比如客户端有show方法,服务器返回给script标签 show(),那么show 方法会执行
1、跨域访问的原因是什么?
由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全
2、JSONP的实现原理 是什么?
可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求
3、jsonp只支持哪种请求?
get请求
4、JSONP的 具体实现过程 是什么?
1、先在客户端定义一个回调方法,预定义对数据的操作;
2、再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
3、服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
4、客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
二、结合Node手写JSONP服务器剖析JSONP原理
1、JSONP的实现原理
- 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;
- 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);
- 具体实现过程:
- 先在客户端定义一个回调方法,预定义对数据的操作;
- 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
- 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
- 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
2、jsonp代码实例(Node.js 做服务端)
客户端代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<script>
function showInfo123(data) {
console.log(data)
}
</script> <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
<!-- <script>
show()
</script> --> </body> </html>
nodejs服务端代码
// 导入 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) { // const url = req.url
const { pathname: url, query } = urlModule.parse(req.url, true) if (url === '/getscript') {
// 拼接一个合法的JS脚本,这里拼接的是一个方法的调用
// var scriptStr = 'show()' var data = {
name: 'xjj',
age: 18,
gender: '女孩子'
} var scriptStr = `${query.callback}(${JSON.stringify(data)})`
// res.end 发送给 客户端, 客户端去把 这个 字符串,当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
}) // 指定端口号并启动服务器监听
server.listen(3000, function () {
console.log('server listen at http://127.0.0.1:3000')
})
黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理的更多相关文章
- 第四章 生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理
- 手写butterknife来剖析其原理
基本使用: 对于butterknife库我想基本上都非常熟了,如今在项目中用它也用得非常之频繁了,不过为了学习的完整性,先来简单的回顾一下基本用法,先新建一个工程: 然后给textview增加一个点击 ...
- 剖析手写Vue,你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- JavaSE 手写 Web 服务器(二)
原文地址:JavaSE 手写 Web 服务器(二) 博客地址:http://www.extlight.com 一.背景 在上一篇文章 <JavaSE 手写 Web 服务器(一)> 中介绍了 ...
- JavaSE 手写 Web 服务器(一)
原文地址:JavaSE 手写 Web 服务器(一) 博客地址:http://www.extlight.com 一.背景 某日,在 Java 技术群中看到网友讨论 tomcat 容器相关内容,然后想到自 ...
- 【项目】手写FTP服务器-C++实现FTP服务器
X_FTP_server 手写FTP服务器-C++实现FTP服务器 项目Gitee链接:https://gitee.com/hsby/ftp_Server 简介 一个基于libevent的高并发FTP ...
- 手写Tomcat服务器
预备知识 编写服务器用到的知识点 1) Socket 编程2) HTML3) HTTP 协议4) 反射5) XML 解析6) 服务器编写 Socket编程 https://www.cnblogs.co ...
- 手写Javaweb服务器
简单web服务器 回忆socket 创建客服端(在httpClient_1包下) public class Client { public static void main(String[] a ...
- node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)
webpack启服务步骤: 1.新建空文件夹webpack-vue.在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件 2.打开 ...
随机推荐
- Go 字符串使用
Go语言中的字符串 Go 中的字符串是兼容 Unicode 编码的,并且使用 UTF-8 进行编码,这样每一个Unicode字符根据代码点的大小使用1.2.3或4个字节表示代码点.Go 语言中的字符串 ...
- Android开发之图像处理那点事——滤镜
在Android开发中,一般对图像的处理就是Bitmap(位图),它包含了图像的全部数据,即点阵和颜色值,点阵就是包含像素点的矩阵,而颜色值就是ARGB,分别代表透明.红色.绿色.蓝色通道,它们共同决 ...
- ubuntu创建kvm虚拟机
CPU虚拟化支持 [root@ubuntu~]# egrep -o '(vmx|svm)' /proc/cpuinfo vmx vmx vmx vmx KVM环境 [root@ubuntu ~]# a ...
- 二〇一八-网易秋招面试解析(Java)
一轮面试: Java内存模型讲一下 GC算法,知道的都讲一下 HashMap,get,put实现 JsonWebToken具体实现流程(简历) Spring AOP如何实现,写一个AOP功能的主要流程 ...
- python-----opencv截取按帧截取视频
最近有需求把一个视频从指定帧截取一部分,demo代码如下: import cv2 video_path = r'F:\temp\temp_0806\1\video\test.dat' videoCap ...
- 关于阿里云OSS上传图片之后会被旋转90度的解决办法
原文:https://www.cnblogs.com/wuhjbk/p/10133596.html 问题描述:正常的图片前端上传到oss成功之后的资源地址.在html上引用的时候被旋转了90度oss资 ...
- asp.net中数据库事务管理
英文搜索关键字: 文章地址:https://stackoverflow.com/questions/313199/sql-transactions-best-way-to-implement-in-a ...
- SpringMVC 一次请求加载Controller多次
原因之一:HTML页面中 css样式 background:url() 或 img.iframe标签 src设置为空 例:<div style="background:url()&qu ...
- My97DatePicker(js日期插件) v4.8
1.下载地址 https://files.cnblogs.com/files/yu-shang/My97DatePicker.zip 2.文档地址 http://my97.net/demo/index ...
- 小程序setData数据量过大时候会对渲染有影响吗?
datas:[ { id:1000, name: "帅哥", title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: ...