前言：

余以为，计算机知识晦涩难懂，初次学习难以掌握，就算用通俗的生活案例去理解，也难以整体吸收，故余采用简单的案例去让读者在实践中理解，很简单，希望读者可以动手实践一下。

学习目的：

大致了解http的链接的过程，了解浏览器和服务器之间交互的数据是什么？怎么看这些数据？

操作流程：

首先我们创建js文件，使用ajax原生代码（如下）去访问服务器

        let xhr = new XMLHttpRequest()
            xhr.open('get',"https://autumnfish.cn/api/joke")
            xhr.send()
            xhr.onload = function(){
                console.log(xhr.responseText);
            }

其中，请求方法为get，请求的服务器地址为autumnfish.cn/api/joke

控制台打印出服务器返回的数据，xhr.responseText

此时浏览器收到服务器返回的数据为

流程总结

在上述操作中，我们经历了如下“简单”的过程：

①浏览器向服务器发送一次请求（request）

确定get方法和服务器地址

xhr.open('get',"autumnfish.cn/api/joke")

②服务器处理请求

服务器处理收到来自浏览器的数据后，确定了方法（get）正确，数据合法

③服务器返回响应（response）数据

浏览器数据加载完成后（xhr.onload），打印服务器返回的数据（xhr.responseText）。

小结

整体而言，只要我们使用get方法去访问目标网站，目标网站服务器就会返回一条数据，在如上过程中，主要就是浏览器和服务器在交换数据，那么，它们交换的数据是什么，又在哪里呢？

http协议：

继续操作：打开网络界面，刷新浏览器

此时会看到我们发送了一条joke请求，右边的Header就是前后端交互的数据，即http协议。浏览器服务器交互的数据就是HTTP协议，包括如下两部分：

1，浏览器向服务器发送的请求报文

①请求行

指General中的Request Url和Request Method

请求行中规定了请求方法get和请求地址joke

②请求头

请求头中规定了浏览器发给服务器的数据格式，服务器会按照浏览器规定的数据格式进行二进制解析，如其中Accept-Language就规定了中文格式zh-CN等，User-Agent中有浏览器信息

③请求体

请求体则是请求参数，常见的请求参数还有账号密码，以及指定返回数据的范围等

2，服务器返回的响应报文

①响应行

指General中的Status Code、Remote Address和Refereer Policy

Status Code指响应的状态码，此处状态码为200，表示响应成功

Remote Address，指服务器的ip地址

Refereer Policy指服务器的部分技术，如cross-origin跨域

②响应头

告诉浏览器服务器给的数据的格式

如content-type中，服务器返回html格式，并且字符为utf-8（中文）。date中，服务器响应的时间

③响应体

就是服务器返回给浏览器的数据

知识点总结和扩展

① 在“签订”http协议之前，其实还需要把域名解析成ip地址，然后三次握手来确保浏览器和服务器信息传输安全可靠，才可以签协议。在“签订”之后，就可以对服务器返回的数据（响应体response）进行处理了，通常是使用渲染树渲染html界面。

② 行中，主要放地址和请求/响应信息；

头中，主要放规定的数据格式；

体中，放的就是数据本身了。

③ 我们会发现，报文中的数据结构类似于对象，key：value，用\n进行换行，在编程时，我们就可以修改具体的报文中的key：value，来改变报文信息。

④ 两个报文加起来，就是http协议，即规定浏览器和服务器交换数据的格式。

⑤ 当我们访问任何网站时，都可以在网络这里看到http协议的信息

完！

~~期待您的宝贵评论，(ˇωˇ」∠)）寄罢...~~

【快速上手http链接】

前言：