首先介绍下浏览器输入一条网址获得页面的过程:
1)浏览器会将用户输入网址通过dns解析为IP地址。
2)通过IP地址找到服务器建立连接
3)浏览器向服务器发送请求(例如一个.html页面)
4)服务器在其内部寻找该资源(可能不存在..)
5)服务器将找到的资源发送给浏览器.
在上述过程中第三步浏览器给服务器发送的是http请求报文,第五步服务器将资源发送给浏览器的过程中发送的是http响应报文。
首先利用浏览器获得访问“www.baidu.com”的报文。
Get请求报文由请求行、请求头及一空行组成。
请求行:GET / HTTP/1.1 // 请求方式 + 请求资源路径 + http协议版本
请求头如下:
Request Headers
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 // 可接受的数据类型
Accept-Encoding: gzip, deflate, br // 可接受的数据压缩格式
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7 // 可接受的语言
Cache-Control: max-age=0 // 缓存控制
Connection: keep-alive // 保持长连接 close为短连接
Cookie: ....... // 用于携带之前的记录信息
Host: www.baidu.com // 请求主机号
Upgrade-Insecure-Requests: 1 // 使用安全方式即https方式请求, 0为不使用
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36 // 客户端信息
POST方式请求除了请求行中请求方式变为POST,还多了一个请求体的存在。
响应报文由响应行、响应头、空行、响应体组成。
响应行:HTTP/1.1 200 OK # 协议版本 状态码 状态说明
响应头如下:
Response Headers
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8 // 发送内容的类型
Date: Sun, 16 Aug 2020 06:26:59 GMT // 服务器响应时间
Expires: Sun, 16 Aug 2020 06:26:14 GMT // 过期时间
Server: BWS/1.1 // 服务器名称例如nginx
Set-Cookie: ..... // 为客户端发送cookie
Strict-Transport-Security: max-age=172800 // 在之后的172800秒时间内都使用https的方式传输
1XX : 信息型状态码 接受的请求正在处理
2XX : 成功状态码 请求正常处理完毕
3XX : 重定向状态码 需要进行附加操作,才能完成请求
4XX : 客户端错误状态码 服务器无法处理该请求
5XX : 服务器错误状态码 服务器处理请求出错
200 OK 该请求被正常处理
204 Not content 服务器端不需给客户端发送新信息时使用
206 Partial Content 表示此时客户端是一个范围请求,服务器执行了这部分请求。
301 Moved Permanently永久性重定向 表示请求的资源已经分配到其他url。
302 Found 临时性重定向
303 see Other 亦是临时性重定向,其与302有着相同的功能,303明确客户端需采用GET方式请求。
304 Not Modified 当采用条件请求时,此时资源存在但条件不满足
400 Bad Request 请求报文存在语法错误
401 Unauthorized 表示用户认证失败
403 Forbidden 该请求被服务拒绝
404 Not Found 服务器上无法找到该资源
500 Internal Server Error 服务器端执行请求时发生错误
503 Service Unavailable 表示服务器超负荷或者进行停机维护
document.querySelectorAll('.github-emoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });