JavaScript --json格式字符串和对象的转化-CFANZ编程社区

一. 初识HTTP协议

3.2 URLEnode和URLDecode

五. 通过 form 表单构造 HTTP 请求

这篇博客我们来讲解HTTP协议原理部分，以便我们后续的代码编写。

一. 初识HTTP协议

HTTP协议是位于应用层上的协议，HTTP协议叫做超文本传输协议。他定义了客户端（如浏览器）与服务端之间如何通信。

我们日常在浏览器输入网址进行浏览时，就是用的HTTP协议来进行数据传输。

二. HTTP协议格式

2.1 抓包工具

我们先来认识一下HTTP协议的格式。我们用一个抓包工具来分析一下HTTP协议。

此处我们用FIddler工具来抓包。Fiddler 抓包工具的原理就相当于一个"代理"，当我们在浏览器中输入一个网址时，会生成HTTP请求发送给代理，然后代理再把这个HTTP请求发送给服务器，服务器在收到请求后会生成一个HTTP响应，代理收到响应后再发送给浏览器。

Fiddler工具下载地址：Web Debugging Proxy and Troubleshooting Tools|Fiddler

首先点击此处。

然后点击此处下载即可。

打开下载好的Fiddler工具，首次使用需要设置开启https（因为当前网络使用的主要协议是https，很少使用http）。

点击Tools，点击Options。

在，弹出来的地方点击HTTPS，勾选所有蓝色框内的小框。（期间会弹出来一个证书下载框，务必下载，不然会导致无法抓包）

安装完成，接下来就可以使用Fiddler了。

我们来看看具体的HTTP请求与HTTP响应的格式。

2.2 HTTP请求格式

上图就是HTTP请求协议格式。咱们来细讲一下各段。

请求行：

请求方法：HTTP的方法，获取资源和传输主体。

URL：输入的网址。

HTTP版本：使用的HTTP协议的版本号，如HTTP/1.0。

请求报头：header，里面是一行行的键值对，个数不限制。

空行：请求报头的结束标志。

请求正文：空行后面的内容都是正文，正文可以是空字符串。如果正文有内容，则在请求报头里面会有一个 Content-Length 属性来标识正文的长度。如果服务器返回了一个 html 页面 , 那么html页面内容就是在body中。

来看看实际HTTP请求中各段的样子：

2.3 HTTP响应格式

上图就是HTTP响应协议格式。咱们来细讲一下各段。

状态行：

HTTP版本：使用的HTTP协议的版本号，如HTTP/1.0。

状态码：不同的状态码代表了不同的信息，例如 200 是一个最常见的状态码，还有 404 。

状态码描述：状态码对应的描述，例如状态码 200 对应的就是 OK ，404 对应的就是 Not Found。

响应报头：header，里面是一行行的键值对，个数不限制。

空行：响应报头的结束标志。

请求正文：空行后面的内容都是正文，正文可以是空字符串。是服务器返回给客户端的具体数据。

来看看实际HTTP响应中各段的样子：

三. HTTP请求详解

3.1 认识URL

前面说过，我们在浏览器中输入的网址相当于URL，URL的组成如下：

3.2 URLEnode和URLDecode

像 / ? : 等这样的字符, 已经被 url 当做特殊意义理解了. 因此这些字符不能随意出现.

比如, 某个参数中需要带有这些特殊字符, 就必须先对特殊字符进行转义。

转义的规则如下:

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

例如：

"+" 被转义成了 "%2B"

urldecode 就是 urlencode 的逆过程;这里给个工具，读者自行查看（点此查看）感受如何URLEncode。

3.3 认识HTTP方法

最常用的是GET方法和POST方法。

3.4 常见请求报头

Content-Type

表示请求的正文中的数据格式。

Content-Length

表示正文的长度。

Host

表示浏览器这个请求要访问的服务器的地址和端口。

大多数情况下，Host 中的值和 URL 中的域名是一致的；但是如果当我们访问的服务器不是直接访问，而是通过”代理“来访问的，此时 Host 和 URL 可能就不一致了（相当于 Host 是最终目标，URL是当前目标）。因此在这里 Host写一遍去确认访问的服务器是什么。

User-Agent

声明用户的操作系统和浏览器版本信息，通俗来讲就是表明是电脑还是手机，和版本信息。

referer

表示当前页面是从哪个页面跳转过来的。如果直接在浏览器中输入 URL, 或者直接通过收藏夹访问页面时是没有 Referer 的。

这个方便我们进行操作。

Location

