当前位置：首页 > 文章列表 > 文章 > 前端 > JSAJAX请求怎么发｜fetchAPI实战教程

JSAJAX请求怎么发｜fetchAPI实战教程

2025-11-24 08:33:51 0浏览收藏

在前端开发中，**AJAX（Asynchronous JavaScript and XML）**技术是实现页面无刷新数据交互的关键。本文将深入讲解如何使用 JavaScript 发送 AJAX 请求，重点对比分析了两种主流方式：**fetch API** 和 **XMLHttpRequest**。Fetch API 基于 Promise，语法简洁，支持 async/await，是现代 Web 开发的首选；而 XMLHttpRequest 兼容性好，但代码相对冗长。我们将通过实例代码详细介绍 GET 和 POST 请求的发送方法，以及如何处理响应数据和错误，并提供使用 `AbortController` 取消 fetch 请求的技巧。推荐开发者优先使用 fetch API，复杂场景可选择 axios 等库。

AJAX异步通信主要用fetch和XMLHttpRequest，fetch基于Promise语法简洁，支持async/await，成为主流选择；XMLHttpRequest兼容性好但代码冗长。1. fetch发送GET请求：fetch('url').then(res => res.json()).then(data => console.log(data))；2. 使用async/await更清晰：async function getData(){ const res = await fetch('url'); if(!res.ok) throw new Error(); const data = await res.json(); }；3. POST请求需设置method、headers和stringify的body；4. XMLHttpRequest需监听onreadystatechange，readyState为4且status为200时表示成功，需手动解析JSON；5. fetch默认不报错需检查response.ok，可用AbortController取消请求；6. 推荐优先使用fetch，复杂场景可选axios等库。

JS AJAX请求怎么发送_JS AJAX异步请求与fetchAPI使用方法

AJAX（Asynchronous JavaScript and XML）是前端开发中实现异步通信的核心技术，它允许我们在不刷新页面的情况下与服务器交换数据。在现代JavaScript中，发送AJAX请求主要有两种方式：传统的 XMLHttpRequest（常通过jQuery封装使用），以及更现代的 fetch API。下面详细介绍这两种方法的实际用法。

使用 fetch API 发送异步请求

fetch 是浏览器原生提供的API，基于 Promise，语法简洁，支持 async/await，已成为主流选择。

● 基本 GET 请求：

获取数据是最常见的操作。

示例：

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);
  });

● 使用 async/await 写法更清晰：

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('错误:', error);
  }
}
getData();

● 发送 POST 请求（提交数据）：

async function postData() {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: '张三',
      age: 25
    })
  });

  if (!response.ok) throw new Error('提交失败');

  const result = await response.json();
  console.log(result);
}
postData();

● 常见配置项说明：

method：请求方法，如 GET、POST、PUT、DELETE
headers：设置请求头，特别是发送 JSON 数据时需指定 Content-Type
body：POST 或 PUT 请求时携带的数据，必须是字符串（通常用 JSON.stringify）

传统 AJAX：XMLHttpRequest 基础用法

虽然 fetch 更现代，但了解 XMLHttpRequest 有助于理解底层机制。

● 简单 GET 请求示例：

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();

● POST 请求示例：

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) {
    console.log('创建成功');
  }
};

xhr.send(JSON.stringify({ name: '李四', age: 30 }));

● 注意事项：

readyState 为 4 表示请求完成
需手动解析 JSON（使用 JSON.parse）
错误处理较繁琐，不如 fetch 直观

fetch 与 XMLHttpRequest 的对比

两者都能实现异步请求，但存在明显差异：

fetch 返回 Promise，天然支持链式调用和 async/await
fetch 默认不会报错（即使状态码是 4xx 或 5xx），需要手动检查 response.ok
XMLHttpRequest 兼容性更好（IE 可用），但代码冗长
fetch 不支持取消请求（可用 AbortController 实现），而 xhr 可调用 abort()

● 使用 AbortController 取消 fetch 请求：

const controller = new AbortController();

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

// 在需要时取消请求
controller.abort();

基本上就这些。日常开发推荐优先使用 fetch API，结构清晰，易于维护。对于复杂场景或需要兼容老版本浏览器的项目，可考虑封装 xhr 或引入 axios 等第三方库。

以上就是《JSAJAX请求怎么发｜fetchAPI实战教程》的详细内容，更多关于异步请求,ajax,Promise,XMLHttpRequest,fetchAPI的资料请关注golang学习网公众号！

异步请求 ajax Promise XMLHttpRequest fetchAPI