JavaScript发送HTTP请求的主要方法详解

更新时间：2026年03月25日 08:18:27 作者：detayun

在Web开发中,JavaScript与服务器进行数据交互是核心需求之一,本文详细介绍了JavaScript中发送HTTP请求的几种主要方法,大家可以根据需要进行选择

在Web开发中，JavaScript与服务器进行数据交互是核心需求之一。从早期的原生AJAX到现代Fetch API，再到第三方库如Axios，前端请求方案不断迭代优化。本文将详细解析JavaScript发送请求的常用方法，帮助开发者根据场景选择最适合的方案。

一、原生AJAX（XMLHttpRequest）

1. 基础用法

XMLHttpRequest（XHR）是浏览器原生支持的异步请求技术，通过创建对象并配置请求参数实现数据交互：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 异步请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

2. POST请求示例

发送JSON数据时需设置请求头并序列化参数：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 201) console.log('创建成功');
    else console.error('请求失败:', xhr.statusText);
  }
};
xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));

3. 优缺点分析

优点：兼容性好（IE6+支持），可监听上传进度（upload.onprogress）

缺点：

代码冗长，需手动管理状态
默认不携带Cookie（需设置xhr.withCredentials = true）
跨域请求需后端配置Access-Control-Allow-Credentials

二、Fetch API

1. 基础用法

Fetch基于Promise实现更简洁的异步操作：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Network error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. POST请求示例

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 30 }),
  credentials: 'include' // 携带Cookie
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(console.error);

3. 高级特性

超时控制：通过AbortController实现

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求超时');
  });

流式响应：处理大文件时使用response.body.getReader()

4. 优缺点分析

优点：语法简洁，支持流式处理，天然Promise链式调用

缺点：

默认不处理404/500等错误状态码（需手动检查response.ok）
跨域请求需后端配置Access-Control-Allow-Origin
兼容性（IE不支持，需polyfill）

三、第三方库方案

1. Axios

核心特性

自动JSON转换
请求/响应拦截器
取消请求（CancelToken）
客户端防御XSRF

示例代码

axios.post('https://api.example.com/submit', { name: 'Charlie' })
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('服务器错误:', error.response.status);
    } else {
      console.error('网络错误:', error.message);
    }
  });

2. jQuery AJAX

传统写法

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  dataType: 'json',
  success: function(data) { console.log(data); },
  error: function(xhr, status, error) { console.error(error); }
});

简写形式

$.get('https://api.example.com/data', function(data) {
  console.log(data);
});

四、特殊场景方案

1. 表单模拟提交（PUT/DELETE）

通过隐藏表单实现非GET/POST方法的提交：

function submitWithMethod(url, method, data) {
  const form = document.createElement('form');
  form.method = 'POST'; // 表单原生不支持PUT/DELETE
  form.action = url;
  
  // 添加_method字段模拟真实HTTP方法
  const methodInput = document.createElement('input');
  methodInput.type = 'hidden';
  methodInput.name = '_method';
  methodInput.value = method;
  form.appendChild(methodInput);

  // 添加数据字段
  Object.entries(data).forEach(([key, value]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = value;
    form.appendChild(input);
  });

  document.body.appendChild(form);
  form.submit();
}

// 使用示例
submitWithMethod('/orders/123', 'PUT', { status: 'shipped' });

2. 文件上传进度监控

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

// 上传进度事件
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  }
};

xhr.send(new FormData(document.getElementById('uploadForm')));

五、选择建议

场景	推荐方案	理由
现代浏览器开发	Fetch API	语法简洁，支持流式处理，与Promise生态无缝集成
需要兼容IE	Axios	自动降级处理，提供统一的错误处理机制
复杂业务逻辑	Axios拦截器	通过拦截器统一处理认证、日志、错误重试等横切关注点
大文件上传	XHR	支持进度监控，可配合分片上传策略
表单重定向提交	隐藏表单法	浏览器自动处理Cookie，后端可识别_method字段模拟PUT/DELETE

六、最佳实践

错误处理：始终检查HTTP状态码，不要依赖catch捕获所有错误

安全防护：

敏感操作使用HTTPS
跨域请求配置CORS头
重要操作添加CSRF Token

性能优化：

合理使用缓存（Cache-Control）
大文件采用分片上传
频繁请求使用WebSocket或Server-Sent Events

调试技巧：

使用浏览器Network面板验证请求头/体
通过console.log(response)检查原始响应结构
复杂场景使用Postman等工具先验证接口

结语

JavaScript请求方案的选择应基于项目需求、团队熟悉度和浏览器兼容性。现代项目推荐以Fetch API为主，复杂场景引入Axios增强功能，同时保持对XHR的理解以便维护遗留代码。无论采用哪种方案，始终牢记安全性、可维护性和性能这三个核心原则。

到此这篇关于JavaScript发送HTTP请求的主要方法详解的文章就介绍到这了,更多相关JavaScript发送HTTP请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
这篇文章主要介绍了利用JavaScript缓存远程窃取Wi-Fi密码的方法，本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
百度空间的popup效果分析
自从用firefox浏览器以来，就几乎养成了一个习惯，就想用WebDeveloper把一些漂亮网站的js包括css给down下来分析一下，用来学习。
2008-10-10
JS数组扁平化的方法合集(递归，while循环，flat)
数组扁平化也是面试常考题之一,今天就和大家简单分享一下常见的数组扁平方法,这题其实主要考察的是递归思想,因为当数组里面嵌套非常多层数组的时候只能通过循环递归来进行扁平,本次分享主要也是分享本题的递归思想,需要的朋友可以参考下
2024-06-06
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
我们开发的人来说经常要加个判断，要不可能某些功能没法正常使用。要是没加个判断就会给大家带来些麻烦
2013-11-11
JS只能输入正整数的简单实例
下面小编就为大家带来一篇JS只能输入正整数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
js实现三张图（文）片一起切换的banner焦点图
这篇文章主要介绍了js实现三张图（文）片一起切换的banner焦点图，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
echarts饼图labelLine线的长度自适应设置
这篇文章主要给大家介绍了关于echarts饼图labelLine线的长度自适应设置的相关资料,在echarts中,饼图的标签线可以通过设置 labelLine属性来自定义位置,需要的朋友可以参考下
2023-08-08
如何在微信小程序中存setStorage
这篇文章主要介绍了如何在微信小程序中存setStorage,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
fmt:formatDate的输出格式详解
本篇文章主要是对fmt:formatDate的输出格式进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
配置Webpack SourceMap 实践教程
这篇文章主要介绍了如何配置Webpack SourceMap，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2024-03-03