带你认识 HTTP 协议

迷途的路人
381 阅读28分钟

我正在参加「掘金·启航计划」

一、HTTP 是什么

HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的 应用层协议。

当我们在浏览器中输入一个 搜狗搜索的 "网址" (URL) 时, 浏览器就给搜狗的服务器发送了一个 HTTP 请求, 搜狗的服务器返回了一个 HTTP 响应。

这个响应结果被浏览器解析之后, 就展示成我们看到的页面内容. (这个过程中浏览器可能会给服务器发送多个 HTTP 请求, 服务器会对应返回多个响应, 这些响应里就包含了页面 HTML, CSS, JavaScript, 图片,字体等信息).

所谓 "超文本" 的含义, 就是传输的内容不仅仅是文本(比如 html, css 这个就是文本), 还可以是一些 其他的资源, 比如图片, 视频, 音频等二进制的数据.

二、理解 “应用层协议”

我们已经学过 TCP/IP ，已经知道目前数据能从客户端进程经过路径选择跨网络传送到服务器端进程

[ IP+Port ]。

可是，仅仅把数据从A点传送到B点就完了吗？

这就好比，在淘宝上买了一部手机，卖家[ 客户端 ]把手机通过顺丰[ 传送+路径选择 ] 送到买家 [ 服务器 ] 手里就完了吗？

当然不是，买家还要使用这款产品，还要在使用之后，给卖家打分评论。

所以，我们把数据从A端传送到B端， TCP/IP 解决的是顺丰的功能，而两端还要对数据进行加工处理或者使用，所以我们还需要一层协议，不关心通信细节，关心应用细节！

这层协议叫做应用层协议。而应用是有不同的场景的，所以应用层协议是有不同种类的，其中经典协议

之一的HTTP就是其中的佼佼者.

再回到我们刚刚说的买手机的例子，顺丰相当于TCP/IP 的功能，那么买回来的手机都附带了说 明书【产品介绍，使用介绍，注意事项等】，而该说明书指导用户该如何使用手机【虽然我们都不看，但是父母辈有部分是有看说明书的习惯的：）】，此时的说明书可以理解为用户层协议。

三、理解 HTTP 协议的工作过程

当我们在浏览器中输入一个 "网址", 此时浏览器就会给对应的服务器发送一个 HTTP 请求. 对方服务器收 到这个请求之后, 经过计算处理, 就会返回一个 HTTP 响应.

事实上, 当我们访问一个网站的时候, 可能涉及不止一次的 HTTP 请求/响应 的交互过程. 可以通过 chrome 的开发者工具观察到这个详细的过程.

\

四、HTTP 协议格式

HTTP 是一个文本格式的协议. 可以通过 Chrome 开发者工具或者 Fiddler 抓包, 分析 HTTP 请求/响应的 细节.

4.1 抓包工具的使用

以 Fiddler 为例。

  • 首先要说明的是 Fillder 工具是专门抓取 HTTP 请求的，没有办法抓取 TCP/IP这样的包。
  • 第一次使用 Fiddler 需要设置一下：
    • 选择 tools 中的 option：

    • 选择 HTTPS，将图中画圈的地方都打勾：

    • 然后会弹出安装证书的窗口，点击 yes完成安装，就可以了。

这样设置的目的，是为了抓取 HTTPS 的包。因为网络上大部分的网站都是 HTTPS 的。如果不开启这个设置去抓 HTTPS 的包，其实就没有什么可以去抓取的了。


还有一点要注意的是：在使用 Fiddler 的时候，如果此刻电脑上运行着其他的代理程序/插件，就需要把这些程序/插件关掉，因为这两者之间会产生冲突，导致 Fiddler 什么都抓取不到。

下面为 Fiddler 的界面：

  • 左侧窗口显示了所有的 HTTP请求/响应, 可以选中某个请求查看详情.
  • 右侧上方显示了 HTTP 请求的报文内容. (切换到 Raw 标签页可以看到详细的数据格式)
  • 右侧下方显示了 HTTP 响应的报文内容. (切换到 Raw 标签页可以看到详细的数据格式)
  • 请求和响应的详细数据, 可以通过右下角的 View in Notepad 通过记事本打开.

