York's Blog

HTTP-入门

WWW 的发明

Tim Berners-Lee(下文中称为李爵士) 在 1989 年至 1992 年间,发明了 WWW(World Wide Web),一种适用于全世界的网络。

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

  1. DNS解析

    DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意义上的地址。
    互联网上每一台计算机的唯一标识是它的IP地址,但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机,也就是上面提到的百度的网址。
    所以互联网设计者需要在用户的方便性与可用性方面做一个权衡,这个权衡就是一个网址到IP地址的转换,这个过程就是DNS解析。它实际上充当了一个翻译的角色,实现了网址到IP地址的转换。
    
  2. TCP连接

    知道了服务器的 IP 地址,下面便开始与服务器建立连接了。
    主机向服务器发送一个建立连接的请求(您好,我想认识您);
    服务器接到请求后发送同意连接的信号(好的,很高兴认识您);
    
    主机接到同意连接的信号后,再次向服务器发送了确认信号(我也很高兴认识您),自此,主机与服务器两者建立了连接。
    
  3. 发送HTTP请求

    一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求。
    客户端向服务器发起http请求的时候,会有一些请求信息,请求信息包含三个部分:
     1.请求方法URI协议/版本
     2.请求头(Request Header)
     3.请求正文:
    
  4. 服务器处理请求并返回HTTP报文

    HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
    
  5. 浏览器解析渲染页面

    浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。
    
  6. 连接结束

    1.主机向服务器发送一个断开连接的请求(不早了,我该走了);
    2.服务器接到请求后发送确认收到请求的信号(知道了);
    3.服务器向主机发送断开通知(我也该走了);
    4.主机接到断开通知后断开连接并反馈一个确认信号(嗯,好的),服务器收到确认信号后断开连接;
    

主要包含三个概念

  1. URI,俗称网址
  2. HTTP,两个电脑之间传输内容的协议
  3. HTML,超级文本,主要用来做页面跳转
URL 的作用是能让你访问一个页面,HTTP 的作用是让你能下载这个页面,HTML 的作用是让你能看懂这个页面。

URI 是什么

在电脑术语中,统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作。
URI 分为 URL 和 URN,我们一般使用 URL 作为网址。

  1. URN
    统一资源名称 (Uniform Resource Name, URN),是URI两种形式之一。唯一标识一个实体的标识符,但是不能给出实体的位置。

  2. URL
    统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。
    包含协议,域名,路径,查询参数,秒点,端口。

DNS

DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。

  • 输入域名
  • 输出 IP

Server + Client + HTTP

服务器与浏览器的交互

  1. 浏览器负责发起请求
  2. 服务器在 80 端口接收请求
  3. 服务器负责返回内容(响应)
  4. 浏览器负责下载响应内容
  5. HTTP 的作用就是指导浏览器和服务器如何进行沟通。

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

  1. 命令行输入curl -s -v -H "Frank: xxx" -- "https://www.baidu.com"
    请求的内容

    1
    2
    3
    4
    5
    GET / HTTP/1.1
    Host: www.baidu.com
    User-Agent: curl/7.54.0
    Accept: */*
    Frank: xxx
  2. 命令行输入curl -X POST -s -v -H "Frank: xxx" -- "https://www.baidu.com"
    请求的内容

    1
    2
    3
    4
    5
    POST / HTTP/1.1
    Host: www.baidu.com
    User-Agent: curl/7.54.0
    Accept: */*
    Frank: xxx
  3. 命令行输入curl -X POST -d "1234567890" -s -v -H "Frank: xxx" -- "https://www.baidu.com"
    请求的内容为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    POST / HTTP/1.1
    Host: www.baidu.com
    User-Agent: curl/7.54.0
    Accept: */*
    Frank: xxx
    Content-Length: 10
    Content-Type: application/x-www-form-urlencoded

    1234567890

请求

请求的格式
1
2
3
4
5
6
7
8
9
1 动词 路径 协议/版本
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3
4 要上传的数据
  1. 请求最多包含四部分,最少包含三部分。(也就是说第四部分可以为空)
  2. 第三部分永远都有个回车(/n),区分第二和第四部分
  3. 动词有GET(请求) POST(新增/上传) PUT(整体更新) PATCH(局部更新) DELETE(删除) HEAD() OPTIONS()等
  4. 这里的路径包括「查询参数」,但不包括「锚点」
  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 里面可以看到

响应

响应的格式
1
2
3
4
5
6
7
1 协议/版本号 状态码 状态解释
2 Key1: value1
2 Key2: value2
2 Content-Length: 17931
2 Content-Type: text/html
3
4 要下载的内容
状态码
1
2
3
4
5
6
7
8
9
10
11
12
13
状态码要背,是服务器对浏览器说的话
状态码 200 表示 服务器响应成功。
状态码 202 表示:服务器已接受请求,但尚未处理。
状态码 204 表示:请求处理成功,但没有资源可返回。
状态码 206 表示:服务器已经成功处理了部分 GET 请求。
状态码 301 表示:请求的资源已被永久的分配了新的 URI。
状态码 302 表示:请求的资源临时的分配了新的 URI。
状态码 400 表示:请求报文中存在语法错误。
状态码 401 表示:发送的请求需要有通过 HTTP 认证的认证信息。
状态码 403 表示:对请求资源的访问被服务器拒绝了。
状态码 404 表示:服务器上无法找到请求的资源。
状态码 500 表示:服务器端在执行请求时发生了错误。
状态码 503 表示:服务器暂时处于超负债或正在进行停机维护,现在无法处理请求。

第 2 部分中的 Content-Type 标注了第 4 部分的格式,遵循 MIME 规范.
Content-Type:application(表示是个应用数据)/(后面是我的子类)x-(没有被写入规范的格式/实验属性)www(万维网)-form(表单)-urlencoded(用的urlencoded形式压缩一下)

用 Chrome 查看响应
  1. 打开 Network
  2. 地址栏输入网址
  3. 选中第一个响应
  4. 查看 Response Headers
  5. 点击「view source」
  6. 点击「view source」
  7. 点击「view source」
  8. 终于点了?你会看到响应的前两部分
  9. 查看 Response 或者 Preview,你会看到响应的第 4 部分
Proudly published with Hexo