http（1）

思鱼不是死鱼

已于 2023-05-06 22:44:56 修改

阅读量517

点赞数 1

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

于 2023-04-19 23:01:52 首次发布

本文链接：https://blog.csdn.net/qq_64054032/article/details/130253546

版权

本文介绍了HTTP的基本工作原理，包括HTTP请求和响应的格式，以及GET和POST方法。通过Fiddler这一抓包工具，展示了如何分析HTTP交互详情，包括如何启用Fiddler抓取HTTPS流量。此外，还讲解了HTTP状态码的意义、Cookie的来源和作用，以及AJAX如何构造无刷新的HTTP请求。

摘要由CSDN通过智能技术生成

主要介绍http 1.0

我们在浏览器中输入一个网址，稍等片刻就看见了网页

客户端会发送一个http请求，要求返回cn.bing.com这个网址，服务器收到请求后就会返回一个html页面（服务器根据请求找到客户端想要的资源，然后把这个html通过HTTP响应返回给浏览器，客户端收到HTML之后对页面进行渲染）

上诉这个HTTP模式就是典型的一问一答的模型协议

学习HTTP的主要学习内容是学习HTTP的报文格式（报文格式就是描述了HTTP请求是啥样的，响应是啥样的）

因此我们需要使用抓包工具，来捕获到请求交互的详细情况（抓包就是一种特殊的软件，相当于一个代理程序，浏览器给服务器发的请求就会经过这个代理程序，进一步分析出请求和响应的结果如何）借助这个代理程序，就知道了浏览器和服务器之间具体交互细节

代理还分具体两种，正向代理和反向代理，前者就是给客户端提供服务，和客户端关系紧密，这样服务器就不知道真实的客户端是啥。后者就是给服务器提供服务，和服务器关系紧密，这样客户端就不知道真实的服务器是啥。

fiddler

左侧区域是抓到的请求列表

上面是http请求的原始模样，下面是http响应的原始模样

开启fiddler抓取https的功能

在菜单栏 tools options 然后如图勾选选项，期间可能需要安装证书

如果这个时候还看不见https的进程，可能是使用了其他的代理软件，例如游戏加速器导致的，不能同时和fiddler运行。

HTTP请求

构造一个HTTP请求，本质上就是往一个TCPsocket中，按照下列格式来写入数据即可

GET http://blogs.msdn.microsoft.com/fiddler/2011/12/10/revisiting-fiddler-and-win8-immersive-applications/ HTTP/1.1
Host: blogs.msdn.microsoft.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6,be;q=0.5,eo;q=0.4

GET http://blogs.msdn.microsoft.com/fiddler/2011/12/10/revisiting-fiddler-and-win8-immersive-applications/ HTTP/1.1

第一行是GET方法然后是URL 用来描述网络上的唯一资源

Host: blogs.msdn.microsoft.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6,be;q=0.5,eo;q=0.4

然后是一个按行组成的键值对，每一行是一个键值对，键和值之间使用: 来分割（冒号加一个空格）

有些请求的最底下会有空行，一个HTTP请求的header可以有若干个，就使用空行来作为header的结束

有的请求会有body，也就是正文，会显示用户名，密码，uid等（基本都为加密）

HTTP响应

HTTP/1.1 302 Found
Location: https://blogs.msdn.microsoft.com/fiddler/2011/12/10/revisiting-fiddler-and-win8-immersive-applications/
X-Azure-Ref: 0ifk/ZAAAAAA8GVVbO6Q6Tqt/0u5hvW8NU0lOMzBFREdFMDIxMwBkZWEwZDI4Ny03YzE0LTRmZTYtOGI3Yi1kMDkxNDRhOWQzNWY=
Date: Wed, 19 Apr 2023 14:24:09 GMT
Content-Length: 0

HTTP/1.1 302 Found

1.1是版本号 302是状态码后面可能会跟着一个状态码的描述