可以使用 ctrl + a 全选左侧的抓包结果, delete 键清除所有被选中的结果

4.2 抓包工具的原理

Fiddler 相当于一个 "代理".

浏览器访问服务器时, 就会把 HTTP 请求先发给 Fiddler, Fiddler 再把请求转发给服务器. 当服务器返回数据时, Fiddler 拿到返回数据, 再把数据交给浏览器.

因此 Fiddler 对于浏览器和服务器之间交互的数据细节, 都是非常清楚的.

\

4.3 协议格式总结

思考问题： 为什么 HTTP 报文中要存在 "空行"?

因为 HTTP 协议并没有规定报头部分的键值对有多少个。空行就相当于是 "报头的结束标记", 或者 是 "报头和正文之间的分隔符".

HTTP 在传输层依赖 TCP 协议, TCP 是面向字节流的. 如果没有这个空行, 就会出现 "粘包问题"

五、HTTP 请求（Request）

5.1 认识 URL

URL 基本格式

平时我们俗称的 "网址" 其实就是说的 URL (Uniform Resource Locator 统一资源定位符).

互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

一个具体的 URL：

https://v.bitedu.vip/personInf/student?userId=10000&classId=100

可以看到，在这个 URL 中有些信息被忽略了

  • https : 协议方案名，常见的有 http 和 https, 也有其他的类型. (例如访问 mysql 时用的 jdbc:mysql )
  • user:pass : 登陆信息。现在的网站进行身份认证一般不再通过 URL 进行了. 一般都会省略
  • v.bitedu.vip : 服务器地址。此处是一个 "域名", 域名会通过 DNS 系统解析成一个具体的 IP 地址. (通过 ping 命令可以看到, v.bitedu.vip 的真实 IP 地址为 118.24.113.28 )
  • 端口号: 上面的 URL 中端口号被省略了. 当端口号省略的时候, 浏览器会根据协议类型自动决定使用哪个端口. 例如 http 协议默认使用 80 端口, https 协议默认使用 443 端口.
  • /personInf/student : 带层次的文件路径。
  • userId=10000&classId=100 : 查询字符串(query string). 本质是一个键值对结构. 键值对之间使 用 & 分隔. 键和值之间使用 = 分隔
  • 片段标识：此URL中省略了片段标识，片段标识主要用于页面内跳转。（例如 Vue 官方文档：v2.cn.vuejs.org/v2/guide/#a…，通过不同的片段标识跳转到文档的不同章节）

关于 query string（查询字符串）

query string 中的内容是键值对结构. 其中的 key 和 value 的取值和个数, 完全都是程序猿自己约 定的. 我们可以通过这样的方式来自定制传输我们需要的信息给服务器.

URL 中的可省略部分

  • 协议名: 可以省略, 省略后默认为 http://
  • ip 地址 / 域名: 在 HTML 中可以省略(比如 img, link, script, a 标签的 src 或者 href 属性). 省略后表示服务器的 ip / 域名与当前 HTML 所属的 ip / 域名一致.
  • 端口号: 可以省略. 省略后如果是 http 协议, 端口号自动设为 80; 如果是 https 协议, 端口号自 动设为 443.
  • 带层次的文件路径: 可以省略. 省略后相当于 / . 有些服务器会在发现 / 路径的时候自动访问 /index.html
  • 查询字符串: 可以省略
  • 片段标识: 可以省略

关于 URL encode 和 decode

当 query string 中包含特殊字符（如 / ? : 等这样的字符），就需要对特殊字符进行转义。

这个转义的过程，就叫做 URL encode，反之，把转义之后的内容还原回来，就叫做 URL decode。

\

一个中文字符由 UTF-8 或者 GBK 这样的编码方式构成, 虽然在 URL 中没有特殊含义, 但是仍然需 要进行转义. 否则浏览器可能把 UTF-8/GBK 编码中的某个字节当做 URL 中的特殊符号.

转义的规则如下: 将需要转码的字符转为16进制，然后从右到左，取4位(不足4位直接处理)，每2位做一 位，前面加上%，编码成%XY格式。

