HTTP请求基础｜请求方法与提交数据

前言

HTTP请求基础几乎是每一位软件开发者必备的知识点，大部分呈现给用户的页面/数据都是从远程服务器拉取，故我们需要对这块的知识有一定了解

本文阅读成本与收益如下：

阅读耗时：10mins

全文字数：5k+

预期效益

• 请求方法类型
• 提交数据的五种方式

请求方法类别

HTTP请求方法（HTTP request methods）是用于向Web服务器发出特定请求的几种方式

如图，在浏览器地址栏输入一个链接访问后在F12开发者工具的Network就能看到当前页面涉及到的请求方法类别

以下是常见的HTTP请求方法及其应用范围：

1. 【常用】GET（GET请求）：用于获取资源，最常用的请求方法，通常用于从服务器获取数据，例如获取网页内容、获取API结果等
2. 【常用】POST（POST请求）：用于提交数据，通常用于向服务器提交表单数据、上传文件等
3. PUT（PUT请求）：用于更新资源，通常用于更新服务器上的数据或资源，例如更新API中的某项资源
4. PATCH（PATCH请求）：用于部分更新资源，与PUT请求类似，但只更新资源的一部分，而不是整个资源
5. DELETE（DELETE请求）：用于删除资源，通常用于从服务器上删除数据或资源
6. OPTIONS（OPTIONS请求）：用于获取服务器支持的HTTP请求方法，通常用于了解服务器支持哪些请求方法，以及服务器的性能和跨域限制等
7. HEAD（HEAD请求）：和GET请求类似，但只返回HTTP响应头部信息，而不返回实际的数据或资源，通常用于检查资源的有效性、日期等

请求提交数据的五种方式

WEB开发中，向服务端提交数据是一项基本功能，网页端JavaScript会使用浏览器运行环境提供的 xhr/fetch API来实现。

以下是五种常见的数据传递方式：

1. URL参数（URL param）

URL路径中的参数（url param），服务端程序或者网页应用都可以从 url 中解析出参数并赋值给对应的应用

例子：（app_id: 2023001、user_id:10001）

GET /user/10001/app/2023001 HTTP/1.1
Host: example.com
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Origin: http://127.0.0.1:5173
Referer: http://127.0.0.1:5173/
Accept-Encoding: gzip
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive

# user_id=10001
https://example.com/user/10001
https://example.com/user/${user_id}
# user_id=10001|app_id=2023001
https://example.com/user/10001/app/2023001
https://example.com/user/${user_id}/app/${app_id}

这里的user_id、app_id变量名均为后端服务自行设置，只需要解析出URL当中对应位置的值并赋值给自定义的变量即可

2. 【常用】查询字符串（Query）

通过 URL 中 ?以及后面用 &分隔的字符串承载需要传递的数据

query 字符串要用 encodeURIComponent 的 api 进行格式处理

例子：（name: 陈、user_id:10001）

GET /user?user_id=10001&name=%E9%99%88 HTTP/1.1
Host: example.com
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Origin: http://127.0.0.1:5173
Referer: http://127.0.0.1:5173/
Accept-Encoding: gzip
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive

JS最终使用的URL转换：

const queryString = require('query-string');
let url = 'https://example.com/user';
const queryStr = queryString.stringify({
  name: '陈',
  user_id: 10001,
}); // ?name=%E9%99%88&age=20
url = url + queryStr;

# user_id=10001|name=%E9%99%88
https://example.com/user?user_id=10001&name=%E9%99%88

user_id 和 name ：query 传递的数据

3. 表单URL编码（form-urlencoded）

请求数据包的header当中的字段 content-type 为 application/x-www-form-urlencoded

需要传递的数据由请求数据包的 body 承载，数据格式与query保持一致

例子：（name: 陈、user_id:10001）

header：2-11行

body：13行

POST /user HTTP/1.1
Host: example.com
Content-Length: 28
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Origin: http://127.0.0.1:5173
Referer: http://127.0.0.1:5173/
Accept-Encoding: gzip
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive

name=%E9%99%88&user_id=10001

4. 表单数据（form-data）

请求数据包的header当中的字段 content-type为 multipart/form-data; boundary=XXXXXX

body 当中用content-type当中指定的 boundary 分割线来分割内容，适合进行文件传输（支持传输多个文件）

例子：（name: 陈、user_id:10001）

header：2-11行

body：13-21行

POST /user HTTP/1.1
Host: example.com
Content-Length: 237
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarylSuJ2i7ta7qAjWGO
Origin: http://127.0.0.1:5173
Referer: http://127.0.0.1:5173/
Accept-Encoding: gzip
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive

------WebKitFormBoundarylSuJ2i7ta7qAjWGO
Content-Disposition: form-data; name="user_id"

10001
------WebKitFormBoundarylSuJ2i7ta7qAjWGO
Content-Disposition: form-data; name="name"

陈
------WebKitFormBoundarylSuJ2i7ta7qAjWGO--

5. JSON数据（json）

请求数据包的header当中的字段 content-type 为 application/json

数据在请求数据包的 body 里

例子：（name: 陈、user_id:10001）

header：2-13行

body：第15行

POST /user HTTP/1.1
host: example.com
content-length: 33
accept: application/json, text/plain, */*
content-type: application/json;charset=UTF-8
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
sec-ch-ua-platform: "macOS"
origin: http://127.0.0.1:5173
referer: http://127.0.0.1:5173/
accept-encoding: gzip
accept-language: zh-CN,zh;q=0.9
cookie: time=1690102352;
Connection: close

{"content":"陈","user_id":10001}

讲到最后

每种请求方法类别以及请求数据提交方式都有其特定的用途和特点，需要根据具体的业务需求场景选择合适的方式进行前后端数据传递。

感谢各位看到这里，如果你觉得本节内容还不错的话，欢迎各位的点赞、收藏、评论，大家的支持是我做内容的最大动力

本文为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利

参考补充

MDN文档