JavaScript发送HTTP请求：fetch与AJAX教程

本篇文章向大家介绍《JavaScript发送HTTP请求教程：fetch与AJAX详解》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

fetch 是基于 Promise 的现代 API，语法简洁，推荐用于新项目；2. AJAX（XMLHttpRequest）兼容性好但代码冗长，适合旧浏览器；3. fetch 需手动检查 response.ok 并解析 JSON，不因 HTTP 错误状态自动 reject；4. 两者均可实现 GET 和 POST 请求，但 fetch 支持 async/await 更易读；5. 中断请求方面，XMLHttpRequest 使用 abort()，fetch 需借助 AbortController；6. 实际开发中建议新项目用 fetch，兼容性需求可选 axios 或封装 XMLHttpRequest；7. 注意处理网络异常与业务错误区分，及安全凭据设置。

JavaScript发送HTTP请求是前端与后端交互的核心能力。现代开发中，常用的方法有 fetch 和传统的 AJAX（通常通过 XMLHttpRequest）。下面详细介绍它们的使用方式、区别和实际应用场景。

使用 fetch 发送 HTTP 请求

基本用法：

• fetch 默认发送 GET 请求，返回一个 Promise
• 需要手动调用 .json() 解析响应体

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: '张三',
    age: 25
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('提交成功:', data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

注意：fetch 不会因 HTTP 状态码报错（如 404 或 500），需手动检查 response.ok。

使用 AJAX（XMLHttpRequest）发送请求

基本流程：

• 创建 XMLHttpRequest 实例
• 配置请求方式、URL 和回调函数
• 发送请求并处理响应

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

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201) {
    const data = JSON.parse(xhr.responseText);
    console.log('创建成功:', data);
  }
};
xhr.send(JSON.stringify({
  name: '李四',
  age: 30
}));

缺点：代码冗长，嵌套回调容易形成“回调地狱”，不如 fetch 直观。

fetch 与 AJAX 的对比

• fetch 基于 Promise，支持 async/await；XMLHttpRequest 是事件驱动
• fetch 语法更简洁，但默认不带 cookie，需设置 credentials: 'include'
• XMLHttpRequest 可以中断请求（abort），fetch 使用 AbortController 实现
• fetch 在老版本 IE 中不支持，需 polyfill

const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data));

// 需要时中断请求
controller.abort();

实际开发建议

• 新项目优先使用 fetch，结合 async/await 提升可读性
• 需要兼容低版本浏览器时，考虑使用 axios 或封装 XMLHttpRequest
• 处理错误时，注意区分网络异常和业务错误
• 发送敏感数据时，设置凭据和头部安全策略

到这里，我们也就讲完了《JavaScript发送HTTP请求：fetch与AJAX教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于Http请求,ajax,Fetch,Promise,XMLHttpRequest的知识点！