HTTP实用指南|【青训营笔记】

191 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第7天

下面我来根据老师的概述记录本节课程的具体内容.

概述:

  1. HTTP协议简介

  2. HTTP协议的基本结构与发展历程

  3. 在不同的环境中发起HTTP请求

  4. 知识扩展,了解更多网络通信协议

01-HTTP协议简介

HTTP---Hyper Text Transfer Protocol ---超文本传输协议 它是OSI中基于TCP协议的应用层中的协议,用来传输请求和响应数据,特点是简单可扩展,并且是无状态的。

02-HTTP协议的基本结构与发展历程

这是HTTP协议的版本发展,其中1.0版本是使用时间最久的。

http协议发展.png

这是HTTP协议报文组成:
请求行:请求方式 URL HTTP协议版本 组成

请求头部 User-Agent :用来说明当前是什么类型的浏览器 Content-type:客服端告诉服务器实际发送的数据类型 Accept:客户端可识别的响应内容类型列表 Accept-Language:用户期望获得的自然语言的优先顺序 空行用来分隔头部和 请求体

请求体 中存放的是要通过post 方式提交到服务器的数据,get请求没有请求体的

状态行---响应头部--空行---响应体
状态行 :传输协议版本-状态码-状态码描述文本
响应头部:描述服务器的基本信息;有多行键值对描述

![HTTP内容.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3965ec05671440d9ae75bf683f3c495c~tplv-k3u1fbpfcp-watermark.image?)

Request-Method有以下种类:

HTTP-Method.png 关于Method值得注意的点是safe(安全的),Idempotent(幂等)

  • Safe:不会修改服务器的数据的方法
    GET HEAD OPTIONs
  • Idempotent: 同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的,所用Safe的方法都是Idempotent的,
    GET HEAD OPTIONS PUT DELETE
    状态码的类别

状态码.png

RESTful API: 这是一种API设计风格---REST -Representational State Transfer

  • 每一个URL代表一种资源;
  • 客户端与服务器之间,传递这种资源的某种表现层;
  • 客户端通过HTTP Method,对服务器资源进行操作,实现“表现层状态转化”。

| 请求 | 返回码 | 含义 |
| GET/zoos | 200 OK | 列出所用动物园,服务器成功返回了 |
| POST/zoos | 201 CREATED |新建一个动物园,服务器创建成功|
| PUT/zoos/ID | 400 INVALID REQUEST |更新某个指定动物园的信息(提供该动物园的全部信息)|
|DELETE/zoos/ID| 204 NO CONTENT| 删除某个动物园,删除数据成功 |


这里介绍一下请求头和响应头:

请求头:

请求头.png 响应头:

响应头.png Cookie的参数:

cookie.png

同源策略

同源:如果两个页面的协议,域名,和端口都相同,则两个页面的具有相同的源 www.test.com/index.html 端口号若没写出端口号默认是80

保证安全性 无法读取非同源网页的Cookie,LocalStorage和IndexedDB 无法接触非同源网页的DOM 无法向非同源地址发送Ajax请求

浏览器是可以跨域请求也能接收,只是被同源策略拦下来了。 解决跨域问题的方法我们可以使用JSONP、CROS,只不过JSONP只能解决get请求,而CROS都可以。

跨域.png

03-在不同的环境中发起HTTP请求

浏览器中

XMLHTTPRequest

浏览器中请求.png Fetch:

Fetch.png

Node中

Node.png 还有Vue建议的axios请求库:

axios.png

04- 知识扩展,了解更多网络通信协议

WebSocket:

WebSocket.png QUIC:

QUIC.png 本篇笔记用到大量杨超男老师的PPT还有一丢丢平时的笔记,感谢老师。