例如：

查询了 ASCII 表

”+“ 被转义成了 ”%2B“

5.2 认识 “方法”（method）

http/1.1规定了以下请求方法(注意，都是大写):

  • GET: 通常用来获取资源
  • HEAD: 获取资源的元信息
  • POST: 提交数据，即上传数据
  • PUT: 修改数据
  • DELETE: 删除资源(几乎用不到)
  • CONNECT: 建立连接隧道，用于代理服务器
  • OPTIONS: 列出可对资源实行的请求方法，用来跨域请求
  • TRACE: 追踪请求-响应的传输路径

1. GET 方法

GET 是最常用的 HTTP 方法. 常用于获取服务器上的某个资源.

在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求.

另外, HTML 中的 link, img, script 等标签, 也会触发 GET 请求.

使用 Fiddler 观察 GET 请求：

打开 Fiddler, 访问 搜狗主页, 观察抓包结果

在上图中可以看到，是通过浏览器地址栏发送的 GET 请求。

选中这一栏观察详细情况：

GET https://www.sogou.com/ HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Microsoft Edge";v="104"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cookie: ABTEST=0|1661139870|v17; IPLOC=CN3401; SUID=BCA439241539960A000000006302FB9E; SUV=1661139871147962; browerV=3; osV=1

\

GET 请求的特点

  • 首行的第一部分为 GET
  • URL 的 query string 可以为空, 也可以不为空.
  • header 部分有若干个键值对结构.
  • body 部分为空.

关于 GET 请求的 URL 长度问题

网上有些资料上描述: get请求长度最多1024kb 这样的说法是错误的.

HTTP 协议由 RFC 2616 标准定义, 标准原文中明确说明: "Hypertext Transfer Protocol -HTTP/1.1," does not specify any requirement for URL length.

没有对 URL 的长度有任何的限制.

实际 URL 的长度取决于浏览器的实现和 HTTP 服务器端的实现. 在浏览器端, 不同的浏览器最大长

度是不同的, 但是现代浏览器支持的长度一般都很长; 在服务器端, 一般这个长度是可以配置的.

2. POST 方法

POST 方法也是一种常见的方法. 多用于提交用户输入的数据给服务器(例如登陆页面).

通过 HTML 中的 form 标签可以构造 POST 请求, 或者使用 JavaScript 的 ajax 也可以构造 POST 请求

使用 Fiddler 观察 POST 方法：

在 gitee 的登陆界面，输入用户名、密码过后，点击登陆，就可以看到 POST 请求了：

点击这个请求，查看详细信息：

