这是我参与「第四届青训营」笔记创作活动的第6天

HTTP

什么是HTTP

HTTP就是超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

超文本传输协议（Hyper Text Transfer Protocol，HTTP）
应用层协议，基于TCP协议
请求响应
简单可扩展性
无状态

协议分析

发展

图解：

报文分析

1.请求报文

http的请求报文由：请求行、头部、空行、主体(请求数据)四个部分组成。其中请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。
请求格式：

行     GET或POST    /BV1WC4y1b78y?p=5    /HTTP1.1
头     Host：atguigu.com
空行
体     GET为空，POST可以不为空  username=adminpassword=admin

常用的请求类型：

2.响应报文

一个响应由状态行、响应头部、空行和响应数据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>

3.请求行类型

Safe(安全的)：不会修改服务器数据的方法

GET
HEAD
OPTIONS

ldempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。

GET
HEAD
OPTIONS
PUT
DELETE

状态码

301 资源(网页)被永久转到其他URL
302 临时跳转
404 找不到
403 被静止
401 未授权
500 内部错误
504 网关或服务器无法在规定的时间内获得想要的响应
200 OK

常用请求头

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开始了它的标准化过程，成为新一代传输层协议。

HTTP使用指南 | 青训营笔记