菜园前端
Axios

HTTP 协议与网络请求基础全面讲解

详细介绍 HTTP 协议的基本概念，客户端与服务器模型，URL 结构，常用 HTTP 方法，及请求与响应的数据结构，帮助初学者全面理解网络请求。

🎯 引言

学会这篇文章，你将理解前端和后端如何通过 HTTP 协议交流，知道 URL 是如何构成的，掌握各种 HTTP 请求方法的区别，明白请求和响应的结构细节。实际上，这些知识能帮助你更好地调试网络请求，优化页面加载速度，提升开发效率。

🌀 客户端与服务器模型

在互联网世界里，客户端和服务器是两个最基本的角色。简单来说，客户端就是向服务器提出请求的一方，通常是你的浏览器。服务器则是接收请求并返回数据的一方，比如你访问的网站后台。

当你在浏览器地址栏输入一个网址时，浏览器就会向服务器发起一个网络请求，服务器收到请求后，会返回网页所需的数据。这个过程其实就是 HTTP 协议在背后帮忙协调的。

网络请求通常包含两个部分：

  • Request（请求）：客户端发给服务器的内容，告诉服务器“我想要什么”。
  • Response（响应）：服务器接收到请求后，返回给客户端的数据，比如网页 HTML、图片或者 JSON 数据。
想象一下你去餐厅点餐。你（客户端）告诉服务员（网络请求）你想要什么，服务员去厨房（服务器）拿到食物后再送回来（网络响应）。

🔗 URL 与请求结构

URL（统一资源定位符）是互联网资源的地址。它像你家的地址一样，告诉网络请求去哪里找资源。

一个完整的 URL 通常包含以下部分：

  • 协议：告诉浏览器用什么规则去访问资源，常见的有 http:// 和 https://。
  • 主机（域名或 IP 地址）：服务器所在的地址，比如 www.example.com。
  • 端口号：默认 HTTP 是 80，HTTPS 是 443，通常可以省略。端口号相当于是酒店的房间号码。
  • 路径：服务器上具体资源的位置，比如 /about。例如是房间里面的某样物品。
  • 查询参数：附加信息，格式一般是 ?key=value&key2=value2。

GET 与 POST 的区别

这两种是最常用的 HTTP 请求方法。

  • GET 请求是向服务器“获取”数据，查询参数会附加在 URL 后面。GET 不能携带请求体，数据量有限，且不安全（参数会显示在 URL 中）。
  • POST 请求是向服务器“提交”数据，数据一般放在请求体中，适合传输大量数据或者敏感信息。

常见 HTTP 方法

除了 GET 和 POST，还有几个常用方法：

  • PUT：更新服务器上的资源。
  • DELETE：删除服务器上的资源。
这些方法的作用类似于数据库的增删改查操作，是 RESTful API 的基础。

🧩 请求与响应的数据结构

网络请求和响应都有固定的结构，这样服务器和客户端才能互相读懂信息。

请求结构

  • 请求头（Headers）：携带请求的元信息，比如告诉服务器浏览器类型、语言、授权信息等。
  • 请求体（Body）：POST 或 PUT 请求会用到，存放要发送给服务器的数据，比如表单内容。

响应结构

  • 状态码（Status Code）：服务器处理请求的结果代码。
  • 响应头（Headers）：服务器告诉客户端一些额外信息，比如内容类型、缓存策略。
  • 响应体（Body）：真正需要返回给客户端的数据，比如网页内容、图片或 JSON。

常见状态码详解

  • 200 OK：请求成功，服务器返回数据正常。
  • 301 Moved Permanently：资源永久转移，浏览器会自动跳转新地址。
  • 403 Forbidden：服务器拒绝访问，权限不足。
  • 404 Not Found：请求的资源不存在。
  • 500 Internal Server Error：服务器内部错误。
遇到 4xx 和 5xx 状态码时，说明请求出现问题或者服务器出了故障，调试时需要特别注意。

🧾 小节总结

  • HTTP 是客户端和服务器通信的基础协议，网络请求由请求和响应组成。
  • URL 结构包含协议、主机、端口、路径和查询参数，GET 和 POST 是最常用的请求方法。
  • 请求和响应都有头部和体部，状态码代表服务器处理请求的结果，有些状态码代表错误。

❓ 知识问答（Q&A）

Q：HTTP 请求的请求头和请求体有什么区别？

A：请求头包含请求的元信息，比如浏览器类型、语言等；请求体则放具体数据，通常在 POST 或 PUT 请求中使用。

Q：为什么 GET 请求不适合传输敏感信息？

A：因为 GET 请求的参数会出现在 URL 中，容易被截取或记录，不安全。

Q：状态码 404 和 500 有什么不同？

A：404 表示客户端请求的资源不存在，是客户端问题；500 表示服务器内部错误，是服务器问题。

🧪 小练习

练习1：观察浏览器的网络请求

打开你喜欢的网站，使用浏览器的开发者工具，找到 Network 面板。刷新页面，点击任意请求，观察请求的 URL、方法和状态码，并写下它们的含义。

<!DOCTYPE html>
<html>
    <head>
        <title>网络请求观察练习</title>
    </head>
    <body>
        <h1>打开控制台，观察网络请求</h1>
        <p>刷新页面后，打开 Network 面板，点击请求查看详情。</p>
    </body>
</html>

练习二 - 模拟 GET 请求

使用浏览器地址栏模拟一个带查询参数的 GET 请求，比如：

https://httpbin.org/get?name=前端小白&level=入门

观察返回结果，理解 URL 中查询参数如何传递。

🎉 恭喜你已经掌握 HTTP 协议基础、URL 结构与 HTTP 请求响应的核心知识啦！继续练习，你的前端能力会越来越强！

接下来对你进行考核

所有考核题目都是由博主亲自编写，考核内容来源于本门课程。

使用 JavaScript 发起请求

本文详细介绍浏览器发起请求的多种方式及 JavaScript 中使用 XMLHttpRequest 和 fetch 发送请求的技巧