Location: https://blogs.msdn.microsoft.com/fiddler/2011/12/10/revisiting-fiddler-and-win8-immersive-applications/
X-Azure-Ref: 0ifk/ZAAAAAA8GVVbO6Q6Tqt/0u5hvW8NU0lOMzBFREdFMDIxMwBkZWEwZDI4Ny03YzE0LTRmZTYtOGI3Yi1kMDkxNDRhOWQzNWY=
Date: Wed, 19 Apr 2023 14:24:09 GMT
Content-Length: 0

为响应报头，也就是header，为键值对结构，使用：来进行分割（冒号和空格）

空行，作为header的结束标记

正文，可以是json html js css 图片等结果

cookie

从哪里来？

存在于浏览器，来自于服务器。cookie都是浏览器访问了bing服务器之后由服务器返回的，在服务器返回的响应报文中，可以在响应header中包含一个或者多个set-cookie这样的资源（由程序员在服务器代码中构造）。浏览器看见set-cookie就会把这样的数据给保存在浏览器本地。

到哪里去？

来自于服务器，存储与浏览器，还要在回到服务器，当浏览器保存了cookie后，下次浏览器访问同一个网站，就会把之前本地存储的cookie在通过http请求header中的cookie给带过去

为什么数据要转一圈呢

因为服务器要服务的客户端是很多的，这些不同的客户端应该要有不同的数据

cookie会占空间吗

会占硬盘空间，但是都是一些简单的键值对，一个网站的cookie大小也就几个kb，也会自动清理，cookie有个过期时间的概念，到期了就自动清除

cookie典型应用场景（不是唯一场景）

就是在客户端维持登录状态，在某个网站上登陆成功后，浏览器就会记住当前登录用户的身份信息，然后接下来李访问网站的其他页面，服务器也能知道咱们是谁在登录

http响应

1xx

信息性状态码，接受的请求正在处理

2xx

成功状态码，全球正常处理完毕

3xx

重定向状态码，需要进行附加操作来完成请求

4xx

客户端错误状态码，服务器无法处理请求

5xx

服务器错误状态码，服务器处理请求出错

如何构造http请求

1 浏览器自己构造，地址栏里写url,构造出get请求，点击a标签，也会构造get请求，img,link,script也会构造get请求

2 form来构造请求

<!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>
</head>
<body>
    <form action="http://www.sogou.com" method="get">
        <!-- 这里的方法只有get和post两个 -->

        <input type="text" name="aa">
        <input type="text" name="bb">
        <!-- 借助这些标签来给请求构造数据，键值对结构的数据 -->
        <!-- 每一个input就对应有个键值对 input的name属性就是键，input里面用户输入的内容就是值 -->

        <!-- 如果方法是get 上述键值对就会出现在url的query string中 -->
        <!-- 如果方法是post 上述键值对就会放到body中 （格式和query string相同） -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

这里的方法是get，（如果是post的话网址栏是不会有11和22的，而是放在了报文的body部分）

3 ajax(各种http方法都可以构造)

form构造的http请求一定会触发页面跳转的，ajax默认发起的请求不会引起跳转，当然也可以手动控制跳转，因为页面跳转开销大，时间慢，用户体验差，但是使用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>
</head>
<body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        //直接去找现有的库来使用ajax
    <script>
        $.ajax({
              // $是jquery中的特殊变量名，是jquery中的全局对象，通过这个对象就可以调用里面的一些方法，这些方法就是
            //jquery的api，虽然ajax方法的参数只有一个，但是由多个对象
           
            type: 'get',
//写请求的方法
            url: 'https://www.sogou.com',
//这个请求曲访问谁
            date: 'http 请求的 body',
            contentType: 'x-www-form-urlencoded',
            success: function(body) {
//这个回调函数会在响应ok(200)报文的时候执行
//回调函数就是不是立刻执行，而是在合适的时机被其他人调用执行
                // 服务器返回一个正确的响应（200）
                // 就会由浏览器调用这个success对应的函数来处理响应
                // 参数body就是响应的正文
                console.log("ok");
            },
            error: function() {
                // 服务器返回一个错误的响应
                // 就会由浏览器调用这个error对应的函数
                console.log("error");
            },
        });
    </script>
</body>
</html>

但是当我们f12调查控制台的时候，却被显示由报错：