1.HTTP协议

1.1HTTP是什么

HTTP(全程为"超文本传输协议")是一种给应用广泛的 应用层协议.

HTTP往往是基于传输层的TCP协议实现的.(HTTP1.0, HTTP1.1,HTTP2.0均为TCP,HTTP3基于UDP实现)

目前我们主要使用的是HTTP1.1和HTTP2.0

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

1.2理解"应用层协议"

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

可是仅仅是把数据从A主机传送到B主机就完了吗?

所以,我们把数据从A主机发送到B主机,TCP/IP解决的是发送数据的问题,而两端还要对数据进行加工处理或使用,这层协议叫做应用层协议.

应用层协议有着不同的种类,其中最经典协议之一是HTTP

1.3理解HTTP协议的工作过程

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

事实上我们访问一个网站的时候,我们可能涉及不止一次的HTTP请求/响应的过程

我们通过chrome的开发者工具或者Fiddler(或者其他的抓包工具),以下是打开百度浏览器发送的部分请求,我们重点看蓝色的部分

2.HTTP协议格式

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

2.1抓包工具的原理

Fiddler相当于一个"代理"

当浏览器访问网站的时候,会先将HTTP请求发送给Fiddler,Fiddler再把相关的请求转发给相应的服务器.当响应的服务器返回数据的时候,Fiddler拿到返回数据,再把数据交给浏览器.

2.2抓包结果

以下是一个HTTP请求/响应的抓包结果

HTTP请求

HTTP响应

2.3协议格式总结

3.HTTP请求(Request)

3.1认识URL

3.1.1URL基本格式

平时我们俗称的"网址"其实就是说的URL(Uniform Resource Locator又称统一资源定位符).互联网上的每一个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器浏览器应当怎么处理它.URL的详细规则由因特网标准RFC1738进行了约定(https://datatracker.ietf.org/doc/html/rfc1738)

一个具体的URL:

https:协议方案名.常见的由http和https,也有其他类型(例如访问mysql时用的jdbc:mysql)
user:pass:登录信息.现在的网站进行身份认证不再通过URL进行了,一般都会省略此项
v.bitedu.vip:服务器地址.此处是一个"域名",域名会通过DNS系统解析成一个具体的IP地址.
端口号:上面的URL中端口号已经被省略了.当端口号被省略的时候,浏览器会根据协议类型自动决定使用哪一个端口号.例如http协议默认使用80端口,https协议默认使用443端口.
/personInf/student:带层次的文件路径
userId=10000&classId=100:查询字符串(query String).本质是一个键值对结构.键值对之间使用&分割.键与值之间使用=分割
片段标识符:此处URL中省略了片段标识符.片段标识符主要用于页面内跳转,形式例如:/#...,通过不同的判断标识跳转到页面不同的位置.

3.1.2关于URL encode

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

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

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

"+"被转义成了"%2B","\"被转义成了"%5C"

3.2认识方法

方法	说明
get	获取资源
post	传输实体主体

[注]:http其实有很多的方法,但是这两种是最重要,也是绝大多数时候用到的.

3.2.1get方法

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

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

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

我们抓取一个搜狗主页的包,分析以下get请求的特点.

[get请求的特点]

首行的第一部分为GET
URL的query String可以为空(就是链接"?"后面的部分),也可以不为空
header部分有若干个键值对结构
body部分为空

3.2.2post方法

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

[post请求的特点]

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

3.3认识请求报头

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

每个键值对占一行,键和值直接使用";"分割

3.3.1Host

标识服务器的主机的地址和端口

3.3.2Content-length

表示请求中body的数据长度

3.3.3Content-Type

表示请求中body中的数据格式的类型

常见选项:

appliation/x-www-form-urlencoded: form表单提交的数据格式.此时body的格式如下:

multipart/form-data: form表单提交的数据格式(在form标签中加上enctyped="multipart/form-data".通常用于提交图片/文件
application/json:数据格式为json. body格式形如:

3.3.4User-Agent(简称UA)

表示浏览器/操作系统的属性.形如

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

AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.50 表示浏览器的信息

3.3.5Referer

表示这个页面是从哪个页面跳转过来的.形如

如果直接在浏览器中输入URL,或者直接从收藏夹访问是没有Referer.

3.3.6Cookie

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

往往可以通过这个字段实现"身份标识"的功能

【理解登录过程】

4.HTTP响应详解

4.1认识“状态码”（status code)

状态码标识访问一个页面的结果。（是访问成功，还是失败，还是其他的一些情况）

状态码	解释
200	OK ，表示访问成功
404	Not Found ，没有找到资源
403	Forbidden ，表示访问被拒绝（原因：没有权限等原因，比如管理员才能访问的页面）
405	Method Not Allowed ，对方的服务器不一定支持所有的方法（请求的方法没有被实现，比如：没有实现PUT方法，发送的是PUT请求）
500	Internal Server Error ，服务器出现内部错误
504	Gateway Timeout ，当服务器负载比较大的时候，服务器处理单条请求就会消耗较长的时间，就会导致超时状况
302	Move temporarily ，临时重定向，资源临时被转移到别处，会再次发送HTTP请求访问新地址的资源
301	Moved Permanently ，永久重定向，资源永久被转移到新的地址，后序的请求会被自动改成新的地址

大致可以分为以下几类：

	类别	原因短语
1XX	Informational（信息性状态码）	接收的请求正在处理
2XX	Success（成功状态码）	请求正常处理完毕
3XX	Redirection（重定向状态码）	需要附加操作以完成请求
4XX	Client Error（客户端错误状态码）	服务器无法处理请求
5XX	Server Error（服务器错误状态码）	服务器处理请求出错

4.2Content-Type

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

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

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

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

5.1form发送GET请求

from的重要参数：

action：构造的HTTP的URL是什么
method:构造的HTTP请求的方法是GET还是POST（form只支持get和POST）

input的重要参数：

type：表示输入框的类型。test表示文本，password表示密码，submit表示提交按钮
name：表示构造出的HTTP请求的query string的key。query string的value就是输入框的用户输入的内容
value：input标签的值。对于type为submit类型来说，value就是对应了按钮上显示的文本

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://abcdef.com/myPath" method="GET">
        <input type="text" name="userId">
        <input type="text" name="classId">
        <input type="submit" value="提交">
    </form>
</body>

5.2form发送POST请求

我们修改上面的代码，把form的method修改为POST即可

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

主要区别：

method从get变为post
数据从query string移动到了body中

6.通过ajax构造HTTP请求

从前端角度，除了浏览器地址构造GET请求，form构造GET和POST之外，还可以通过ajax的方式来构造HTTP请求，并且功能更加强大。

js提供的原生ajax的api，这个api使用很不方便，我们使用jquery这种方式来使用ajax，jquery还可以使用“$"符来表示。

6.1通过ajax构造请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
    <script>
        $.ajax({
            url:"https://www.sogou.com",
            type:"post",
            data:"这是body",
            contentType:"text/plain",
            success:function(body) {
                console.log(body);
            }
        });
    </script>>
</body>
</html>

我们打开网页，会发现这是个空白页面或者是其他的不正常的东西（这个是关于跨域问题，是正常现象），我们打开F12，发现出现个报错，这个就是ajax的缺点，我们请求的东西，服务器不给我们响应。这种方法我们了解即可