备战面试/笔试 —— 前端程序员不可不知的HTTP知识

这篇文章历时两天，内容依据于前端面试官常问的一些面试题
不足之处还望见谅
如果您觉得对您有帮助的话，还望不要吝啬您的赞哟^_^

1.HTTP/TCP/IP/port 概览

老规矩，先从一个故事开始

龚先生穿越到了异界，发现这个异界很奇怪，只能用飞鸽传信而且还有几个规定【协议】
首先，有一个内容规定，规定每封信只能有四行字【这就是HTTP，至于具体哪四行，待会儿我们说】，但具体信是怎么传输过去的，HTTP不管
所以又定一个传输规定，必须要用鸽子来送信，而且还必须要把信绑到鸽子的脚上【这个传输规定就是TCP】
但是，鸽子在天空中飞，来来回回得有个目的地吧，我们还需要一个飞行目的地规定给鸽子分配目的地【这就是IP】
但问题又来了，你给别人飞鸽传信，那个人发展起来了，搞了一个有n个部门大公司，每个部门都有自己独特的服务，但现在ip对应的是人家公司地址，你想把信传到人家公司的XX部门，要求具体的服务，咋办呢
这个时候，人家公司就把每个部门都设置了不重复的编号，方便鸽子判断【不同的编号就是port】

听了这个故事，你对下面的图应该会容易理解了

总结一下

HTTP —— 规定如何书写内容
TCP —— 规定如何传输
IP —— 规定如何连接
Port —— 对应IP的不同服务

2.HTTP详解

2.1 HTTP的工作模型

HTTP的工作模型是请求/响应模型
你可以理解为
客户端【浏览器，Client】向服务器【Server】发送一个请求
服务器【Server】向客户端【浏览器，Client】返回一个响应

2.2 我们来看一下HTTP的工作流程

第一步：浏览器与服务器建立连接，请求服务器资源

第二步：发送HTTP请求

浏览器向服务器发送一个文本形式的请求报文，共有四个部分【就是我们在故事里说的每封信有四行字】
格式如下

1.请求行【一行】【三个部分】
GET /a HTTP/1.1
POST /a HTTP/1.1
请求方式 请求路径 协议与版本号
2.请求头【多行】
Key:Value
关于userAgent：每一个浏览器都是用户的代理者，用户通过浏览器来上网
3.空行【回车】
目的是要和第四部分隔开
4.请求体【message body】【任何字符串，但要符合content-Type】
username=blues&password=123

注：get请求一般省略3和4

GET方式实例如下【请求百度首页】

// 1.请求行【一行】【三个部分】
GET / HTTP/1.1
// 2.请求头【多行】
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

// GET请求可以不写第三部分和第四部分

第三步：服务器接受请求及其附带参数并根据自身逻辑返回响应

1.响应行
HTTP/1.1 200(status code) OK(status message)
HTTP/1.1 404(status code) Not Found(status message)
2.响应头
key:value
关于Content-Type：响应文本的类型，编码方式
关于Date：格林美治时间 —— GMT
3.空行
4.响应体
任何字符串

第四步：浏览器解析响应体内容

2.3 HTTP请求的常见方式

2.3.1 GET方式

用于请求服务器发送某个资源

如何发一个GET请求
// 2.1 
// 2.2 
// 2.3