HTTP 使用指南 | 青训营笔记

橘柑柚橙
117 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天，接下来是一些学习笔记以及我个人的思考和总结。

一、本堂课重点内容：

  1. HTTP 协议的基本定义
  2. HTTP 协议主要特征
  3. HTTP 协议发展历程
  4. HTTP 协议的报文结构
  5. 场景分析 - 静态资源
  6. 场景分析 - 登录
  7. HTTP 协议实战 - 浏览器
  8. HTTP 协议实战 - Node篇
  9. 网络优化手段
  10. HTTP 协议拓展 - 通信方式

二、详细知识点介绍：

什么是HTTP

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

HTTP的发展

QQ截图20230203211504.png

HTTP协议的报文结构

GET 请求一个指定资源的表示形式.使用GET的请求应该只被用于获取数据.

POST 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用

PUT 用请求有效载荷替换目标资源的所有当前表示

DELETE 删除指定的资源

HEAD 请求一个与GET请求的响应相同的响应，但没有响应体

CONNECT 建立一个到由目标资源标识的服务器的隧道。

OPTIONS 用于描述目标资源的通信选项。

TRACE 沿着到目标资源的路径执行一个消息环回测试。

PATCH 用于对资源应用部分修改。

Safe(安全的):不会修改服务器的数据的方法 GET HEAD OPTIONS

ldempotent (幂等) :同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的 所有safe的方法都是Idempotent的

GET HEAD OPTIONS PUT DELETE

常用请求头

  • Accept 接收类型，表示浏览器支持的MIME类型(对 标服务端返回的Content-Type)

  • Content-Type 客户端发送出去实体内容的类型

  • Cache-Control 指定请求和响应遵循的缓存机制，如no-cache

  • lf-Modified-Since 对应服务端的Last-Modified,用来匹配看文件是否变动，只能精确到1s之内

  • Expires 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间

  • Max-age 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存

  • lf-None-Match 对应服务端的ETag，用来匹配文件内容是否改变(非 常精确)

  • Cookie 有cookie并且同域访问时会自动带上

  • Referer 该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常 用 到这个字段)

  • Origin 最初的请求是从哪里发起的(只会精确到端口) ,Origin比Referer更 尊重隐私

  • User-Agent 用户客户端的一些必要信息，如UA头部等

常用响应头

  • Content-Type 服务端返回的实体内容的类型

  • Cache-Control 指定请求和响应遵循的缓存机制，如no-cache

  • Last-Modified 请求资源的最后修改时间

  • Expires 应该在什么时候认为文档已经过期,从而不再缓存它

  • Max-age 客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效

  • ETag 资源的特定版本的标识符，Etags类 似于指纹

  • Set-Cookie 设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端

  • Server 服务器的一些相关信息

  • Access-Control-Allow-Origin 服务器端允许的请求Origin头部(譬如为*)

场景分析 - 静态资源

静态资源方案:缓存+ CDN +文件名hash

●CDN: Content Delivery Network

●通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

QQ截图20230203212612.png

场景分析 - 登录

  • 业务场景
    • 表单登录
    • 扫码登录
  • 技术方式
    • SSO

QQ截图20230203212733.png

●账号密码登陆

●打开控制台- network -勾选preserve log -过滤quick login

●观察请求

三、实践练习例子：

AJAX之XHR

●XHR: XML HttpRequest

●readyState

| | |
| --- | --- | | | 0| UNSENT| 代理被创建，但尚未调用open()方法 | |1|OPENED|open()方法已经被调用。 |2|HEADERS_RECEIVED|send()方法已经被调用，并且头部和状态已经可获得 |3|LOADING|下载中; responseText属性已经包含部分数据。 |4|DONE|下载操作已完成。


function request(option) {
if (String(option) !== '[object Object]') return undefined
option. method = option.method ? option. method. toUpperCase( ) : 'GET'
option.data
option.data || {}
var formData = []
for (var key in option.data) {
formData.push( ''.concat(key, '=',
option.data[key]))
}
option.data = formData.join( '&' )
if (option.method === 'GET') {
option.url += location . search.Length
=== 0 ?“.concat('?', option.data) : ' ' . concat (
option.data )
var xhr = new XMLHt tpRequest( )
xhr .responseType = option. responseType || ' json '
xhr .onreadystatechange = function () {
if (xhr .readyState === 4) {
if (xhr .status === 200) {
if (option.success && typeof option.success === 'function') { 
option.success(xhr.response )
}
} else
if (option.error && typeof option.error === 'function') {
option.error( )
xhr.open( option. method, option.url,true )
if (option.method === 'POST') {
xhr.setRequestHeader( 'Content-Type'，'application/x-www-form-urlencoded')
xhr.send( option.method ==='POST' ? option.data : null)

AJAX之Fetch

●XMLHttpRequet的升级 版

●使用Promise

●模块化设计，Response, Request，Header对象

●通过数据流处理对象，支持分 块读取

QQ截图20230203214048.png

网络优化

QQ截图20230203214147.png

通信方式

WebSocket

●浏览器与服务器进行全双工通讯的网络技术

●典型场景:实时性要求高，例如聊天室

●URL使用ws://或Wss://等开头

QQ截图20230203214301.png

四、课后个人总结：

本节课内容较多，设计HTTP的很多方面，需要慢慢吸收消化，特别是实战部分的node篇，非常重要。

五、引用参考： juejin.cn/course/byte…

avatar
文章
阅读
粉丝