HTTP请求全链路剖析：请求头、XHR与状态码的实战指南

目录

一、HTTP/HTTPS 请求头（Request Headers）

二、HTTP/HTTPS 响应头（Response Headers）

三、完整案例

1. 客户端请求示例（GET 请求）

2. 服务端响应示例

四、注意事项

 五、常见的 Content-Type 值及其使用场景

 Content-Type 关键场景总结

表单提交：

API 交互：

静态资源：

文件传输：

多媒体内容：

 Content-Type 示例代码

1. 提交 JSON 数据（API 请求）

2. 文件上传（表单）

3. 返回 HTML 页面

 Content-Type 注意事项

六、XMLHttpRequest 四部曲

1. 创建 XMLHttpRequest 对象

2. 初始化请求配置

3. 设置回调函数（监听状态变化）

4. 发送请求

  XMLHttpRequest完整代码示例

XMLHttpRequest扩展说明

1.异步 vs 同步

2.设置请求头:

3.处理其他事件

3.1上传进度：

3.2超时处理：

4.兼容现代 API

七、HTTP 状态码分类表

HTTP 状态码关键注意事项

常用状态码优先级：

重定向行为差异：

特殊状态码用途：

实际开发建议：

---

 

以下是 HTTP/HTTPS 请求和响应中常见的请求头、响应头及其含义，以及一个完整案例：

一、HTTP/HTTPS 请求头（Request Headers）

请求头名称	含义
Host	请求的目标域名和端口（HTTP/1.1 必需字段）。
User-Agent	客户端的浏览器、操作系统等信息。
Accept	客户端可接受的内容类型（如 text/html, application/json）。
Accept-Encoding	客户端支持的压缩编码（如 gzip, deflate）。
Accept-Language	客户端优先语言（如 en-US, zh-CN）。
Connection	控制连接是否保持活动（如 keep-alive 或 close）。
Content-Type	请求体的媒体类型（如 application/json, application/x-www-form-urlencoded）。
Content-Length	请求体的字节长度。
Authorization	身份验证凭证（如 Bearer  或 Basic ）。
Cookie	客户端携带的 Cookie 信息。
Referer	当前请求的来源页面 URL。
Cache-Control	缓存策略（如 no-cache, max-age=3600）。
Origin	请求的源域名（用于 CORS 跨域请求）。

二、HTTP/HTTPS 响应头（Response Headers）

响应头名称	含义
Content-Type	响应体的媒体类型（如 text/html, application/json）。
Content-Encoding	响应体的压缩编码（如 gzip）。
Content-Length	响应体的字节长度。
Cache-Control	缓存策略（如 public, max-age=3600）。
Set-Cookie	服务器向客户端设置 Cookie。
Server	服务器软件名称（如 Apache/2.4.1）。
Date	响应生成的日期和时间。
Location	重定向目标 URL（状态码为 3xx 时使用）。
Access-Control-Allow-Origin	允许跨域请求的源域名（CORS 相关）。
ETag	资源的唯一标识符（用于缓存验证）。
Expires	响应过期时间。
Status	响应状态码（如 200 OK, 404 Not Found）。

三、完整案例

1. 客户端请求示例（GET 请求）

GET /api/data HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: application/json
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate
Connection: keep-alive
Authorization: Bearer abc123xyz
Cookie: session_id=abc123;

2. 服务端响应示例

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 85
Content-Encoding: gzip
Cache-Control: max-age=3600
Date: Mon, 01 Jan 2024 12:00:00 GMT
Server: Apache/2.4.1
Set-Cookie: session_id=abc123; Path=/; HttpOnly

{
  "data": "Hello World",
  "status": "success"
}

四、注意事项

1. 非标准头部：可能存在以 X- 开头的自定义头部（如 X-Requested-With）。

2. 安全性：HTTPS 在传输层加密，但头部字段与 HTTP 完全一致。

3. 动态性：实际请求/响应头可能因框架、服务器配置不同而变化（如 X-Powered-By）。

 五、常见的 Content-Type 值

