XMLHttpRequest与Fetch API：POST请求技术详解及跨域实践

原创

于 2025-10-01 09:21:44 发布 · 762 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript #ajax #json #ecmascript #typescript

文章目录

XMLHttpRequest与Fetch API：POST请求技术详解及跨域实践

XMLHttpRequest与Fetch API：POST请求技术详解及跨域实践

在现代Web开发中，POST请求是前端与服务器交互的核心方式，广泛用于表单提交、数据创建、文件上传等场景。本文系统梳理JavaScript原生的两种POST请求实现方案——XMLHttpRequest（XHR）和Fetch API，从基础用法到跨域处理，结合实例解析其技术细节与最佳实践，帮助开发者在不同场景下做出最优选择。

一、POST请求基础：核心概念与适用场景

POST请求是HTTP协议中用于向服务器提交数据的方法，与GET请求相比，具有以下特点：

数据放在请求体（body）中，而非URL，适合传输大量或敏感数据；
无数据长度限制（受服务器配置影响）；
会修改服务器状态（如创建资源），符合RESTful API设计规范。

原生JavaScript实现POST请求的两种方式各有侧重：

XMLHttpRequest：传统方案，兼容性极佳（支持IE5+），API基于事件回调，适合需要精细控制的场景；
Fetch API：ES6引入的现代方案，基于Promise设计，支持async/await语法，代码更简洁，是现代项目的首选。

二、基础POST请求实现：从数据格式到代码示例

1. XMLHttpRequest实现POST请求

XMLHttpRequest通过事件回调处理异步流程，需手动配置请求头、处理请求体和响应数据，步骤清晰但语法较繁琐。

（1）发送JSON数据（最常用场景）

JSON是前后端数据交互的主流格式，需设置Content-Type: application/json，并将数据转为字符串发送。

// 创建XHR实例
const xhr = new XMLHttpRequest();
// 配置请求：方法为POST，URL为接口地址，异步为true
xhr.open('POST', '/api/user', true);

// 设置请求头：告知服务器数据格式为JSON
xhr.setRequestHeader('Content-Type', 'application/json');
// 可选：添加认证头
xhr.setRequestHeader('Authorization', 'Bearer your-token');

// 监听请求状态变化
xhr.onreadystatechange = function() {
   
   
  // readyState=4表示请求完成（0-未初始化，1-已打开，2-已发送，3-接收中，4-完成）
  if (xhr.readyState === 4) {
   
   
    // 处理响应：200-299为成功状态码
    if (xhr.status >= 200 && xhr.status < 300) {
   
   
      try {
   
   
        const response = JSON.parse(xhr.responseText);
        console.log('JSON数据提交成功：', response);
      } catch (e) {
   
   
        console.error('JSON解析失败：', e);
      }
    } else {
   
   
      console.error('请求失败，状态码：', xhr.status, '响应：', xhr

最低0.47元/天解锁文章