这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
初识HTTP
HTTP就是超文本传输协议(Hyper Text Transfer Protocol)是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。
- 超文本传输协议(Hyper Text Transfer Protocol,HTTP)
- 应用层协议,基于TCP协议
- 请求响应
- 简单可扩展性
- 无状态
协议分析
发展
报文分析
请求报文
http的请求报文由:请求行、头部、空行、主体(请求数据)四个部分组成。其中请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔。
请求格式:
行 GET或POST /BV1WC4y1b78y?p=5 /HTTP1.1
头 Host:atguigu.com
空行
体 GET为空,POST可以不为空 username=adminpassword=admin
常用的请求类型:
响应报文
一个响应由状态行、响应头部、空行和响应数据4部分组成。
行 HTTP/1.1 200 OK
头 Host:atguigu.com
Content-Type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gzip
空行
体 <html>
<head>
</head>
<body>
<h1>请求体</h1>
</body>
</html>
请求行类型
Safe(安全的):不会修改服务器数据的方法
- GET
- HEAD
- OPTIONS
ldempotent(幂等):同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的。
- GET
- HEAD
- OPTIONS
- PUT
- DELETE
状态码
1xx 属于提示信息,中间状态
2xx 成功
- 200 一切正常,如果是非
HEAD请求,服务器返回的响应头都会有 body 数据。 - 204 No Content 与 200 OK 基本相同,但响应头没有 body 数据
- 206 Partial Content 是应用于 HTTP 分块下载或断点续传
3xx 重定向
- 301 Moved Permanently 表示永久重定向,说明请求的资源已经不存在了,需改用新的 URL 再次访问。
- 302 Found 表示临时重定向,说明请求的资源还在,但暂时需要用另一个 URL 来访问。
- 304 Not Modified 不具有跳转的含义,表示资源未修改,重定向已存在的缓冲文件,
4xx 错误码,请求报文有误, 客户端的问题
- 400 Bad Requset
- 403 Forbidden 表示服务器禁止访问资源,并不是客户端的请求出错。
- 404 Not Found 表示请求的资源在服务器上不存在或未找到,所以无法提供给客户端。
5xx 客户端请求正常,服务器处理时内部发生了错误
-
500 Internal Server Error
-
501 Not Implemented 表示客户端请求的功能还不支持,类似“即将开业,敬请期待”的意思。
-
502 Bad Gateway 通常是服务器作为网关或代理时返回的错误码,表示服务器自身工作正常,访问后端服务器发生了错误
-
503 Service Unavailable 表示服务器当前很忙,暂时无法响应客户端,类似“网络服务正忙,请稍后重试”的意思。
常用请求头
Accept:指定客户端能够接收的内容类型。
Cache-Control:指定请求和响应遵循的缓存机制。
Connection:表示是否需要持久连接。(HTTP 1.1默认进行持久连接)
CookieHTTP:请求发送时,会把保存在该请求域名下的所有cookie值一起发送给web服务器。
Content-Type:客户端发送出去的实体内容的类型
Date:请求发送的日期和时间。
Expect:请求的特定的服务器行为。
From:发出请求的用户的Email。
Host:指定请求的服务器的域名和端口号。
If-None-Match:如果内容未改变返回304代码,参数为服务器先前发送的Etag,与服务器回应的Etag比较判断是否改变。
Max-Forwards:限制信息通过代理和网关传送的时间。
Pragma:用来包含实现特定的指令。
常用响应头
Cache-Control:告诉所有的缓存机制是否可以缓存及哪种类型。
Content-Type:返回内容的MIME类型。
ETag:请求变量的实体标签的当前值。
Expires:响应过期的日期和时间。
Last-Modified:请求资源的最后修改时间。
Location:用来重定向接收方到非请求URL的位置来完成请求或标识新的资源。
Pragma:包括实现特定的指令,它可应用到响应链上的任何接收方。
Proxy-Authenticate:它指出认证方案和可应用到代理的该URL上的参数。
refresh:应用于重定向或一个新的资源被创造,在5秒之后重定向(由网景提出,被大部分浏览器支持)
Retry-After:如果实体暂时不可取,通知客户端在指定时间之后再次尝试。
Serverweb:服务器软件名称。
Set-Cookie:设置Http Cookie。
HTTPS
HTTPS (全称:Hyper Text Transfer Protocol over SecureSocket Layer),是由 HTTP 加上 TLS/SSL 协议构建的可进行加密传输、身份认证的网络协议,主要通过数字证书、加密算法、非对称密钥等技术完成互联网数据传输加密,实现互联网传输安全保护。
实战
使用ajax发送请求
const divs = document.querySelector('div');
divs.addEventListener('mouseover',function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server2');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//自定义请求头需要在js中改变
xhr.setRequestHeader('name','adser');
//3.发送
xhr.send('a=120&b=123&c=asd'); // 任意格式 a:234&b=451
//4.事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status<300){
//处理服务端返回的结果
document.write(xhr.response);
}
}
}
})
使用axios发送请求
const btn = document.querySelectorAll("button");
//配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btn[0].onclick=()=>{
//GET请求
axios.get('/asxio',{
//url参数
params:{
id:12345
},
//请求头信息
headers:{
name:'sgu',
age:20
}
}).then(value =>{
console.log(value);
})
};
了解更多
WebScocket
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景:实时性要求较高,例如聊天室
- URL使用:ws:// 或者 wss:// 等开头
QUIC
- UIC(Quick UDP Internet Connection)是谷歌制定的一种基于UDP的低时延的互联网传输层协议。在2016年11月国际互联网工程任务组(IETF)召开了第一次QUIC工作组会议,受到了业界的广泛关注。这也意味着QUIC开始了它的标准化过程,成为新一代传输层协议。