【网络原理】从零开始深入理解HTTP的报文格式(二)

要开心

要快乐

顺便进步

1. HTTP响应

响应的构成主要涉及到前端的知识: html css js 构成网页的主体. html 表示页面的骨架. css 表示页面的样式. js 表示页面的行为.

1.1 认识"状态码"

状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况) 以下是比较常见的状态码.

① 200 OK 表示访问成功.

这是一个最常见的状态码, 表示访问成功. 抓包抓到的大部分结果都是 200

② 404 Not Found 表示没有找到资源.

浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源. 如果这个 URL 标识的资源不存在,那么就会出现 404.例如, 在浏览器中输入 .html 此时就在尝试访问 sogou 上的 /index.html 这个资源.如果输入正确, 则可以正确访问到. 但是如果输入错误, 比如 www.sogou/inde.html , 就会看到 404 这样的响应.

③ 403 Forbidden 表示用户没有权限访问.

查看码云的私有仓库, 如果不登陆, 就会出现 403. 访问受限403

④ 418 l am a teapot 这个状态码并没有实际的意义,只是"开个玩笑"，称为"彩蛋". 实际开发商业产品或者开源项目的时候, 还是不建议搞彩蛋,防止出现一些宗教信仰问题,导致开发成果"毁于一蛋".

⑤ 302 Move temporarily 临时重定向

重定向就相当于手机号码中的 “呼叫转移” 功能. 比如我本来的手机号是 1314, 后来换了个新号码 520, 那么不需要让我的朋友知道新号码,只要我去办理一个呼叫转移业务, 其他人拨打 1314 , 就会自动转移到 520 上. 在登陆页面中经常会见到 302. 用于实现登陆成功后自动跳转到主页.

码云的登陆页面: 码云页面登陆抓包看到的响应结果:

⑥ 301 Moved Permanently 永久重定向当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址. 301 也是通过 Location 字段来表示要重定向到的新地址.

状态码小结

1.2 认识响应"报头"

响应报头的基本格式和请求报头的格式基本一致. 详细可见上一篇文章: 【网络原理】从零开始深入理解HTTP的报文格式(一) 类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致.

Content-Type

响应中的 Content-Type 常见取值有以下几种: • text/html : body 数据格式是 HTML • text/css : body 数据格式是 CSS • application/javascript : body 数据格式是 JavaScript • application/json : body 数据格式是 JSON

关于 Content-Type 的详细情况: MIME types

1.3 认识响应"正文"(body)

正文的具体格式取决于 Content-Type. 观察上面几个抓包结果中的响应部分.

① text/html

② text/css

③ application/javascript

④ application/json

2. 构造HTTP请求

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

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

Ⅰ form发送GET请求

form 的重要参数: • action: 构造的 HTTP 请求的 URL 是什么. • method: 构造的 HTTP 请求的方法是 GET 还是 POST (form 只支持 GET 和 POST).

input 的重要参数: • type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮. • name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输⼊框的用户输入的内容. • value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本.

使用VSCode编译器,创建一个文件命名为form.html. 右侧输入 ! 再按TAB键代码基本框架就出来了.

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
</head>
<body>
    <form action=".html" method="get">
        <input type="text" name="key1">
        <input type="text" name="key2">
        <input type="text" name="key3">
        <input type="submit" value="提交">
    </form>
</body>
</html>

页面展示效果:

在输入框中随便填写数据,并提交

构造的get 请求如下:

代码语言：javascript代码运行次数：0运行复制

GET .html?key1=13&key2=14&key3=520 HTTP/1.1
Host: www.sogou
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/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cookie: cuid=AAG2VbIdUwAAAAuipyOMMwAANgg=; SUV=1745486111856508; SNUID=4F22AF328583B539A426D88686764390; ABTEST=0|1745830865|v17; SUID=5B5768DF3EA7A20B00000000680F43D1; IPLOC=CN4400; LSTMV=345%2C204; LCLKINT=1918; browerV=3; osV=1

Ⅱ form发送POST请求

将上述代码中method = ‘‘get’’ 改成 method = '‘post’'即可.

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
</head>
<body>
    <form action=".html" method="post">
        <input type="text" name="key1">
        <input type="text" name="key2">
        <input type="text" name="key3">
        <input type="submit" value="提交">
    </form>
</body>
</html>

构造的post请求如下:

代码语言：javascript代码运行次数：0运行复制

POST .html HTTP/1.1
Host: www.sogou
Connection: keep-alive
Content-Length: 24
Cache-Control: max-age=0
Origin: null
Content-Type: application/x-www-form-urlencoded
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,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

key1=13&key2=14&key3=520

主要的区别: ① method 从 GET 变成了 POST. ② 数据从 query string 移动到了 body 中.

2.2 利用ajax构造HTTP请求

从前端角度, 除了浏览器地址栏能构造 GET 请求, form 表单能构造 GET 和 POST 之外, 还可以通过ajax 的方式来构造 HTTP 请求. 并且功能更强大. 现在的网站,主体都是通过 ajax 的方式来进行交互的. 特点是可以不需要刷新页面/页面跳转就能进行数据传输.

Ⅰ 利用 ajax 发送 GET 请求

浏览器原生提供了 ajax 的 api 特别难用, 但好在有一些第三方库封装了 ajax. 本文使用的是 jquery 这个库.

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <script src=".7.1/jquery.min.js"></script>
    <script>
        //就是编写自己的 js 代码.
        $.ajax({
            type: 'get',
            url: '.html?',
            success: function(body) {
                console.log(body);
            }
        });
    </script>
</body>
</html>

构造get的请求如下:

代码语言：javascript代码运行次数：0运行复制

GET .7.1/jquery.min.js HTTP/1.1
Host: cdn.bootcdn
Connection: keep-alive
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: script
Sec-Fetch-Storage-Access: active
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

Ⅱ 利用 ajax 发送POST请求

对于 POST 请求, 需要设置 body 的内容 1. 先使用 setRequestHeader 设置 Content-Type 2. 再通过 send 的参数设置 body 内容.

代码语言：javascript代码运行次数：0运行复制

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ajax</title>
    </head>
    <body>
        <script src=".7.1/jquery.min.js"></script>
        <script>
            //就是编写自己的 js 代码.
            $.ajax({
                type: 'post',
                url: '.html?',
                contentType: 'application/x-www-form-urlencoded',
                body: 'studentName=zhangsan',
                success: function(body) {
                    console.log(body);
                }
            });
        </script>
    </body>
    </html>

构造的post请求如下:

代码语言：javascript代码运行次数：0运行复制

POST .html? HTTP/1.1
Host: www.sogou
Connection: keep-alive
Content-Length: 0
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Accept: */*
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
Content-Type: application/x-www-form-urlencoded
sec-ch-ua-mobile: ?0
Origin: null
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

2.3 利用postman构造HTTP请求

能够构造 http 请求的第三方工具,非常多的,本文章主要使用的 postman , 也有很多其他的工具, 都大同小异. 这些工具一般都来测试.

可以先下载postman postman官方网站下载完后再注册一个账号, 注册邮箱建议用@163.

注册完了之后:

① 创建一个仓库

② 构造HTTP请求

③ 还可以自动生成代码

不会写前端代码也没事.

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-04-30，如有侵权请联系 cloudcommunity@tencent 删除原理重定向http浏览器网络

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

【网络原理】从零开始深入理解HTTP的报文格式(二)