理解HTTP请求格式

HTTP概念

HTTP全称HyperTextTransfer Protocol(超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议；HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。协议规定，POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。

请求行： post http://10.170.xxx.x:3000/user/getToken HTTP/1.1

请求头： key : value

空行：代表请求头结束

请求体：发送给服务器请求时，携带的数据

HTTP请求是互联网应用中最常见的交互方式之一，而数据格式是HTTP请求中不可或缺的一部分。在Web开发中，常见的HTTP请求数据格式有JSON、x-www-form-urlencoded和form-data。了解这三种数据格式的特点和使用场景，对于开发人员来说非常重要。

1.JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。在HTTP请求中，JSON数据格式通常用于发送和接收结构化数据。例如，在RESTful API中，JSON经常被用于传输数据。JSON数据格式的例子如下：

javascript 复制代码

// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('post', 'http://localhost:3000/json');
// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
xhr.setRequestHeader('Content-Type', 'application/json');
// JSON.stringify() 将json对象转换为json字符串
// 3.发送请求
xhr.send(JSON.stringify({
    name: 'lisi',
     age: 50
}));

2.x-www-form-urlencoded

x-www-form-urlencoded是一种常见的HTTP请求数据格式，主要用于发送HTML表单数据。这种格式将表单中的字段和值编码到一个单一的字符串中，字符串中的每个字段都由等号连接字段名和字段值，多个字段之间用逗号分隔。x-www-form-urlencoded的例子如下：

javascript 复制代码

//拼接样式
 name=John&age=30&city=New+York
//举例
var xhr = new XMLHttpRequest(); // 创建ajax对象
var nameValue = username.value;
var ageValue = age.value;
var params = 'username=' + nameValue + '&age=' + ageValue; // 拼接请求参数
 
xhr.open('get', 'http://localhost:3000/get?' + params); // 配置ajax对象
xhr.send(); // 发送请求

**注意：**x-www-form-urlencoded格式中的字段名和值只能包含ASCII字符，而且字段名和值必须进行URL编码。

3. form-data

form-data是一种常用的HTTP请求数据格式，主要用于发送二进制数据或文件。当用户通过HTML表单上传文件时，通常会使用这种格式。

formdata 的两种格式

**1.**multipart/form-data :既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；

2.x-www-form-urlencoded:只能上传键值对，并且键值对都是间隔分开的。

与x-www-form-urlencoded最明显的不同，form-data将表单字段和值编码到一个multipart/form-data类型的字符串中，每个字段都被包含在一个指定的边界内。

请求头的Content-Type属性除了指定为multipart/form-data，还需要定义boundary参数

请求体中的请求行数据是由多部分组成，boundary参数的值模式--${Boundary}用于分隔每个独立的分部

每个部分必须存在请求头Content-Disposition: form-data; name=" ${PART_NAME}";，这里的$ {PART_NAME}需要进行URL编码，另外filename字段可以使用，用于表示文件的名称，但是其约束性比name属性低（因为并不确认本地文件是否可用或者是否有异议）

每个部分可以单独定义Content-Type和该部分的数据体

请求体以boundary参数的值模式--${Boundary}--作为结束标志

下面是一个使用form-data格式上传文件的例子：

javascript 复制代码

# 请求头 - 这个是必须的，需要指定Content-Type为multipart/form-data，指定唯一边界值
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTr2gzrWJ
------WebKitFormBoundary7MA4YWxkTr2gzrWJ

# 请求体
Content-Disposition: form-data; name="file"; filename="example.txt"

# 内容
Content-Type: text/plain
This is the content of the example.txt file.
------WebKitFormBoundary7MA4YWxkTr2gzrWJ--

在这个例子中，表单字段名是"file"，文件名是"example.txt"，文件内容是"This is the content of the example.txt file."。在每个字段之间插入了一个边界字符串（这里是"---------WebKitFormBoundary7MA4YWxkTr2gzrWJ"），并在最后添加了一个结束标记。

总结：

1.JSON适用于传输结构化数据。

2.x-www-form-urlencoded适用于发送简单的表单数据。

3.form-data适用于上传文件将文件转成二进制数据进行传输，不涉及转码或发送复杂的表单数据。

4.text/plain：是使用纯文本进行传输，平时用的很少。

了解这三种数据格式的特点和使用场景，可以帮助开发人员更好地设计和实现Web应用。