HTTP协议

two 倩

已于 2022-10-12 01:53:39 修改

阅读量194

点赞数

文章标签： http 网络网络协议

于 2022-08-18 00:18:17 首次发布

本文链接：https://blog.csdn.net/m0_58342797/article/details/126396646

版权

HTTP协议是应用层的协议

HTTP：（Hypertext transfer protocol）超文本传输协议，是用于从万维网（WWW:World Wide Web）服务器传输超文本到本地浏览器的传送协议。

基于TCP/IP协议，我们可以实现数据发送的过程；而这个数据是由应用层产生的

比如QQ聊天，小明给小红发送"hello","hello"这个数据将会基于应用层协议封装，放于传输层内传输，小红的应用层收到数据之后，也根据应用层协议进行数据解析，得到"hello"这个数据

而HTTP协议就是应用层应用最广泛的协议

HTTP协议发展至今，出现了许多版本；HTTP1.0,HTTP1.1,HTTP2.0等，而HTTP1.0,HTTP1.1,HTTP2.0都是基于TCP实现的，HTTP3基于UDP实现

目前，广泛使用的还是HTTP1.1和HTTP2.0

我们平时打开一个网站，就是基于HTTP协议实现的

HTTP协议的工作步骤

在这里插入图片描述

HTTP协议的格式

HTTP协议是一个文本文件，用于传输各种数据，包括图片，视频等

使用Fiddler抓包

HTTP请求

在这里插入图片描述

分为四个部分：
首行：方法+网址+版本号
header（首部）：由多行内容组成，每一行都是键值对的格式
空行：header遇到空行结束
body（正文）：body可以为空，如果有body，则header会有Content-length属性，标识body长度

HTTP响应

在这里插入图片描述

分为四个部分：
首行：版本号+状态码+状态码描述；版本号:HTTP1.1，状态码：200，通过状态码表示响应成功还是失败；状态码描述：通过简单的单词，描述这个状态码
header（首部）：由多行内容组成，每一行都是键值对的格式
空行：header遇到空行结束
body（正文）：服务器返回的数据

URL

URL，也就是网址

URL：（Uniform Resource Locator）统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

一个标准的URL满足以下格式：

在这里插入图片描述

但是，有很多部分可以被省略

urlencode

在url中，像/,?,#,&等字符，已经被作为分隔符了，就导致我们要将实际数据中的特殊字符进行转义（%+16进制）
在这里插入图片描述
例如：c++中的+，+转为16进制就是2B,c++就表示为c%2B%2B

urldecode：就是urlencode的逆过程

方法

对于服务器的操作

在这里插入图片描述
GET和POST是常用的两种方法

GET：用于从服务器获取信息

GET请求的特点：
在这里插入图片描述

1、方法名为GET

2、URL可以包含query部分，也可以不包含query部分

3、一般情况下，body部分为空

POST请求：用于给浏览器发送数据
在这里插入图片描述

POST请求特点：

1、方法名为post

2、URL可以包含query ，也可以不包含

3、body部分一般不为空{数据为空，也存放{}}

GET和POST的区别

1、GET也可以向服务器提交数据，POST也可以从服务器获取数据，所以两个在使用场景上没有区别，完全可以相互替换

2、通常情况，GET没有body部分，通过query字段传递数据

3、通常情况，POST没有query部分，通过body字段传递数据

4、GET一般是幂等的，POST一般不是幂等的

搜索“裙子”，如果是GET，浏览器保留之前的记录，返回之前的界面，而POST不会保留之前记录，搜出来的界面可能和之前不同，这样用户可以看到新的样式

5、GET一般可以缓存，POST不可以缓存（基于幂等）

header

内部是多种键值对
在这里插入图片描述

Host：表示服务器主机和端口

Content-Length:body数据的长度

Content-Type: body数据的格式

粘包问题

HTTP1.1是基于TCP协议的，TCP是面向字节流的，就会造成粘包问题

1、TCP存在发送缓冲区，数据是放入发送缓冲区内发送的，发送缓冲区满了之后才会发送数据；假设用户连续发三次数据，每次发送的数据非常短，那么TCP就可能为了提高效率，将这几个数据打包到一起，从而服务器收到的是整体的数据，造成粘包问题

2、TCP存在接收缓冲区，服务器的应用层会从接收缓冲区读取数据；如果接收缓冲区是3个字节，里面还有一个1没被取走，又接收了一个TCP，数据2 3，那么1 2 3将会被看作一个数据包而被读取，也是粘包问题

我们认为，粘包问题的主要原因还是2；

解决办法：让服务器的应用层提前知道发送数据的长度，然后循环读取所有数据，保证在下一个TCP带来之前，接收缓冲区没有数据残留

这个长度，就是由Content-Length指定
一般情况下，如果是多个GET请求，也即是没有body部分，包与包之间的间隙就是空行；如果是多个GET请求，也就是有body部分，包和包之间的界限就是Content-Length

User-Agent

