了解HTTP协议

我们可以借助一些"抓包工具"来具体查看 HTTP的报文格式

下载Fiddler

记得去官网下载:搜索Fiddler
在这里插入图片描述 Fildder下载

基本设置

安装过程一路yes
在这里插入图片描述

基本使用

在这里插入图片描述

我们打开一个浏览器,在观察这里状态,弹了很多信息出来,按顺序点击
在这里插入图片描述

在这里插入图片描述

这里就是一个抓包结果

HTTP协议格式

看下面的抓包结果
HTTP请求:

在这里插入图片描述

请求分成了4个部分:

在这里插入图片描述

HTTP响应:
在这里插入图片描述

响应也分成4个部分

在这里插入图片描述

HTTP 请求详解

URL

在这里插入图片描述

>https://i.chaoxing.com/base?t=1652316671474

URL encode / decode

例:在浏览器上搜索 c++
在这里插入图片描述

里面的 c%2B%2B就对应c++
在这里插入图片描述

url decode就是逆过程

认识方法

在这里插入图片描述
HTTP 方法有很多,但最常用的还是GET 和 POST

GET 方法

例如我们访问火狐主页:
在这里插入图片描述

POST 方法

在这里插入图片描述

随着时间的推移,基本上GET /POST都没有考虑他们语义的事了,基本上都是一把梭…也就是这样,导致了多种HTTP方法之间的界限,就变得模糊了,GET 可以给服务器送东西,POST 也可以从服务器拿东西…

其他方法

认识请求"报头"(header)

Host

Content-Length

Content-Type

Content-Length 和 Content-Type这俩属性都是在描述body,如果请求里就没有body(GET),也就不需要这俩个字段了…一般我们POST都是带body的,一般登录都是基于POST来实现的…
在这里插入图片描述
常见选项:

User-Agent(简称UA)

Referer

表示这个页面是从哪个页面跳转过来的. 形如:
登录gitee:
在这里插入图片描述

如果直接在浏览器中输入URL, 或者直接通过收藏夹访问页面时是没有 Referer 的

Cookie

Cookie数据其实都是服务器返回给客户端的
在这里插入图片描述
理解登录过程:

举个例子理解一下Cookie:

HTTP 响应详解

认识"状态码"(status code)

介绍几种常见的状态码:

200 OK

404 Not Found

403 Forbidden

比如我退出gitee登录,想要访问登录后的加密文件就会触发这个

在这里插入图片描述

405 Method Not Allowed

500 Internal Server Error

504 Gateway Timeout

302 Found

像这样的状态码还有很多
在这里插入图片描述
这么多不必要一一记住

认识响应"正文"(body)

text/html
在这里插入图片描述

还有其他几种,我这里就不举例了

通过 form 表单构造 HTTP 请求

<body> 
<form action="https://home.firefoxchina.cn/" method="GET">
        <input type="text" name="user">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
</body>

在这里插入图片描述

<body> 
<form action="http://www.baidu.com" method="POST">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
</body>

在这里插入图片描述

ajax 构造 HTTP 请求

在这里插入图片描述

<body>
<script src="jquery.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'https://home.firefoxchina.cn/',
            success:function(boby){
                //success 对应一个回调函数
                //这个函数就会在正确获取到 HTTP 响应之后,来调用
                //"异步"
                //回调函数的参数,就是HTTP响应的 boby 部分
                console.log("获取到响应数据! " + boby);
            },
            error:function() {
                //error 也对应一个回调函数
                //这个函数也会在请求失败之后触发
                //"异步"
                console.log("获取请求失败!");

            }

        });
    </script>
</body>