前端核心之:HTTP 简述

前端开发的核心知识,我们一般首先想到的就是HTML、CSS、JS。其实还有一个重要的核心知识就是HTTP,也是面试必问的一个知识点。这里只是简单的跟大家介绍跟HTTP有关的内容,如果想更深入的学习HTTP,推荐一本书叫《图解HTTP》。

一、HTTP概述

中文翻译是超文本传输协议(英文:HyperText Transfer Protocol,简称:HTTP)。是一种用于分布式、协作式和超媒体信息系统的应用层协议,HTTP是万维网的数据通信的基础。是一个客户端终端(用户)和服务器端(网站)请求和应答的标准。通过使用网页浏览器、网络爬虫或者其它的工具,客户端发起一个HTTP请求到服务器上指定端口(默认端口为80)。我们称这个客户端为用户代理程序(user agent)。应答的服务器上存储着一些资源,比如HTML文件和图像。我们称这个应答服务器为源服务器(origin server)。在用户代理和源服务器中间可能存在多个"中间层",比如代理服务器、网关或者隧道。

二、HTTP的请求与响应

 Server + Client + HTTP

服务器与浏览器的交互

基本过程:(1)浏览器负责发起请求。(2)服务器在 80 端口接收请求(3)服务器负责返回内容(响应)。(4)浏览器负责下载响应内容。

命令行请求和响应示例

(1) curl -s -v -H "MyHeader: helloworld" -- "https://www.baidu.com"

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

上面是用curl创造一个GET请求,请求的内容为:

> GET / HTTP/1.1

> Host: www.baidu.com

> User-Agent: curl/7.55.0

> Accept: */*

> MyHeader: helloworld

(2) curl -X POST -s -v -H "Frank: xxx" -- "https://www.baidu.com"

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

上面是用curl创造一个POST请求,请求的内容为:

> POST / HTTP/1.1

> Host: www.baidu.com

> User-Agent: curl/7.55.0

> Accept: */*

> MyHeader: helloworld

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

用curl创造另一个POST请求
用curl创造另一个POST请求2

上面是用curl创造另一个POST请求,请求的内容为:

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

Chrome查看请求和响应

用 Chrome 发请求:

1、打开 Network

2、地址栏输入网址

3、在 Network 点击,查看 request,点击「view source」

4、点击「view source」、点击「view source」、点击「view source」,终于点了?可以看到请求的前三部分了。如果有请求的第四部分,那么在 FormData 或 Payload 里面可以看到。

用 Chrome 查看响应:

1、打开 Network

2、输入网址

3、选中第一个响应

4、查看 Response Headers,点击「view source」,点击「view source」,点击「view source」

     你会看到响应的前两部分,查看 Response 或者 Preview,你会看到响应的第 4 部分。

三、请求和响应总结

请求的格式:

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 要上传的数据

请求最多包含四部分,最少包含三部分。(也就是说第四部分可以为空)

第三部分永远都是一个回车(\n)

动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等

这里的路径包括「查询参数」,但不包括「锚点」

如果你没有写路径,那么路径默认为 /

第 2 部分中的 Content-Type 标注了第 4 部分的格式

响应的格式:

1 协议/版本号 状态码 状态解释

2 Key1: value1

2 Key2: value2

2 Content-Length: 17931

2 Content-Type: text/html

3

4 要下载的内容

状态码要背,是服务器对浏览器说的话

1xx 不常用

2xx 表示成功

3xx 表示滚吧

4xx 表示你丫错了

5xx 表示好吧,我错了

状态解释没什么用

第 2 部分中的 Content-Type 标注了第 4 部分的格式

第 2 部分中的 Content-Type 遵循 MIME 规范

四、HTTP 的作用

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

你可能感兴趣的:(前端核心之:HTTP 简述)