HTTP粗略入门小白篇

目录

1. HTTP简述
2. URL
3. HTTP 请求
   • 格式
   • GET 请求
   • POST 请求
   • GET 和 POST 的区别
   • 用 Chrome 发请求
4. HTTP 响应
   • 格式
   • 用 Chrome 查看响应
5. URI 和 URL 的区别
6. 总结

HTTP 简述

HTTP 协议，即超文本传输协议（HyperText Transfer Protocol），是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。

HTTP 本身是Tim Berners-Lee发明的万维网中重要三个概念之一，即URL，HTTP，HTML。
其中，

• URL，俗称网址
• HTTP，两个电脑之间传输内容的协议
• HTML，超级文本，主要用来做页面跳转

通俗地讲，URL 的作用是能让你访问一个页面，HTTP 的作用是让你能下载这个页面，HTML 的作用是让你能看懂这个页面。
通常，由HTTP客户端发起一个请求，创建一个到服务器指定端口（默认是80端口）的TCP连接。HTTP服务器则在那个端口监听客户端的请求。一旦收到请求，服务器会向客户端返回一个状态，比如"HTTP/1.1 200 OK"，以及返回的内容，如请求的文件、错误消息、或者其它信息。

URL

了解HTTP之前，需要了解下 URL。

url是统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

这里主要了解它的结构。比如：

https://www.baidu.com/s?wd=Jay#6

• https://： 超文本传输安全协议
• www.baidu.com： 域名
• /s： 路径
• ?wd=Jay： 查询参数
• #6： 锚点

HTTP 请求

HTTP/1.1 协议中定义了多种请求方法，包括 GET，POST，GET，PUT，PATCH， DELETE，HEAD，OPTIONS 等，这里只介绍最常见的 GET 和 POST 请求。

格式

请求方法 路径 协议/版本
Key1: value1
Key2: value2
Key3: value3
Content-Length: n
Content-Type: application/x-www-form-urlencoded
Host: www.example.com
User-Agent: curl/7.56.0

要上传的数据

• 第一行是第一部分：请求行
  请求方法就是前面提到的那几种，常用GET，POST（思考它们的区别）。这里的路径包括「查询参数」，但不包括「锚点」。如果你没有写路径，那么路径默认为 / 。
• 第二行直到回车是第二部分：请求报头
  请求报头包含客户端向服务器传递请求的附加信息和客户端自身的信息，由关键字/值对组成，每行一对，关键字和值用英文冒号 : 分隔。
  常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent 等。
• 第三部分永远都是一个回车（\n）
• 回车后的内容是第四部分：请求正文
  当使用 POST、PUT 等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。请求正文可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据（也就是说第四部分可以为空）。
  在请求包头中有一些与请求正文相关的信息，例如：现在的 Web 应用通常采用 Rest 架构，请求的数据格式一般为 json。这时就需要设置 Content-Type: application/json。

GET 请求

这里先介绍一个工具 curl。

curl命令

curl是一个利用URL规则在命令行下工作的文件传输工具，可以说是一款很强大的http命令行工具。它支持文件的上传和下载，是综合传输工具，但按传统，习惯称url为下载工具。

它可以很直观地将你要访问的网站的请求和响应表示出来，这里我们以访问国内最大同性交友网站 bilibili 为例。

curl -s -v -H "key: value" -- "https://www.bilibili.com"

如上，

• -s：不要显示进度
• -v：显示一次的http请求的通信过程，去掉的话只返回HTML文档，没有请求和响应
• -H：添加后面的内容到请求头，来自定义Header，里面的内容任意，比如："Referer: www.example.com"
• 这是一个 GET 请求

我们将会得到如下结果。先是显示内容的头部，HTML文件太大没截全图：

显示内容的尾部：

POST请求

当需要发送表单数据到服务器时，可以用POST请求。

curl -X POST -d "title=xxx&text=yyy" www.example.com/add

• -X：指定发送数据的方式，这里是POST
• curl 默认以 application/x-www-form-urlencoded 作为 Content-Type 来发送数据

那么会相应地返回结果如下：

POST / HTTP/1.1
Host: www.examle.com/add
User-Agent: curl/7.56.0
Accept: */*
Content-Length: 18
Content-Type: application/x-www-form-urlencoded

title=xxx&text=yyy

GET 和 POST 的区别

get 和 post 虽然本质都是 tcp/ip，但两者除了在 http 层面外，在 tcp/ip 层面也有区别。

get 会产生一个 tcp 数据包，post 两个。具体就是：

• get 请求时，浏览器会把 headers 和 data 一起发送出去，服务器响应 200（返回数据）
• post 请求时，浏览器先发送 headers，服务器响应 100 continue， 浏览器再发送 data，服务器响应200（返回数据）

用 Chrome 发请求

1. 按 F12 进入开发者模式
2. 打开 Network
3. 地址栏输入网址
4. 在 Network 点击，查看 request，点击「view source」
5. 如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到

HTTP 响应

在上面访问bilibili的例子中，显示末尾的一部分就是服务器的响应：

GET响应

再加上前面很长的那个HTML文件，一起组成了HTTP响应的结构。

格式

协议/版本号 状态码 状态解释
Key1: value1
Key2: value2
Content-Length: n
Content-Type: text/html

要下载的内容

可以看到，响应的格式和请求格式基本一致。
状态码是服务器对浏览器说的话，可以粗暴地如下来记忆：

1xx 表示server说：我知道了，你继续
2xx 表示成功
3xx 表示server说：滚吧
4xx 表示server说：你丫错了
5xx 表示server说：好吧，我错了

一些常见的状态码：

200 OK                        //客户端请求成功
400 Bad Request               //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized              //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden                 //服务器收到请求，但是拒绝提供服务
404 Not Found                 //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error     //服务器发生不可预期的错误
502 Bad Gateway               //作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503 Server Unavailable        //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

用 Chrome 查看响应

1. 按 F12 进入开发者模式
2. 打开 Network
3. 输入网址
4. 选中第一个响应
5. 查看 Response Headers，点击「view source」
6. 查看 Response 或者 Preview，你会看到响应的第 4 部分

Response

URI 和 URL 的区别

小插曲，一图盖之：

URI & URL

总结

HTTP的知识对前端开发非常重要，这里只是浅谈了一下HTTP的格式、分类和一些状态码，等以后学习了HTTP更深入的知识再来填坑。