这是我参与「第四届青训营」笔记创作活动的的第三天，今天主要学习HTTP。

一、本堂课重点内容

http协议分析
http场景分析
实例应用

二、详细知识点介绍

初始HTTP

什么是HTTP？

超文本传输协议、应用层协议，基于TCP协议、请求，响应、简单可扩展、无状态
HTTP 是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的 Web 文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。

客户端和服务端通过交换各自的消息（与数据流正好相反）进行交互。由像浏览器这样的客户端发出的消息叫做 request，被服务端响应的消息叫做 response。

协议分析

发展

HTTP/1.1 以及更早的 HTTP 协议报文都是语义可读的。在 HTTP/2 中，这些报文被嵌入到了一个新的二进制结构，帧。帧允许实现很多优化，比如报文头部的压缩和复用。即使只有原始 HTTP 报文的一部分以 HTTP/2 发送出来，每条报文的语义依旧不变，客户端会重组原始 HTTP/1.1 请求。因此用 HTTP/1.1 格式来理解 HTTP/2 报文仍旧有效。

报文(HTTP/1.1)

请求与响应

请求方法 Safe(安全的)︰不会修改服务器的数据的方法
GET HEAD OPTIONS
ldempotent(幂等)︰同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的
所有safe的方法都是ldempotent的
GET HEAD OPTIONS PUT DELETE

状态码

常用请求头

常用响应头

缓存
HTTP 缓存存储与请求关联的响应，并将存储的响应复用于后续请求。

cookie

Cookie 主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

场景分析

打开chrom -> 输入www.toutiao.com -> 打开控制台 -> 切换到network

静态资源

跨域

基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

实践练习例子

AJAX之XHR(XMLHttpRequest)
XMLHttpRequest (XHR) 是一种创建 AJAX 请求的 JavaScript API 。它的方法提供了在浏览器和服务器之间发送请求的能力。

XMLHttpRequest.readyState
XMLHttpRequest.readyState属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

//1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回结果
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    //2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果 行 头 空行 体
                        //1. 响应行
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串

                        //2. 所有的响应头
                        console.log(xhr.getAllResponseHeaders());

                        //3. 响应体
                        console.log(xhr.response);

                        result.innerHTML = xhr.response;
                    }
                }

AJAX之Fetch
Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。 Service Workers (en-US) 是大量使用 Fetch 的 API 的一个示例。除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

fetch('http://127.0.0.1:8000/fetch-server', {
                method: 'POST',
                headers: {
                    name: 'luoluo'
                },
                body: 'username=admin&password=admin',
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response => {
                console.log(response);
            })

axios

axios({
                method: 'POST',
                url: '/axios-server',
                params: {
                    vip: 9,
                    level: 30
                },
                headers: {
                    a: 100,
                    b: 200
                },
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then((response) => {
                console.log(response);
            })

课后个人总结

学习http过程中要去了解相关API，不同场景下使用不同的方式请求，灵活运用。

引用参考

developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…

HTTP实用指南|青训营笔记