轻松学习 http

果果H
771 阅读6分钟

前言：工欲善其事必先利其器。

介绍一下：大家好，我叫果果～

这几天自己在学习 http 的知识，真真真觉得作为一名 程序员，基础真的要打扎实，很重要！！！学习的过程也要养成刨根问底的习惯。好了，回归到我们的正题，愉快的开始 学习 http 之旅～

重点

  1. HTTP 请求包括哪些部分，如何用Chrome开发者工具查看 HTTP 请求内容
  2. HTTP 响应包括哪些部分，如何用Chrome开发者工具查看 HTTP 响应内容
  3. 如何使用 curl 命令

在开始之前，建议读者跟我一样，先了解一下 www （World Wide Web，万维网）的历史（维基百科有很详细的资料）。Tim Berners-Lee（下文中称为李爵士）在 1989 年至 1992 年间，发明了 WWW（World Wide Web），一种适用于全世界的网络。主要包含三个概念

  1. URI（Uniform Resource Identifier，统一资源标识符），俗称网址
  2. HTTP（HyperText Transfer Protocol，超文本传输协议），两个电脑之间传输内容的协议
  3. HTML（HyperText Markup Language，超文本标记语言），超级文本，主要用来做页面跳转
李爵士除了发明了这些概念，还付诸了行动：
  1. 发明了第一个服务器
  2. 发明了第一个浏览器
  3. 写出了第一个网页

接下来，我们需要了解一下 URI （Uniform Resource Identifier，统一资源标识符）是什么？

URI 分为 URL 和 URN，我们一般使用 URL 作为网址，URN（Uniform Resource Name，统一资源名称），ISBN: 9787115275790 就是一个 URN，通过 URN 你可以确定一个「唯一的」资源，ISBN: 9787115275790 对应的资源的是《JavaScript 高级程序设计（第三版）》这本书。你去是介绍任何一个图书馆、书店，他们都知道是这本书。

URL（Uniform Resource Locator，统一资源定位符）通过 URL 你可以确定一个「唯一的」地址（网址）。=_=！！我看到 URI 和 URL 时有点懵。简单理一下：

1.URI 分为 URL 和 URN，我理解的是，URI就相当于我们的一张身份证，URN 理解为 我们的身份证号，URL 理解为我们的家庭住址.... 如果我理解错了，欢迎指正，感谢分享❤️

2.对 URI 和 URL 的说法

URL 是一种 URI

URL 就是我们常说的网址

继续，我们还需要知道 DNS (Domain Name System,域名系统)的作用：

  • 输入域名
  • 输出 IP

好了，现在进入到我们的重点，

请求与响应

Server + Client + HTTP

服务器与浏览器的交互
  • 浏览器负责发起请求
  • 服务器在 80 端口接收请求
  • 服务器负责返回内容（响应）
  • 浏览器负责下载响应内容

HTTP 的作用就是指导浏览器和服务器如何进行沟通。

请求示例  ⚠️ 命令，一定要自己在电脑上执行一下⚠️，看一下打印结果！！！

GET 请求执行下面命令，注释不用执行

curl -s -v -H "Guoguo: xxx" -- "https://www.baidu.com"

// -H "Guoguo: xxx" 这部分可去掉，它不重要

用 curl 创造一个请求，并得到响应

👆上面这条命令，不懂，请访问链接：explainshell.com/，

不懂的 shell 命令都可以在这里搜。

继续，请求的内容为：

GET / HTTP/1.1Host: www.baidu.com
User-Agent: curl/7.54.0Accept: */*Guoguo: xxx

POST请求，请执行下面命令：

curl -X POST -s -v -H "Guoguo: xxx" -- "https://www.baidu.com"

请求的内容为：

POST / HTTP/1.1Host: www.baidu.com
User-Agent: curl/7.54.0Accept: */*Guoguo: xxx

尝试一下，往 www.baidu.com 上传一个数据 1234567890，执行下面命令：

curl -X POST -d "1234567890" -s -v -H "Frank: xxx" -- "https://www.baidu.com”

请求的内容为：