POST https://gitee.com/check_user_login HTTP/1.1
Host: gitee.com
Connection: keep-alive
Content-Length: 30
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Microsoft Edge";v="104"
X-CSRF-Token: mhuA93vJ1D4X1EPmRRRMj3gy70iSLiil3h3jk916+UYn7yO3z9pNdKMQy5tQD0dtGxyjaApk7ylQC3PqtVwqzQ==
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: */*
X-Requested-With: XMLHttpRequest
sec-ch-ua-platform: "Windows"
Origin: https://gitee.com
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://gitee.com/login
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cookie: user_locale=zh-CN; oschina_new_user=false; tz=Asia%2FShanghai; Hm_lvt_24f17767262929947cc3631f99bfd274=1661140409; sajssdk_2015_cross_new_user=1; sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%22182c3af1b5151d-0d716d366e44208-72422f2d-1350728-182c3af1b52797%22%2C%22first_id%22%3A%22%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22%E7%9B%B4%E6%8E%A5%E6%B5%81%E9%87%8F%22%2C%22%24latest_search_keyword%22%3A%22%E6%9C%AA%E5%8F%96%E5%88%B0%E5%80%BC_%E7%9B%B4%E6%8E%A5%E6%89%93%E5%BC%80%22%2C%22%24latest_referrer%22%3A%22%22%7D%2C%22%24device_id%22%3A%22182c3af1b5151d-0d716d366e44208-72422f2d-1350728-182c3af1b52797%22%7D; sensorsdata2015jssdkchannel=%7B%22prop%22%3A%7B%22_sa_channel_landing_url%22%3A%22%22%7D%7D; slide_id=9; gitee-session-n=MVNETlkzbFJMWERlYlZmNjljMmZieFk2M3g4VXpmN2s5ZzZHdXRIU3EzK1FNZlJDUEF5bHVSeGlqOGI3UXZ6QjVYMFlYWEVlajBSZC9UV2EwUEY0M0IvL01NWU41eE1xY0hYOExlallxQUxReldVSmVhUXUyQmNoQ0FNRjNpeEN1UzU4YXFOZGQvR1VtZUZxZG5zN1ZnQlhjZWFmSzdtOEVsSy9BNFN6K2NKUStDUWpqaTc0U1NUY0hhb3lFZENQLS1kSDJhcHBYbXc0cS96anNGdjJGMm13PT0%3D--15113c1419da653238e56be030a56741aafe9271; Hm_lpvt_24f17767262929947cc3631f99bfd274=1661140471

user_login=12345678%40qq.com

\

POST 请求的特点

  • 首行的第一部分为 POST
  • URL 的 query string 一般为空 (也可以不为空)
  • header 部分有若干个键值对结构.
  • body 部分一般不为空. body 内的数据格式通过 header 中的 Content-Type 指定。body 的长度由header 中的 Content-Length 指定.

GET 和 POST 有什么区别

首先最直观的是语义上的区别。

而后又有这样一些具体的差别:

  • 从缓存的角度，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。
  • 从编码的角度，GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制。
  • 从参数的角度，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，更适合传输敏感信息。
  • 从幂等性的角度，GET是幂等的，而POST不是。(幂等表示执行相同的操作，结果也是相同的)
  • 从TCP的角度，GET 请求会把请求报文一次性发出去，而 POST 会分为两个 TCP 数据包，首先发 header 部分，如果服务器响应 100(continue)， 然后发 body 部分。(火狐浏览器除外，它的 POST 请求只发一个 TCP 包)

\

5.3 认识请求 “报头” （header）

header 的整体的格式也是 "键值对" 结构.

每个键值对占一行. 键和值之间使用分号分割.

报头的种类有很多, 此处仅介绍几个常见的.

Host

表示服务器主机的地址和端口

Content-Length

表示 body 中的数据长度，单位为 字节。

Content-Type

Content-Type: text/html; charset=UTF-8

表示请求的 body 中的数据格式，字段值用 type/subtype形式赋值。

键值对之间，使用 &分割，键和值之间用 =分割。

常见选项：

  • application/x-www-form-urlencoded: form 表单提交的数据格式，此时 body 的格式形如：
title=test&content=hello

对于此格式的表单内容，有以下特点：

  • 其中的数据会被编码成以&分隔的键值对
  • 字符以URL编码方式编码。

如：

// 转换过程: {a: 1, b: 2} -> a=1&b=2 -> 如下(最终形式)
"a%3D1%26b%3D2"

\

  • multipart/form-data: form 表单提交的数据格式，在 form 标签中加上 enctyped="multipart/form-data" . 通常用于提交图片/文件。
    • 请求头中的Content-Type字段会包含boundary，且boundary的值有浏览器默认指定。例: Content-Type: multipart/form-data;boundary=----WebkitFormBoundaryRRJKeWfHPGrS4LKe。
    • 数据会分为多个部分，每两个部分之间通过分隔符来分隔，每部分表述均有 HTTP 头部描述子包体，如Content-Type，在最后的分隔符会加上--表示结束。
    • 响应的 请求体如下：
Content-Disposition: form-data;name="data1";
Content-Type: text/plain
data1
----WebkitFormBoundaryRRJKeWfHPGrS4LKe
Content-Disposition: form-data;name="data2";
Content-Type: text/plain
data2
----WebkitFormBoundaryRRJKeWfHPGrS4LKe--
  • application/json 数据为 json 格式. body 格式形如：
{"username":"123456789","password":"xxxx","code":"jw7l","uuid":"d110a05ccde64b16 a861fa2bddfdcd15"}

关于 Content-Type 的详细情况：developer.mozilla.org/en-US/docs/…

User-Agent（简称 UA）

表示浏览器/操作系统的属性：

其中 Windows NT 10.0; Win64; x64 表示操作系统信息

AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63表示浏览器信息。

\

Referer

HTTP Referer 是 HTTP 表头的一个字段，用来表示当前网页是来源于哪里，采用的格式是 URL。我们通过这个 HTTP Referer，可以查到访客的来源。

可以通过 Network 面板看到，页面访问及资源请求的 Request Headers 请求头信息里有一个 Referer 字段，用来标记来源的 URL。

如果直接在浏览器中输入URL, 或者直接通过收藏夹访问页面时是没有 Referer 的

有同学可能会注意到 Referer “似乎”拼写有误，应该是 “Referrer" 才对，这其实是个历史原因，在早期 HTTP 规范当中就存在的拼写错误，后面为了向下兼容，所以将错就错。

拼写错误只有 Request Headers 的 “Referer”，在其他地方比如General Headers、 JavaScript 及 DOM 上，都是正确的拼写。

Cookie（此处引用的链接）

1. Cookie 的来源

Cookie 的本职工作并非本地存储，而是“维持状态” 。 因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存，通俗来说，服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。

我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户信息，当服务器检查 Cookie 的时候，便可以获取到客户端的状态。

在刚才的购物场景中，当用户选购了第一项商品，服务器在向用户发送网页的同时，还发送了一段Cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie就行了。

2. 什么是 Cookie 及应用场景

Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。

如上图所示，Cookie 以键值对的形式存在。

典型的应用场景有：

  • 记住密码，下次自动登录。
  • 购物车功能。
  • 记录用户浏览数据，进行商品（广告）推荐。

3. Cookie 的原理及生成方式

Cookie 的原理

\

Cookie的生成方式主要有两种：

  • 生成方式一：http response header中的set-cookie

我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。默认情况下，domain 被设置为设置 Cookie 页面的主机名，我们也可以手动设置 domain 的值。如下：

可以指定一个特定的过期时间（Expires）或有效期（Max-Age）

当Cookie的过期时间被设定时，设定的日期和时间只与客户端相关，而不是服务端。

  • 生成方式二：js中可以通过document.cookie可以读写cookie，以键值对的形式展示

例如我们在掘金社区控制台输入以下三句代码，便可以在Chrome 的 Application 面板查看生成的cookie:

document.cookie="userName=hello"
document.cookie="gender=male"
document.cookie='age=20;domain=.baidu.com'

从上图中我们可以得出：

Domain 标识指定了哪些域名可以接受Cookie。如果没有设置domain，就会自动绑定到执行语句的当前域。 如果设置为”.baidu.com”,则所有以”baidu.com”结尾的域名都可以访问该Cookie，所以在掘金社区上读取不到第三条代码存储Cookie值。

5.4 认识请求 “正文”（body）

正文中的内容格式和 header 中的 Content-Type 密切相关. 上面也罗列了三种常见的情况。

  1. application/x-www-form-urlencoded

这种方式，最终的数据，就是通过 键值对 的方式，来进行组织的。

抓取码云上传头像请求：

以下是截取的部分请求正文：

\

  1. multipart/form-data

此方法的作用，就是上传一个文件，在上传的过程中进行抓包，可能会看到下面类似的情况：

如在一个网址上上传图片，可以看到请求报头如下：

以下是部分请求正文：

\

  1. application/json

可以登录系统网址进行抓包，可能会有以下情况：

以下为部分请求正文：

六、HTTP 响应详解

6.1 认识 “状态码”（status code）

状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况...)

以下为常见的状态码

200 OK

这是一个最常见的状态码, 表示访问成功.（抓到的大部分数据，其状态大都是200）

404 Not Found

当前要访问的资源不存在

举例：我们随便进一个搜狗页面：https://www.sogou.com/aaaa.html（aaaa.html 是我们自己加的，搜狗服务器上没有这样的文件路径）

403 Forbidden

表示访问被拒绝. 有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问). 如果用户没有登陆 直接访问, 就容易见到 403.

比如，在不是登录的状态下，直接从网址处访问 gitee 的私有仓库：

405 Method Not Allowed

前面我们已经学习了 HTTP 中所支持的方法, 有 GET, POST, PUT, DELETE 等.

但是对方的服务器不一定都支持所有的方法(或者不允许用户使用一些其他的方法).

例如，使用 GET 去访问人家的服务器，但是可能别人支持 POST，于是返回 405

500 Internal Server Error

服务器出现内部错误. 一般是服务器的代码执行过程中遇到了一些特殊情况(服务器异常崩溃)会产生这个 状态码.

504 Gateway Timeout

当服务器负载比较大的时候, 服务器处理单条请求的时候消耗的时间就会很长, 就可能会导致出现超时的 情况.

302 Move temporarily

临时重定向

理解”重定向“

就相当于手机号码中的 "呼叫转移" 功能. 比如我本来的手机号是 186-1234-5678, 后来换了个新号码 135-1234-5678, 那么不需要让我的朋 友知道新号码,

只要我去办理一个呼叫转移业务, 其他人拨打 186-1234-5678 , 就会自动转移到 135-1234-5678

上.

例如，在码云的登录界面：

点击登录后：

图中 为 302 Found，虽然提示信息不一样，都是 302，只是表现的形式不同。

我们可以看到红色框有个 Location键值对，就描述了接下来要跳转到哪个网页。

虽然 Location 也是一个 URL，但是和 Referer 刚好相反：

Location：记录当前的网址，下一个跳转的网址。【到哪去】

Referer：是记录当前网址，是从哪个网页跳转过来的。【从哪来】

在重定向响应中，一般都是需要 Location 属性的。

301 Moved Permanently

永久重定向. 当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址.

301 也是通过 Location 字段来表示要重定向到的新地址.

状态码小结（此处参考链接）

RFC 规定 HTTP 的状态码为三位数，被分为五类:

  • 1xx: 表示目前是协议处理的中间状态，还需要后续操作。
  • 2xx: 表示成功状态。
  • 3xx: 重定向状态，资源位置发生变动，需要重新请求。
  • 4xx: 请求报文有误。
  • 5xx: 服务器端发生错误。

\

6.2 认识响应 “报头”（header）

响应报头的基本格式和请求报头的格式基本一致

类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致.

Content-Type

响应中的 Content-Type 常见取值有以下几种:

  • text/html : body 数据格式是 HTML
  • text/plain：body 数据格式为 纯文本形式。
  • text/css : body 数据格式是 CSS
  • application/javascript : body 数据格式是 JavaScript
  • application/json : body 数据格式是 JSON

6.3 认识响应 “正文”（body）

正文的具体格式取决于 Connect-Type

七、通过代码来构造 HTTP 请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求

7.1 通过 form 表单构造 HTTP 请求

form 发送 GET 请求

form 的重要参数:

  • action: 构造的 HTTP 请求的 URL 是什么.
  • method: 构造的 HTTP 请求的 方法 是 GET 还是 POST (form 只支持 GET 和 POST).
<form action="http://abcdef.com/myPath" method="get">
    <input type="text" name="userId">
    <input type="text" name="classId">
    <input type="submit" value="提交">
</form>

页面显示效果：

在输入框随便填写数据：

点击 ”提交“，此时就会构造出 HTTP 请求并发送出去。

构造的 HTTP 请求：

GET http://abcdef.com/myPath?userId=100&classId=200 HTTP/1.1
Host: abcdef.com
Proxy-Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

注意： 由于我们的服务器的地址是随便写的, 因此无法获取到正确的 HTTP 响应

注意到，get 方法把正文内容加载到 query string（URL）上的

体会 form 代码和 HTTP 请求之间的对应关系：

  • form 的 action 属性对应 HTTP 请求的 URL
  • form 的 method 属性对应 HTTP 请求的方法
  • input 的 name 属性对应 query string 的 key
  • input 的 内容 对应 query string 的 value

\

form 发送 POST 请求

修改上面的代码, 把 form 的 method 修改为 POST

<form action="http://abcdef.com/myPath" method="post">
    <input type="text" name="userId">
    <input type="text" name="classId">
    <input type="submit" value="提交">
</form>

页面效果不变：

\

构造的 HTTP 请求：

POST http://abcdef.com/myPath HTTP/1.1
Host: abcdef.com
Proxy-Connection: keep-alive
Content-Length: 22
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

userId=100&classId=200

主要区别：

  • method 从 GET 变成了 POST
  • 数据从 query string 移动到了 body 中.

7.2 通过 Ajax 构造 HTTP 请求

form 表单是一个更加原始的构造方式。

使用 form 一定会涉及到 “页面跳转”。一旦点击了 提交 按钮，它就会进行 页面跳转。一旦页面跳转，浏览器需要加载出 全新页面。

所以在页面比较复杂的情况下，form 表单的构造方式就会使得页面加载变得非常低效。

为了进一步提高页面加载的效率，我们希望：页面不是全部加载，而是加载其中变化了的一小部分。

这种情况，就可以使用 Ajax 了。

Ajax：通过 js 代码，来构造出 HTTP 请求。再通过 js 代码来处理这里的响应，并且把得到的一些数据给更新到页面上。

ajax 全称 Asynchronous Javascript And XML。

Asynchronous：异步的，与 synchronized（同步）不是一类词，synchronized 真正的含义应是 互斥。

关于 异步 的举例：

比如在厨房用微波炉热东西，需要 2 分钟，这 2 分钟我可不能傻傻在那等着，我可以干别的事情，等到 2 分钟到了，我再去微波炉里拿东西。

也就是说，调用者再发送一个请求之后，就不管了。等到被调用者结果出来之后，会主动来通知调用者，这种情况就是异步。

原生 JS 的ajax构造请求

下面看下 ajax 具体的实现情况：

  1. 构造出一个 HTTP 请求，然后发送给服务器。
  2. 在发送 HTTP 请求之后，服务器什么时候返回响应，浏览器是不确定的。
  3. 浏览器采取的策略：先不管这个请求，是否有回应了，浏览器继续执行其他代码。
  4. 如果服务器响应回来了，再由浏览器通知我们对应的 JS 代码，以回调函数的方式来处理响应。

下面为代码：

<script>
  //1.创建 XMLHttpRequest 对象
  let httpRequest = new XMLHttpRequest();
  //2.默认异步处理响应，需要挂在处理响应的回调函数
  httpRequest.onreadystatechange = function() {
    //readState 表示当前的状态
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 请求处理中
    // 4: 请求已完成，且响应已就绪
    if (httpRequest.readyState == 4) {
      // status 属性获取 HTTP 响应状态码
      console.log(httpRequest.status);
      // responseText 属性获取 HTTP 响应 body
      console.log(httpRequest.responseText);
    }
  }
  //3.调用 open 方法设置要访问的 url
  httpRequest.open('GET', 'http://42.192.83.143:8080/AjaxMockServer/info');
  //4.调用 send 方法发送 http 请求
  httpRequest.send();
</script>

上面代码是通过原生 JS 的 Ajax 来构造请求，并处理响应的。

原生的写法非常麻烦，也比较抽象，不好理解。

下面我们来使用一个更简单，也更好理解的方式来构造请求。

使用 jQuery 中的 ajax 构造请求

首先要做的是，引入 jQuery：

<script src="jquery.js"></script>
<script>
    $.ajax({
        type: "get",
        url: "http://www.sogou.com/index.html",
        success: function(body) {
            console.log("获取到响应数据了！ " + body);
        },
        error: function() {
            console.log("获取响应失败！");
        }
    })
</script>
  • $ 是一个变量名，js 允许 $作为变量名的一部分。$是 jQuery 中 最核心的对象，jQuery 的各种 api，都是通过 $来触发的。大括号内的键值对，来表示参数，可以通过 w3school.com.cn/jquery/ajax… 来查看不同的参数。
  • type 等价 form 标签中的 method 属性，可以使用 get、post、put 等方法。
  • url要访问的地址。
  • success是一个回调函数，这个函数在正确获取到 http 响应之后，被调用执行。回调函数的参数，就是 http 响应的 body 部分。
  • error也是一个回调函数，在请求失败之后触发。

代码运行结果：

发现什么都没有，f12 打开开发者工具：

这正是我们代码中写的 error 回调函数所触发的：

接着，我们通过抓包工具 Fiddler 来查看抓包结果：

可以发现，响应是正常的（状态码 200，状态描述OK），body也是存在的。但是，就是没有页面显示效果。

即浏览器仍然认为这个一个”出错“的请求，再来看下开发者工具中的错误提示：

这错误信息大致意思为：浏览器禁止 ajax 跨域访问

ajax 跨域访问

跨域，即为跨越 多个域名/多个服务器。

像上述代码的页面所在服务器，是本地文件。页面中 ajax 请求的 URL，域名是 www.sogou.com。

因为这两个地址不一致，就会触发 跨域操作。而这种跨域操作，浏览器是不允许的。

怎么才算不跨域

当前页面处在的服务器，就是在 www.sogou.com 中。

即为，本来当前的页面就是属于搜狗服务器范围的，此时页面中就可以通过 ajax 请求 URL，域名为 www.sogou.com。

这样就不会跨域操作了。

浏览器为什么要限制跨域操作

完全是出于安全考虑，如果使用 ajax 对服务器一顿乱访问，那么就会对服务器产生很大的压力。

\

7.3 通过 Java - Socket 来构造 HTTP 请求

这里不是讲解的重点，简单讲一下。

Java 构造一个HTTP请求，主要就是基于 TCP socket。

按照 HTTP 请求的报文格式，构造出一个匹配的字符串。

再写入 socket 既可

可以参考一下
public class HttpClient {
    private Socket socket;
    private String ip;
    private int port;
    public HttpClient(String ip, int port) throws IOException {
        this.ip = ip;
        this.port = port;
        socket = new Socket(ip, port);
    }
    public String get(String url) throws IOException {
        StringBuilder request = new StringBuilder();
        // 构造首行
        request.append("GET " + url + " HTTP/1.1\n");
        // 构造 header
        request.append("Host: " + ip + ":" + port + "\n");
        // 构造 空行
        request.append("\n");
        // 发送数据
        OutputStream outputStream = socket.getOutputStream();
        outputStream.write(request.toString().getBytes());
        // 读取响应数据
        InputStream inputStream = socket.getInputStream();
        byte[] buffer = new byte[1024 * 1024];
        int n = inputStream.read(buffer);
        return new String(buffer, 0, n, "utf-8");
    }
    public String post(String url, String body) throws IOException {
        StringBuilder request = new StringBuilder();
        // 构造首行
        request.append("POST " + url + " HTTP/1.1\n");
        // 构造 header
        request.append("Host: " + ip + ":" + port + "\n");
        request.append("Content-Length: " + body.getBytes().length + "\n");
        request.append("Content-Type: text/plain\n");
        // 构造 空行
        request.append("\n");
        // 构造 body
        request.append(body);
        // 发送数据
        OutputStream outputStream = socket.getOutputStream();
        outputStream.write(request.toString().getBytes());
        // 读取响应数据
        InputStream inputStream = socket.getInputStream();
        byte[] buffer = new byte[1024 * 1024];
        int n = inputStream.read(buffer);
        return new String(buffer, 0, n, "utf-8");
    }
    public static void main(String[] args) throws IOException {
        HttpClient httpClient = new HttpClient("42.192.83.143", 8080);
        String getResp = httpClient.get("/AjaxMockServer/info");
        System.out.println(getResp);
        String postResp = httpClient.post("/AjaxMockServer/info", "this isbody");
        System.out.println(postResp);
    }
}

在实际开发中，确实也会有一些基于Java 构造 HTTP 请求的情况。

这些情况，其实都可以基于第三方库来实现。

不一定非得要直接使用 socket，因为socket 使用起来比较麻烦。

你从代码量就可以看出来的。

\

\

八、HTTPS

此处引用 程序员cxuan 的文章。

\

avatar
文章
阅读
粉丝