HTTP概述前端开发中的HTTP协议

Posted 2021-04-24 物联网技术交流平台

1. HTTP — 因特网的多媒体信使

因特网可以简单的分为三个部分：

• 客户端： 通常是我们日常使用的浏览器，比如Chrome，Firefox等。

• 传输层： 从物理方面看就是网线，而在网线中传输的二进制码是通过TCP协议进行编码的。为了保证传输的可靠性。在TCP协议的基础上出现了HTTP协议

• 服务端： 各类Web应用的服务器2. MIME

2. MIME

媒体类型MIME（Multipurpose Internet Mail Extension）最初设计是为了解决不同的电子邮件系统之间搬移报文时存在的问题。

MIME类型是一种文本标记，表示一种主要的对象类型和一个特定的子类型，中间由一条斜杠来分割。

• html格式 text/html

• ASCII文本 text/plain

• JPEG图片 image/jpeg

• GIF图片 image/gif

假设我们需要请求一个图片名字为andmu.jpeg，这个时候浏览器就会在其头文件里面增加一个MIME信息：

Content-Type: image/jpeg

Content-length: 1231233

3. URI

4. URL

• URL 的第一部分被称为 方案(scheme) ， 比如HTTP

• 第三部分是路径

这里顺便提一下：在前端中的我们常用的window.location对象就包含这三个属性

• location.scheme

• location.host 这里的host包含端口信息

• location.pathname

5. URN

统一资源名(URN)是作为特定内容的唯一名称使用的，与目前的资源所在地无关

6. 事务

• 方法

• GET 从服务器向客户端发送命名资源

• PUT 将来自客户端的数据存储到一个命名的服务器资源中去

• DELETE 从服务器中删除命名资源

• POST 将客户端数据发送到一个服务器网关应用程序

• HEAD 仅发送命名资源响应中的 HTTP 首部

其中前端日常开发中常用的方法主要是GET以及POST

7. 状态码

• 200 OK。文档正确返回

• 302 Redirect(重定向)。到其他地方去获取资源

• 404 Not Found(没找到)。无法找到这个资源

我们浏览网页经常会遇见的是404状态码，不过其实我们200才是使用频率最高的。只是不会展示在浏览器页面上。

8. 报文

HTTP 报文包括以下三个部分：

• 起始行

• 首部字段 比如上面提到的MIME 就包含在里面

• 主体 这个可以是HTML文件、图片视频的二进制文件

9. 协议版本

现在主要使用的是HTTP/1.1

10. Web 的结构组件

• 代理 比如我们使用的nginx服务器就是一种代理。通常成为反向代理

• 缓存 缓存资源加速访问速度

• 网关 就对协议进行转换，比如我们通过浏览器访问www.andmu.cn, 需要下载一个视频。但是这个视频不在andmu.cn的服务器上，而在一个FTP服务器上，这个时候就需要利用网关进行协议的转换这样。对于一般的用户就不必关心。FTP协议的问题

• 隧道 通过隧道可以对传输的信息进行加密。

• Agent 代理 这个通常就是我们日常使用的fan墙软件，还有那些爬虫程序

11. URL与资源

上文已提到URL分为三个部分： URL 方案、服务器的位置、资源路径。

这个是日常开发中需要经常遇见的。有时候需要根据服务器的位置（域名）进行判断，针对不同的资源路径展示不同的页面。

12. URL的语法

<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>

其中scheme不用多说：常用的就是http， https。user，password主要涉及到需要授权的地方。这个也不常用。现在主要都是使用token进行权限判断。

这里个人主要谈谈query和frag

首先是query：

日常开发中主要会以这种方式和服务器交互，比如说前面提及的token。

query的形式为?token=xxxxxx&deviceId=xxxxxx 这句话传递了token和deviceId两个信息，比如Node.js服务端的代码会读取这部分的内容。也可以对请求的query进行分割。读取token和deviceId

然后是frag：

这个在前端开发里，比如说我要访问当前页面某个地方。我可以在这个地方设置

<div id=foo>test</div>

然后在URL里面加入#foo浏览器就会自动展示test所在的页面。

顺便提一下： 前端的框架React.js 的路由控制库 react-router 在单页应用中就利用了frag。

13. URL快捷方式

在日常开发中个人会遇见一下涉及路径的问题。有时候会采取绝对路径/foo/bar/xxxx，有时候根据需要得使用相对路径 ./bazzzz.html

如果我们访问的是www.andmu.cn/foo/test1.html按照相对路径的逻辑就变成 www.andmu.cn/foo/bazzzz.html

14. URL编码

URL 是可移植的(portable)。它要统一地命名因特网上所有的资源,这也就意味着 要通过各种不同的协议来传送这些资源。这些协议在传输数据时都会使用不同的机 制,所以,设计 URL,使其可以通过任意因特网协议安全地传输是很重要的。

通常在日常开发中会使用 encodeURIComponent 和 decodeURIComponent 这两个函数来进行编码和解码。

比如说和目这两个字 经过URL编码就变成%E5%92%8C%E7%9B%AE 这样中文的和目就变成安全的URL字符。

本文完。

觉得本文有收获？请转发分享给更多人

关注「 物联网技术交流平台 」，了解更多知识