编辑“︁JavaScript请求体”︁

= JavaScript请求体 =

== 介绍 ==
'''JavaScript请求体'''（Request Body）是HTTP请求中用于向服务器发送数据的核心部分，通常出现在POST、PUT等非幂等请求方法中。它允许客户端将结构化数据（如JSON、表单数据或二进制流）传输到服务器端进行处理。

请求体的主要特点：
* 位于HTTP请求头之后，用空行分隔
* 内容类型由<code>Content-Type</code>头部指定
* 大小不受URL长度限制（与查询参数不同）
* 适用于敏感数据传输（不在URL中可见）

== 内容类型 ==
常见的请求体内容类型包括：

{| class="wikitable"
|-
! 类型 !! MIME类型 !! 描述 !! 典型使用场景
|-
| JSON || <code>application/json</code> || 结构化数据交换 || API通信
|-
| 表单数据 || <code>application/x-www-form-urlencoded</code> || URL编码的键值对 || HTML表单提交
|-
| 多部分表单 || <code>multipart/form-data</code> || 支持文件上传 || 文件提交表单
|-
| 纯文本 || <text/plain> || 无格式文本 || 简单文本传输
|-
| 二进制数据 || <code>application/octet-stream</code> || 原始字节流 || 文件上传
|}

== 代码示例 ==

=== 基础JSON请求 ===
<syntaxhighlight lang="javascript">
// 使用Fetch API发送JSON请求体
async function postUserData(user) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)  // 将对象转为JSON字符串
  });
  return response.json();
}

// 使用示例
const newUser = {
  name: 'Alice',
  age: 28,
  email: 'alice@example.com'
};

postUserData(newUser)
  .then(data => console.log('响应:', data))
  .catch(error => console.error('错误:', error));
</syntaxhighlight>

'''输入:'''
<pre>
{
  "name": "Alice",
  "age": 28,
  "email": "alice@example.com"
}
</pre>

'''可能的输出:'''
<pre>
{
  "id": 12345,
  "status": "created",
  "timestamp": "2023-05-20T14:30:00Z"
}
</pre>

=== 表单数据请求 ===
<syntaxhighlight lang="javascript">
// 发送URL编码的表单数据
async function submitForm(formData) {
  const urlEncoded = new URLSearchParams();
  for (const [key, value] of Object.entries(formData)) {
    urlEncoded.append(key, value);
  }

  const response = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: urlEncoded
  });
  return response.json();
}

// 使用示例
submitForm({
  username: 'alice123',
  password: 'securePassword!'
});
</syntaxhighlight>

== 高级主题 ==

=== 流式请求体 ===
现代JavaScript支持流式请求体，适合处理大文件：

<syntaxhighlight lang="javascript">
async function uploadLargeFile(file) {
  const readableStream = file.stream();
  const response = await fetch('https://api.example.com/upload', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/octet-stream'
    },
    body: readableStream
  });
  return response.json();
}
</syntaxhighlight>

=== 请求体格式转换 ===
使用<code>FormData</code>对象处理混合内容：

<syntaxhighlight lang="javascript">
const formData = new FormData();
formData.append('user', JSON.stringify({ name: 'Bob' }));
formData.append('avatar', fileInput.files[0]);

fetch('/profile', {
  method: 'POST',
  body: formData  // 自动设置multipart/form-data
});
</syntaxhighlight>

== 实际应用案例 ==

=== 电商网站购物车提交 ===
典型JSON请求体结构：

<syntaxhighlight lang="json">
{
  "userId": "user123",
  "items": [
    {
      "productId": "prod-456",
      "quantity": 2,
      "price": 19.99
    }
  ],
  "shippingAddress": {
    "street": "123 Main St",
    "city": "Metropolis"
  },
  "paymentMethod": "credit_card"
}
</syntaxhighlight>

=== 文件上传进度追踪 ===
结合XMLHttpRequest显示上传进度：

<syntaxhighlight lang="javascript">
function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  
  xhr.upload.onprogress = (event) => {
    const percent = Math.round((event.loaded / event.total) * 100);
    console.log(`上传进度: ${percent}%`);
  };
  
  xhr.onload = () => {
    console.log('上传完成');
  };
  
  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}
</syntaxhighlight>

== 安全注意事项 ==
* '''敏感数据'''：始终通过HTTPS发送包含敏感信息的请求体
* '''大小限制'''：服务器可能对请求体大小有限制
* '''CSRF防护'''：对状态修改请求使用CSRF令牌
* '''内容验证'''：服务器端应始终验证请求体内容

== 性能优化 ==
* 对于大型JSON数据，考虑压缩（如gzip）
* 使用二进制格式（如Protocol Buffers）替代JSON以提高效率
* 对于频繁的小请求，批处理可以减少HTTP开销

== 参见 ==
* [[HTTP协议]]
* [[RESTful API设计]]
* [[Fetch API]]
* [[AJAX编程]]

== 图表示例 ==
<mermaid>
sequenceDiagram
    participant Client as 客户端
    participant Server as 服务器
    Client->>Server: POST /api/data
    Note right of Client: 请求头<br/>Content-Type: application/json
    Client->>Server: {"name":"Alice","age":25}
    Server-->>Client: 200 OK {"status":"success"}
</mermaid>

== 数学表示 ==
请求体大小计算（对于JSON）：

<math>
\text{BodySize} = \sum_{i=1}^{n} (\text{key}_i.\text{length} + \text{value}_i.\text{length} + 3) + 2(n-1) + 2
</math>

其中：
* <math>n</math> = 对象属性数量
* <math>\text{key}_i</math> = 第i个属性的键名长度
* <math>\text{value}_i</math> = 第i个属性值的长度
* 常数项考虑引号、冒号和逗号

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript网络请求]]