Content-Type 值	使用场景	示例
text/plain	纯文本数据，无格式。	普通文本文件（.txt）
text/html	HTML 网页内容。	网页渲染（.html）
text/css	CSS 样式表文件。	网页样式（.css）
text/javascript （推荐 application/javascript）	JavaScript 代码。	网页脚本（.js）
application/json	JSON 格式数据，常用于 API 请求或响应。	{"name": "John", "age": 30}
application/xml	XML 格式数据。	John30
application/x-www-form-urlencoded	表单提交（键值对 URL 编码）。	name=John&age=30
multipart/form-data	表单包含文件上传（支持二进制数据）。	文件上传（如 ）
application/octet-stream	二进制流数据（如文件下载）。	下载任意二进制文件（如 .zip, .exe）
image/jpeg	JPEG 格式图片。	.jpg 或 .jpeg 文件
image/png	PNG 格式图片。	.png 文件
image/gif	GIF 格式图片。	.gif 文件
application/pdf	PDF 文档。	.pdf 文件
application/zip	ZIP 压缩文件。	.zip 文件
audio/mpeg	MP3 音频文件。	.mp3 文件
video/mp4	MP4 视频文件。	.mp4 文件
application/gzip	GZIP 压缩文件。	.gz 文件
application/vnd.ms-excel	Excel 文件（旧格式）。	.xls 文件
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	Excel 文件（新格式，Office 2007+）。	.xlsx 文件
application/grpc	gRPC 协议通信（需配合 proto 文件）。	微服务间通信
application/xhtml+xml	XHTML 格式网页。	符合 XML 规范的 HTML（.xhtml）
application/ld+json	JSON-LD 格式（语义网数据）。	结构化数据（如 SEO 优化）

 Content-Type 关键场景总结

1. 表单提交：

   • 普通表单：application/x-www-form-urlencoded

   • 文件上传：multipart/form-data

2. API 交互：

   • 数据交换：application/json

   • 传统 XML 接口：application/xml