POST / HTTP/1.1Host: www.baidu.com
User-Agent: curl/7.54.0Accept: */*Guoguo: xxxContent-Length: 10Content-Type: application/x-www-form-urlencoded1234567890

请求的格式

1 动词 路径 协议/版本2 Key1: value12 Key2: value22 Key3: value32 Content-Type: application/x-www-form-urlencoded    // 解释 application：应用数据 x:没有被写入规范的格式(即实验属性) www：万维网 form:表单 urlencoded:用urlencoded形式压缩一下，主要指中文如何转义
2 Host: www.baidu.com
2 User-Agent: curl/7.54.034 要上传的数据

  1. 请求最多包含四部分，最少包含三部分。（也就是说第四部分可以为空）
  2. 第三部分永远都是一个回车（\n），目的：区分第二部分和第四部分
  3. 动词有 GET（获取） POST（新增/上传） PUT（更新，表示我已经上传过，我想更新它，整体更新） PATCH（更新，表示我已经上传过，我想更新它，局部更新） DELETE（删除） HEAD OPTIONS 等
  4. 这里的路径包括「查询参数」，但不包括「锚点」。eg: 执行命令 curl -s -v -- "www.baidu.com/s?wd=JavaScript”,这里的路径为：/s?wd=JavaScript HTTP/1.1
  5. 如果你没有写路径，那么路径默认为 /
  6. 第 2 部分中的 Content-Type 标注了第 4 部分的格式

⚠️ 这里不理解，一定要耐心理一下～～～

用 Chrome 发请求

  1. 打开 Network
  2. 地址栏输入网址
  3. 在 Network 点击，查看 request，点击「view source」
  4. 点击「view source」
  5. 点击「view source」
  6. 点击「view source」
  7. 终于点了？可以看到请求的前三部分了
  8. 如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到

响应请求了之后，应该都能得到一个响应，除非断网了，或者服务器宕机了。

响应示例上面三个请求示例，前两个请求对应的响应分别为：

HTTP/1.1 200 OKAccept-Ranges: bytesCache-Control: private, no-cache, no-store, proxy-revalidate, no-transformConnection: Keep-AliveContent-Length: 2443        // 下载内容的长度Content-Type: text/html     // 下载内容的类型Date: Tue, 10 Oct 2017 09:14:05 GMTEtag: "5886041d-98b"Last-Modified: Mon, 23 Jan 2017 13:24:45 GMTPragma: no-cacheServer: bfe/1.0.8.18        // 百度随便加的，方便调试Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/<!DOCTYPE html><!--STATUS OK--><html> <head> 后面太长，省略了……Post 请求，返回的内容
HTTP/1.1 302 FoundConnection: Keep-AliveContent-Length: 17931Content-Type: text/htmlDate: Tue, 10 Oct 2017 09:19:47 GMTEtag: "54d9749e-460b"Server: bfe/1.0.8.18<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"> 后面太长，省略了……

  1. GET 请求和 POST 请求对应的响应可以一样，也可以不一样
  2. 响应的第四部分可以很长很长很长

响应的格式

1 协议/版本号 状态码 状态解释2 Key1: value12 Key2: value22 Content-Length: 179312 Content-Type: text/html34 要下载的内容

  • 状态码要背，是服务器对浏览器说的话
    • 1xx 不常用
    • 2xx 表示成功
      • 200 普通成功
      • 204 创建成功
    • 3xx 表示你走开吧
      • 301 永久的搬走了，但在第二个参数给告诉搬到的地址 location 里面。永久删除了
      • 302 外出了，过几天会回来（临时被封禁了）
      • 304 这一次内容和上一次内容是一样的
    • 4xx 表示你丫错了
      • 404 访问者路径错误
    • 5xx 表示好吧，我错了
  • 状态解释没什么用
  • 第 2 部分中的 Content-Type 标注了第 4 部分的格式
  • 第 2 部分中的 Content-Type 遵循 MIME 规范

状态码

用 Chrome 查看响应

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

补充：

推荐书籍📚：

《网络是怎样连接的》 《图解 HTTP》 《HTTP权威指南》

🔚完结，后续再持续更新～～～



avatar
文章
阅读
粉丝