搭配 3xx 状态码使用, 告诉客户端接下来要去哪里访问。

Cookie

用于在客户端存储少量信息. 通常用于实现会话(session)的功能。

Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据)。往往可以通过这个字段实现 "身份标识" 的功能。

Cookie是当浏览器第一次访问服务器时，服务器返回响应给浏览器的同时也附带cookie给浏览器。这样浏览器下一次再访问服务器时，带着这个cookie，此时服务器就会自动识别浏览器的身份。 Cookie一般是保存在浏览器本地上。在服务器上会保存着Session。

读者打开浏览器，点击上方的小锁。

点击之后就会出现Cookies。

进去就能看到当前保存的Cookies数据。

关于 Connection 报头

HTTP 中的 Connection 字段是 HTTP 报文头的一部分，它主要用于控制和管理客户端与服务器之间的连接状态。

四. HTTP 响应详解

4.1 HTTP 的状态码

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

以下为状态码的类别：

下面是常见的状态码：

状态码	含义	应用样例
100	Continue	上传大文件时，服务器告诉客户端可以继续上传
200	OK	访问网站首页，服务器返回网页内容
201	Created	发布新文章，服务器返回文章创建成功的信息
204	No Content	删除文章后，服务器返回“无内容”表示操作成功
301	Moved Permanently	网站换域名后，自动跳转到新域名；搜索引擎更新网站链接时使用
302	Found 或 See Other	用户登录成功后，重定向到用户首页
304	Not Modified	浏览器缓存机制，对未修改的资源返回304 状态码
400	Bad Request	填写表单时，格式不正确导致提交失败
401	Unauthorized	访问需要登录的页面时，未登录或认证失败
403	Forbidden	尝试访问你没有权限查看的页面
404	Not Found	访问不存在的网页链接
500	Internal Server Error	服务器崩溃或数据库错误导致页面无法加载
502	Bad Gateway	使用代理服务器时，代理服务器无法从上游服务器获取有效响应
503	Service Unavailable	服务器维护或过载，暂时无法处理请求

这里再说说重定向的相关状态码：

状态码	含义	是否为临时重定向	应用样例
301	Moved Permanently	否（永久重定向）	网站换域名后，自动跳转到新域名；搜索引擎更新网站链接时使用
302	Found 或 See Other	是（临时重定向）	用户登录成功后，重定向到用户首页
307	Temporary Redirect	是（临时重定向）	临时重定向资源到新的位置（较少使用）
308	Permanent Redirect	否（永久重定向）	永久重定向资源到新的位置（较少使用）

关于重定向的验证，以 301 为代表。

HTTP 状态码 301（永久重定向）和 302（临时重定向）都依赖 Location 选项。

以下是关于两者依赖 Location 选项的详细说明：

HTTP 状态码 301（永久重定向）：

• 当服务器返回 HTTP 301 状态码时，表示请求的资源已经被永久移动到新的位置。

• 在这种情况下，服务器会在响应中添加一个 Location 头部，用于指定资源的新位置。这个 Location 头部包含了新的 URL 地址，浏览器会自动重定向到该地址。

• 例如，在 HTTP 响应中，可能会看到类似于以下的头部信息：

HTTP/1.1 301 Moved Permanently\r\n
Location: https://www.new-url.com\r\n

HTTP 状态码 302（临时重定向）：

• 当服务器返回 HTTP 302 状态码时，表示请求的资源临时被移动到新的位置。

• 同样地，服务器也会在响应中添加一个 Location 头部来指定资源的新位置。浏览器会暂时使用新的 URL 进行后续的请求，但不会缓存这个重定向。

• 例如，在 HTTP 响应中，可能会看到类似于以下的头部信息：

HTTP/1.1 302 Found\r\n
Location: https://www.new-url.com\r\n

总结：无论是 HTTP 301 还是 HTTP 302 重定向，都需要依赖 Location 选项来指定资源的新位置。这个 Location 选项是一个标准的 HTTP 响应头部，用于告诉浏览器应该将请求重定向到哪个新的 URL 地址。

4.4 常见请求报头

响应报头的格式和请求报头的格式基本一致。像 Content-Type , Content-Length 等属性的含义也和请求中的含义一致。不过响应的 Content-Type 常见取值有这几种：

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 JavaScript
application/json : body 数据格式是 JSON

五. 通过 form 表单构造 HTTP 请求

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

<form action="https://www.baidu.com/" method="GET">
    <input type="text" name="userId">
    <input type="password" name="classId">
    <input type="submit" value="提交">
</form>

抓包如下：