3. 静态资源：

   • 图片：image/*

   • 样式和脚本：text/css, text/javascript

4. 文件传输：

   • 二进制文件：application/octet-stream

   • 压缩文件：application/zip, application/gzip

5. 多媒体内容：

   • 音视频：audio/*, video/*

 Content-Type 示例代码

1. 提交 JSON 数据（API 请求）

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 27

{"name": "John", "age": 30}

2. 文件上传（表单）

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123

------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="file"; filename="photo.jpg"
Content-Type: image/jpeg

<二进制数据>
------WebKitFormBoundaryABC123--

3. 返回 HTML 页面

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 85


Hello World

 Content-Type 注意事项

1. 字符集（charset）：如 text/html; charset=UTF-8，用于指定编码格式。

2. 兼容性：部分旧系统可能不支持新格式（如 .xlsx 需特定 MIME 类型）。

3. 严格校验：错误的 Content-Type 可能导致客户端解析失败（如 JSON 误设为 text/plain

六、XMLHttpRequest 四部曲

1. 创建 XMLHttpRequest 对象

const xhr = new XMLHttpRequest();

• 作用：初始化一个 XMLHttpRequest 实例，用于发起 HTTP 请求。

• 兼容性处理（针对 IE6 及以下）：

  let xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // 现代浏览器
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE6
  }

2. 初始化请求配置

xhr.open(method, url, async);

• 参数：

  • method：请求方法（GET, POST, PUT, DELETE 等）。

  • url：请求的目标地址。

  • async：是否异步（默认为 true）。

• 示例：

  xhr.open('GET', 'https://api.example.com/data', true);

3. 设置回调函数（监听状态变化）

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status === 200) { // 成功响应
      console.log(xhr.responseText);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

• 关键属性：

  • readyState：请求状态（0-未初始化，1-已打开，2-已发送，3-接收中，4-完成）。

  • status：HTTP 状态码（如 200 成功，404 未找到）。

  • responseText：响应内容（字符串格式）。

4. 发送请求

xhr.send(body);

• 作用：正式发送 HTTP 请求。

• 参数：

  • body：请求体数据（GET 请求通常为 null，POST 可为 FormData 或字符串）。

• 示例：

  // GET 请求（无请求体）
  xhr.send();
  
  // POST 请求（发送 JSON 数据）
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({ name: "John" }));

  XMLHttpRequest完整代码示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log('响应数据:', xhr.responseText);
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  }
};

xhr.send();

XMLHttpRequest扩展说明

1.异步 vs 同步

• async 参数为 true（默认）时，请求在后台执行，不阻塞页面。

• 若设为 false，请求会阻塞页面直到完成（已废弃，不推荐使用）。

2.设置请求头:

在 open() 之后、send() 之前设置：

xhr.setRequestHeader('Content-Type', 'application/json');

3.处理其他事件

3.1上传进度：

xhr.upload.onprogress = (e) => {
  console.log(`上传进度: ${(e.loaded / e.total) * 100}%`);
};

3.2超时处理：

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = () => {
  console.error('请求超时');
};

4.兼容现代 API

推荐优先使用 Fetch API（更简洁的语法）

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

七、HTTP 状态码分类表

分类	状态码	名称	描述	常见场景
信息响应	100	Continue	客户端应继续发送请求体。	大文件上传前确认服务器是否接受。
(1xx)	101	Switching Protocols	服务器同意切换协议（如升级到 WebSocket）。	协议升级请求。
	102	Processing	服务器已收到请求，但处理尚未完成。	WebDAV 异步操作中返回中间状态。
	103	Early Hints	预加载资源提示。	服务器提前返回部分响应头，提示客户端预加载资源。
成功响应	200	OK	请求成功完成。	标准成功响应（GET/POST/PUT/DELETE）。
(2xx)	201	Created	资源已创建（常见于 POST/PUT）。	提交表单后返回新资源的 URL。
	202	Accepted	请求已接受但未处理完成。	异步任务（如后台数据处理）。
	203	Non-Authoritative Info	响应头信息来自缓存或第三方。	代理服务器修改了原始响应头。
	204	No Content	请求成功，但无响应体。	删除资源成功或提交无返回值的操作。
	205	Reset Content	请求成功后需重置表单。	表单提交后清空输入框。
	206	Partial Content	返回部分内容（支持分片下载）。	断点续传或大文件分片下载。
	207	Multi-Status	多个状态码（WebDAV 多操作响应）。	批量操作中部分成功、部分失败。
	208	Already Reported	重复的 WebDAV 成员状态已省略。	避免重复返回相同集合成员的状态。
	226	IM Used	服务器已完成对实例的修改（HTTP Delta 编码）。	增量更新资源时使用。
重定向	300	Multiple Choices	请求资源有多个可选响应。	返回不同格式的资源列表（如不同语言页面）。
(3xx)	301	Moved Permanently	资源永久重定向到新 URL。	网站改版后旧链接永久跳转。
	302	Found	资源临时重定向到新 URL。	临时维护页面跳转。
	303	See Other	重定向到其他资源（强制 GET 请求）。	POST 提交后重定向到结果页。
	304	Not Modified	资源未修改（客户端缓存有效）。	缓存协商（If-Modified-Since 生效）。
	305	Use Proxy	必须通过代理访问资源（已废弃）。	早期代理服务器场景。
	307	Temporary Redirect	临时重定向且保持原请求方法。	临时维护时保持 POST 方法跳转。
	308	Permanent Redirect	永久重定向且保持原请求方法。	API 版本迁移后永久保持方法跳转。
客户端错误	400	Bad Request	请求语法错误或参数无效。	缺少必填参数或 JSON 格式错误。
(4xx)	401	Unauthorized	未提供有效身份凭证。	未登录访问需认证的接口。
	402	Payment Required	需付费完成请求（保留状态码）。	在线支付或订阅场景。
	403	Forbidden	无权限访问资源。	用户角色权限不足。
	404	Not Found	资源不存在。	URL 路径错误或资源已删除。
	405	Method Not Allowed	请求方法不被允许。	用 GET 访问仅支持 POST 的接口。
	406	Not Acceptable	服务器无法提供客户端接受的响应格式。	请求头 Accept 指定了不支持的 MIME 类型。
	407	Proxy Auth Required	需代理服务器认证。	代理服务器要求身份验证。
	408	Request Timeout	请求超时。	服务器等待客户端发送请求时间过长。
	409	Conflict	请求与资源当前状态冲突。	文件版本冲突或重复创建资源。
	410	Gone	资源已永久删除。	已下架的商品或页面。
	411	Length Required	请求头缺少 Content-Length。	上传文件未指定内容长度。
	412	Precondition Failed	请求头中的先决条件失败。	If-Match 或 If-Unmodified-Since 校验失败。
	413	Payload Too Large	请求体过大。	上传文件超过服务器限制。
	414	URI Too Long	URL 过长。	GET 请求参数过多导致 URL 超出限制。
	415	Unsupported Media Type	不支持的媒体类型。	上传文件格式不被支持（如非图片文件）。
	416	Range Not Satisfiable	请求范围不满足资源范围。	分片下载时指定范围超出文件大小。
	417	Expectation Failed	请求头 Expect 预期不符。	服务器不支持 Expect: 100-continue。
	418	I'm a Teapot	彩蛋状态码（源自愚人节玩笑）。	无实际用途，用于幽默响应。
	421	Misdirected Request	请求被发送到错误的服务器。	服务器无法生成响应（如配置错误的负载均衡）。
	422	Unprocessable Entity	请求格式正确但语义错误（WebDAV）。	验证失败（如邮箱格式错误）。
	423	Locked	资源被锁定（WebDAV）。	编辑已被其他用户锁定的文件。
	424	Failed Dependency	因前一个请求失败导致当前请求失败（WebDAV）。	批量操作中某一步骤失败。
	425	Too Early	服务器拒绝处理可能重放的请求。	防范重放攻击。
	426	Upgrade Required	需升级协议（如从 HTTP 到 HTTPS）。	强制客户端使用更安全的协议。
	428	Precondition Required	请求需包含条件头（如 If-Match）。	防止更新丢失（类似乐观锁）。
	429	Too Many Requests	请求过于频繁。	API 限流或防止暴力破解。
	431	Request Header Fields Too Large	请求头过大。	请求头（如 Cookie）超出服务器限制。
	451	Unavailable For Legal Reasons	因法律原因不可访问。	政府要求下架的非法内容。
服务器错误	500	Internal Server Error	服务器内部错误。	代码异常或未捕获的错误。
(5xx)	501	Not Implemented	服务器不支持请求的功能。	请求了未实现的 HTTP 方法。
	502	Bad Gateway	网关或代理服务器收到无效响应。	后端服务宕机或配置错误。
	503	Service Unavailable	服务不可用（临时过载或维护）。	服务器维护或流量激增。
	504	Gateway Timeout	网关或代理服务器超时。	后端服务响应超时。
	505	HTTP Version Not Supported	服务器不支持请求的 HTTP 版本。	使用 HTTP/3 请求仅支持 HTTP/1.1 的服务器。
	506	Variant Also Negotiates	内容协商循环（服务器配置错误）。	多语言版本协商失败。
	507	Insufficient Storage	服务器存储空间不足（WebDAV）。	上传文件时磁盘已满。
	508	Loop Detected	服务器检测到无限循环（WebDAV）。	文件同步时出现循环依赖。
	510	Not Extended	请求需扩展才能完成。	服务器要求客户端发送扩展头。
	511	Network Authentication Required	需网络认证（如公共 Wi-Fi 登录页面）。	连接公共网络时弹出认证页面。

HTTP 状态码关键注意事项

1. 常用状态码优先级：

   • 客户端错误优先检查 4xx（如 400, 401, 403, 404, 429）。

   • 服务器错误优先检查 5xx（如 500, 502, 503）。

2. 重定向行为差异：

   • 301 和 308 是永久重定向，浏览器会缓存。

   • 302、303、307 是临时重定向，不缓存。

3. 特殊状态码用途：

   • 204 No Content：适用于无需返回数据的操作（如 DELETE）。

   • 206 Partial Content：用于断点续传或流媒体。

   • 429 Too Many Requests：API 限流标准响应。

4. 实际开发建议：

   • 优先使用标准状态码，避免自定义非标准码（如 4xx 替代 200 包裹错误信息）。

   • 调试时结合响应头和日志分析具体原因（如 500 可能是代码异常或数据库连接失败）。