网络交互
1.浏览器和服务器的通信过程
- 地址解析
- 封装http请求数据包
- 封装成tcp包,通过tcp的三次握手建立tcp连接
- 客户端发送请求命令
- 服务器响应
- 服务器关闭tcp连接
特殊场景:vue项目中 keep-alive 添加此关键词,则可以保持连接
2.url
URL URI URN
参考地址: https://blog.youkuaiyun.com/hguisu/article/details/8680808
说出 URL URI URN 的区别
URI 统一资源标识符,用来标识一个资源,是一种语义化的抽象概念
URL 统一资源定位符,他是一种具体的URI,即URL可以用来标识一个资源,而且还指明了如何访问到这个资源。
URN 统一资源名称,是标准格式的URI,指的是资源而不指定其位置或是否存在。
完整的url结构
<scheme>://<user>:<pwd>@<host>:<post>/<path>;<params>?<query>#<flag>
1.scheme
方案,协议,以那种方式获取服务器端资源,不区分大小写
2.user:pwd
早期后台服务管理员需要将用户名和密码写在url中
3.host
域名 ip地址
主机名 localhost 127.0.0.1 www.Baidu.com.
4.port
端口号, 服务器对外提供服务的方式
5.path
路径 资源在服务器上具体的存放位置
6.params
参数 (例如再次登陆页面,仍然是登陆状态)
跟踪状态参数,session服务器端记录状态/浏览器端记录状态cookie
7.query
get方法提交请求时,带参数的查询字符串 左边有一个问号。
8.#flag
描点
3.缓存 节省资源 提高加载
客户端将服务器回来的数据进行自动的保存,当再次访问的时候,直接使用保存的数据
优点:
1.减少冗余的数据传输,节省客户端浏览器
2.节省服务器的带宽
3.降低了对服务器资源的消耗和运行的要求
4.降低了由于远距离传输造成的加载延迟
新鲜度和过期
1.请求—无缓存—连接服务器—存缓存—客户端
2.请求—有缓存—够新鲜—使用缓存—客户端得到
3.请求—有缓存—不新鲜—连接服务器是否过期—没过期—更新缓存新鲜度—客户端得到
4.请求—有缓存—不新鲜—连服务器确实是否过期—已过期—连服务器—存缓存—客户端得到
浏览器中与缓存相关的消息头
Cache-Control: no-cache/max-age=0 秒
前端设置缓存头
<meta http-equiv=“cache-control” content=“max-age=3600”>
http协议
http协议概述
- http:超文本传输协议
- 浏览器和web服务器之间的通信协议,位于应用层
- 规范了数据是如何打包和传递的,专门用于传递html
http的历史
http连接性能优化
- 减少连接创建次数(开启持久连接)
- 减少请求次数(缓存)
- 提高 服务器端与运行速度
- 尽可能减少响应数据的长度
https
ssl为数据通信提供安全支持
https,安全版本的http协议
1.客户端发送请求—>ssl层加密—>服务器接收加密文件,在ssl层解密,得到请求明文
2.服务器发送响应—>ssl层加密—>客户端得到加密文件,在ssl层解密,等到响应明文
request和response
请求方法
-
http原生请求方式
- get靠地址栏的查询字符串去传参数,客户端向服务器要数据的时候使用,无显示主体
- post 请求主体,靠请求主体传递数据,客户端传递数据给服务器时使用
-
Restful规范
- get:查询,无请求主体
- post:创建,有请求主体
- put:修改,有请求主体
- delete:删除,无请求主体
-
get和post的区别
post不能被缓存,不能被收藏为标签,参数不会保存在浏览器历史或web服务器日志中,对数据长度和数据类型没有限制,也允许二进制数据。并且,数据不会显示在URL中。适用于登录或注册需要发送密码的操作中。
get 能被缓存,能被收藏为书签,但是get安全性比较差,get发送的参数是URL的一部分,数据在url中对所有人都是可见的,而且,get方法向url添加数据,url的长度是受限制的,url最大长度是2048字符,所以在发送密码或者其他敏感信息时,绝不能使用get!
浏览器中请求和响应的标头
通用头信息
Request URL: 向服务器请求哪些内容
Request Method:请求方法 get(默认)/post(browser->server)
Status code:状态码
1**:正在请求,还没有结束
2**:成功的跳转
404 not found(browser的请求错误)/
3**:重定向跳转到另一个URL/
5**:服务器端错误
Remote address:对应的ip地址和端口号
Referrer policy:如何进入网址的
响应头信息
请求头信息
请求消息,客户端发送给服务器的数据块
由三部组成,请求起始行,请求头,请求主体
1.请求起始行
2.请求头
-
Host:www.tmooc.cn
告诉服务器,请求的是哪个主机 -
Connection:keep-alive
告诉服务器,请开启持久连接 -
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
-
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
告诉服务器,我这个浏览器的类型和版本号 -
Accept-Encoding: gzip, deflate,
告诉服务器,我现在这个浏览器能够接受的压缩文件格式 -
Accept-Language: zh-CN,zh;q=0.9
告诉服务器,我这个浏览器能够接收的自然语言(不同国家登录同一个域名,网页显示不同的语言) -
Referer: https://www.tmooc.cn/
告诉服务器,我这个请求来自于哪个网页(广告商收取费用)
3.请求主体
可有可无,浏览器端向服务器端请求所携带的数据。
原生接口中 get没有,post有。
Restful类型接口中,get/delete没有,post/put有。
content-type 的三种常见数据格式
-
默认的格式请求体中的数据会以json字符串的形式发送给后端
‘Content-Type:application/json’ -
请求体中的数据会以普通表单形式(键值对)发送给后端
‘Content-Type:application/x-wwww-form-urlencoded’ -
他会将请求体的数据处理为一条数据,以标签为单元,用分隔符分开,既可以上传键值对,也可以上传文件
‘Content-Type: multipart/form-data’
若后端需要接收的数据类型为application/x-www-form-urlencoded,我们前端该如何配置:用 URLSearchParams 传递参数
var param=new URLSearchParams()
param.append('name',name)
param.append('age',age)
data:param
若使用axios,就可以直接引入qs,这个库是axios里包含的,不需要下载了
import Qs from 'qs'
let params={
"name":'ll',
"age":"18"
}
data:Qs.stringify(params)
若后端需要接收的数据类型为:Content-Type:multipart/form-data,前端如何配置:对于这种类型的数据,我们常见前端页面上传个人图像,然后点击保存发送后端修改原始数据
let params=new FormData()
params.append('file',this.file)
params.append('qq',this.qq)
params.append('weChat',this.weChat)
原生AJAX
什么是同步(Synchronous)?
在一个任务进行的过程中,不能开启其他任务
同步访问:浏览器在向服务器发送请求得时候,浏览器只能等待服务器做出响应,在这个过程中不能做其他得事情。
出现得场合:
1.浏览器地址栏输入url,访问页面。
2.a标签跳转
3.form标签提交请求
什么是异步(Asynchronous)?
在一个任务开启的过程中,可以执行其他的操作
异步访问:浏览器在向服务器发送请求时,用户可以在页面上做其他操作。
符合用户体验
使用场景:
- 注册登录
- 股票软件
- 聊天室
- 百度搜索引擎
什么是ajax?
ajax,英文名为"Asybchrinous JavaScript and xml",本质是使用js提供的异步对象(XMLHttpRequest),异步的向服务器发送请求,并且接受响应回来的数据。
使用ajax的步骤
- 创建异步对象
- 创建请求
- 发送请求
- 接收响应的数据
1.创建异步对象
标准的创建方式 var xhr = new XMLHttpRequest();
但是不兼容ie8以下的版本
兼容的写法:
// console.log(window.XMLHttpRequest)
// 该属性ie8以上有,ie8以下没有
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest()
}else{
xhr=new ActiveXObject('Mircosoft.XMLHttp')
}
2.创建异步对象
xhr.open(method,url,isAsyn)
- method 字符串,请求的方法
- url 字符串,请求的url
- isAsyn boolean 是否采用异步的方式 true/false
xhr.open('get','http://localhost:8080/sync/datasource',true)
3.发送请求
xhr.send()
没有请求主体的方法,写null,也可以不传参数
有请求主体的方法,xhr.send(formdata)
4.接收响应数据 监听
-
创建监听
xhr.onreadystatechange=function(){} -
监听的目标
xhr.readyState
xhr对象的请求状态,一共五个- 0 请求尚未初始化
- 1 打开连接,请求正在发送
- 2 接收响应头
- 3 开始接收响应主体
- 4 响应接收成功
-
监听会被激活四次,我们关注第一次,使用if筛选,同时,响应状态码,还必须是200
if(xhr.readyState==4&&xhr.status==200){
。。。
}
- 响应的数据保存在xhr.responseText中
// 创建监听,接收响应的数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText
console.log(result)
}
}
原生ajax发送请求的案例
字符串传参的get方法
function getDate(){
// 获取用户填写的数据
var $uname=uname.value
var $upwd=upwd.value
// 创建异步
var xhr=new XMLHttpRequest()
// 创建监听
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
var res=xhr.responseText;
if(res.data.code===0){
console.log('登陆成功')
}else if(res.data.code===-1){
console.log('用户名或密码错误')
}
}
}
//创建请求
xhr.open('get',`http://localhost/ajax/login?uname=${$uname}&upwd=${$upwd}`,true)
//发送请求
xhr.send()
}
路由传参的get方法
function getDate(){
// 获取用户填写的数据
var $uname=uname.value
var $upwd=upwd.value
// 创建异步
var xhr=new XMLHttpRequest()
// 创建监听
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
var res=xhr.responseText;
if(res.data.code===0){
console.log('登陆成功')
}else if(res.data.code===-1){
console.log('用户名或密码错误')
}
}
}
//创建请求
xhr.open('get',`http://localhost/ajax/login/${$uname}&${$upwd}`,true)
//发送请求
xhr.send()
}
post方法
function login(){
var $uname=uname.value;
var $upwd=upwd.value;
var $email=email.value;
var $phone=phone.value;
var $gender=gender.value;
// 创建异步
var xhr=new XMLHttpRequest()
// 创建监听
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
var res=xhr.responseText;
if(res.data.code===0){
console.log('注册成功')
}else if(res.data.code===-1){
console.log('用户名或密码错误')
}
}
}
//创建请求,打开连接
xhr.open('get',`http://localhost/ajax/reg`,true)
//发送请求
xhr.setRequestHeader('Content-Type':'applicaion/x-www-form-urlencoded')
var formdata=`uname=${$uname}&upwd=${upwd}&email=${email}&phone=${phone}&gender=${gender}`
xhr.send(formdata)
}