表示操作系统+浏览器的属性
在这里插入图片描述
在以前，浏览器发展过快，版本和种类太多，使用这个属性区别浏览器版本和种类；现在，各种浏览器功能基本都很完善，这个属性更用于区分是手机端还是PC端

Referer

用于表示当前页面是从哪一个页面跳转过来的

在这里插入图片描述

Cookie

正常情况下，我们是不允许浏览器可以访问我们的磁盘的；万一浏览器页面包含恶意代码，我们的磁盘文件就可能被全部删除；但是，比如说在淘宝购物，我们的银行卡信息和用户信息是要持久化保存的，如果不保存，每次随着我们系统关机或者程序关闭，下一次打开淘宝，我们就要重新登录和绑定银行卡，这就太麻烦了；而持久化保存，就需要保存在磁盘里

所以，我们需要给每一个网站开辟磁盘的一小块区域，用于存储这个网站所需要持久化存储的信息，而这个小房间，较为经典的描述就是cookie
在这里插入图片描述
HTTP协议是无状态的协议。A客户端可以连接，B客户端可以连接，HTTP协议是无法从连接上判断用户是谁的；这就相当于在淘宝买东西，A添加了一个商品进入购物车，而在淘宝服务器来看，它是无法区分这个A用户还是B用户买的，也就不知道加入哪一个购物车

这就需要给用户设置一个唯一标识的id，这个id就是cookie，比如A用户的session是1，A用户每发送一个请求，都会携带上这个1，服务器就知道发送请求的是A用户了

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了

服务器第一次接收到请求时，开辟了一块Session空间（创建了Session对象），同时生成一个Session id，并通过响应头的Set-Cookie，向客户端发送要求设置cookie的响应；客户端会保存cookie，当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户身份。

状态码

用于表示服务器处理请求的状态，成功还是失败

200 ok：表示连接成功
404 Not Found :表示请求访问的资源并不存在
403 Forbidden：表示请求访问的资源存在，但是并没有权限访问
500 Internal server error:表示服务器出现故障
504 Gateway Timeout：表示服务器处理请求时间过长，服务器繁忙
302 Move temporarily：表示旧的地址仍然存在，不过暂时需要用户使用新的地址（header的location字段存储新地址，会自动跳转）
301 Moved Permanently:表示旧的地址不存在，需要用户使用新的地址（header的location字段存储新地址，会自动跳转）

发出HTTP请求

1、使用form表单

HTML 的form表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等

Action 属性

action 属性一般定义跳转的网址

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

Name 属性

每个输入字段必须设置一个 name 属性，这个name就是键值对的key，输入内容是对应的value；从而构成键值对

提交按钮

定义用于向网址提交表单的按钮

   <form action="http://www.sogou.com" method="get">

        <input type="text" name="username" >
        <input type="password" name="password" >
        <input type="submit" value="提交">
    </form>

在这里插入图片描述
输入123，密码输入456,提交之后，页面会跳转到指定页面

username是key，对应value=123；password也是key，对应value=456，使用get，这个键值对存储在query中；使用post,这个键值对存储在body中

 <form action="http://www.sogou.com" method="post">

        <input type="text" name="username" >
        <input type="password" name="password" >
        <input type="submit" value="提交">
    </form>

在这里插入图片描述

2、使用ajex

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）; 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作

Asynchronous表示异步；

同步：客户端关注服务器是否做出了响应
异步：服务器通知客户端自己做出了响应

阻塞同步：去餐厅买饭，就一直在厨房门口等着，饭好了自己端走
非阻塞同步：去餐厅买饭，先出去逛一圈，回来问饭好了吗，饭没有好，玩会手机，再问问饭好了吗,饭好了自己端走
异步：去餐厅买饭，先出去逛一圈，回来了老板告诉我饭好了，把饭给我端了上来

使用jquey实现
在这里插入图片描述
1、本地引入jquery：搜索jquey cdn，选择压缩的.js文件，复制src的路径，新建浏览器窗口后打开，复制文件内容，在代码文件目录内创建.js文件，将内容拷贝进去后在代码内部引入.js文件

引入.js文件

    <script src="demo.js"></script>

在这里插入图片描述
2、jquery库的ajex（）方法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
语法：
$.ajax({name:value, name:value, … })
该参数规定 AJAX 请求的一个或多个名称/值对。
参数

在这里插入图片描述


    <script src="demo.js"></script>
    <script>
        $.ajax({
type:"get",
url:"https://www.sogou.com",
success:function(body){//回调函数，服务器做出的响应被客户端接收后执行的操作 参数body就是响应的正文部分
console.log("获取请求成功"+"内容是"+body);
},
error:function(){//回调函数，服务器做出的响应被客户端接收后执行的操作 参数body就是响应的正文部分
console.log("获取请求失败");
}
        });
    </script>

运行之后发现失败
在这里插入图片描述
原因：浏览器禁止ajex跨域访问；当前页面的浏览器，属于本地文件；而url中是搜狗网站，不被允许跨域访问