HTML Form Element、Fetch与XMLHttpRequest的区别及选型疑问

1. HTML Form Element（表单元素） #

工作原理 #

这是浏览器原生的请求发起方式：用户填写表单字段后点击提交按钮，浏览器会自动将表单内的键值对打包成请求体（默认格式是application/x-www-form-urlencoded，包含文件时自动切换为multipart/form-data），发起对应method属性指定的HTTP请求，请求完成后会刷新整个页面，或根据target属性跳转页面。

优势 #

• 零JS代码，纯HTML实现，上手成本极低
• 浏览器自动处理表单验证、数据编码、文件上传的边界情况
• 兼容性拉满，支持所有浏览器（包括古老的IE版本）

适用场景 #

• 简单的一次性数据提交场景（比如登录、注册、留言板提交）
• 不需要页面无刷新交互的传统多页网站
• 需要兼容极低版本浏览器的项目

2. XMLHttpRequest（XHR） #

工作原理 #

这是早期JS实现异步请求的核心API，通过构造XMLHttpRequest对象，手动配置请求方法、URL、请求头，传入请求体数据，然后通过监听onload、onerror、onprogress等事件获取响应或跟踪请求状态。它是AJAX技术的基础，能实现页面无刷新更新内容。

优势 #

• 支持异步/同步两种请求模式
• 可以精准监听请求进度（比如大文件上传时显示进度条）
• 兼容性好，支持IE7及以上所有浏览器

适用场景 #

• 需要兼容IE7及以上浏览器的项目
• 需跟踪请求/响应进度的场景（比如大文件上传、下载）
• 早期无Fetch API时的异步请求需求

3. Fetch API #

工作原理 #

ES6推出的现代异步请求API，基于Promise语法设计，通过fetch()方法发起请求，返回一个Promise对象，需要通过链式调用或async/await语法处理响应，且必须手动调用.json()、.text()等方法解析响应体。

常见问题解决（你遇到的PUT/POST失败问题） #

多数时候失败是因为这几个细节没处理：

• 请求头配置错误：如果发送JSON数据，必须设置Content-Type: application/json，同时将数据用JSON.stringify()转为字符串；如果发送表单数据，直接使用FormData对象，无需手动设置Content-Type，浏览器会自动处理。
• 未处理HTTP错误：Fetch只有在网络层面出错时才会触发Promise reject，HTTP状态码错误（比如404、500）不会自动reject，需要手动判断response.ok属性。
• Cookie携带问题：Fetch默认不携带Cookie，若需要发送Cookie，需配置credentials: 'include'。

示例代码：

async function sendPutRequest() {
  try {
    const response = await fetch('/api/user/1', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username: 'newName' }),
      credentials: 'include' // 携带Cookie
    });

    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('请求出错:', error);
  }
}

优势 #

• 基于Promise，符合现代JS异步编程风格，代码更简洁易读
• 支持Stream API，可处理流式数据（比如实时加载大文件）
• 默认不携带Cookie，安全性更高，需手动配置才会发送

适用场景 #

• 现代浏览器环境的项目（无需兼容IE）
• React、Vue等前端框架构建的单页应用（SPA）
• 需要处理流式数据、复杂异步流程的场景

选型权衡要点 #

1. 若需求是简单提交、零JS成本、兼容全浏览器：优先选Form Element
2. 若需兼容IE7+、跟踪请求进度：用XMLHttpRequest
3. 若为现代项目、追求简洁异步代码、处理流式数据：选Fetch API
4. 单页应用（SPA）场景下，优先用Fetch（或基于Fetch封装的工具），因为需要无刷新交互

内容的提问来源于stack exchange，提问作者He llup