HTTP实用指南 | 青训营笔记

66 阅读3分钟

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

image.png

前言

作为一个前端学习者,如果能够理解和应用 HTTP 通信,那么将能够让我们在日常开发工作中快速定位并解决问题,这篇文章我将分为三部分记录笔记,一是初识http协议,二是分析http协议,三是实战

一、初识HTTP

什么是HTTP?

HTTP的全称为Hyper Text Transfer Protocol-超文本传输协议

  • 应用层协议,基于TCP协议
  • 请求响应
  • 简单可扩展
  • 无状态
image.png

HTTP在设计的时它是一个Client-Server的协议,是有请求和响应的。

image.png

二、协议分析

协议分析--发展

image.png
  • HTTP/0.9单行协议(响应只有HTML文档)
  • HTTP/1.0构建可扩展性
  • HTTP/1.1标准化协议
  • HTTP/2更优异的表现

协议分析-报文

image.png

报文一共由四部分组成:

起始行:对于请求报文来说,起始行类似于POST / HTTP/1.1; 对于响应报文来说,起始行类似于HTTP/1.1 403 Forbidden

头部

请求头

image.png

响应头

image.png

空行

实体(数据部分):即body部分。请求报文对应请求体, 响应报文对应响应体

Method

image.png Safe(安全的):不会修改服务器的数据的方法GET HEAD OPTIONS Idempotent(幂等):同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的所有safe的方法都是Idempotent的GET HEAD OPTIONS PUT DELETE

状态码

1xx:指示信息,表示请求已接收,继续处理
2xx:成功,表示请求已被成功接收、理解、接受
3xx:重定向,要完成请求必须进行更进一步的操作
4xx:客户端错误,请求有语法错误或请求无法实现
5xx:服务端错误,服务端未能实现合法的请求。

常见状态码

  • 200 OK —客户端请求成功
  • 301 永久重定向
  • 302 临时重定向
  • 401 请求未经授权
  • 404 请求资源不存在,可能是输入了错误的URL
  • 500 服务器内部发生了不可预期的错误
  • 504 Gateway Timeut-网关或者代理的服务器无法在规定的时间内获得想要的响应。

RESTful API

RESTful API: 一种API设计风格

(1)每一个URI代表一种资源;

(2)客户端和服务器之间,传递这种资源的某种表现层;

(3)客户端通过HTTP method,对服务器端资源进行操作,实现“表现层状态转化”

三、实战

实战-浏览器篇

AJAX之XHR

(0)UNSENT 代理被创建,但尚未调用open()方法。

(1)OPENED open()方法已经被调用

(2)HEADERS_RECEIVED send()方法已经被调用,并且头部和状态已经可获得

(3)LOADING 下载中;responseText属性已经包含部分数据

(4)DONE 下载操作已完成

AJAX之Fetch

  • XMLHttpRequest的升级版
  • 使用Promise
  • 模块化设计,Response,Request,Header对象
  • 通过数据流处理对象,支持分块读取

实战-node篇

标准库:HTTP/HTTPS

  • 默认模块,无需安装其他依赖
  • 功能有限/不是十分友好