JavaScript中调用AJAX的方法有哪些？不同API如何实现？，ajax调用方法

在JavaScript中调用AJAX的核心上文小编总结是：现代开发应优先使用基于Promise的fetch API，因其语法简洁、符合现代Web标准且易于与异步编程模式（async/await）结合；对于需要兼容旧版浏览器或处理复杂XMLHttpRequest场景的项目，则需封装原生的XMLHttpRequest对象或引入Axios等第三方库，无论采用何种方式，核心流程均包含创建请求对象、配置请求参数（URL、方法、头信息、数据）、监听状态变化或处理响应Promise,以及最终解析响应数据。

现代标准方案：使用Fetch API

fetch是浏览器原生提供的API，旨在替代传统的XMLHttpRequest，它返回一个Promise对象,使得异步代码的编写更加直观。

基本GET请求 获取数据时，只需提供URL即可，需要注意的是，fetch默认不会发送Cookie，除非显式配置credentials: 'include'。

fetch('/api/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/await语法，使异步代码看起来像同步代码,极大提升可读性。

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('捕获异常:', error);
  }
}

发送POST请求 发送JSON数据时，必须手动设置Content-Type为application/json,并将数据对象序列化为字符串。

async function postData() {
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'John', age: 30 })
  });
  return response.json();
}

传统兼容方案：XMLHttpRequest

尽管fetch已成为主流，但在某些老旧项目或特定企业环境中，XMLHttpRequest（XHR）仍被广泛使用,理解XHR有助于维护遗留代码。

创建与配置 通过new XMLHttpRequest()实例化对象，使用open方法初始化请求，send方法发送请求。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // true表示异步
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.onerror = function () {
  console.error('请求错误');
};
xhr.send();

XHR的局限性 XHR基于事件驱动，回调嵌套深，错误处理分散，难以进行链式调用，相比之下，Fetch基于Promise,支持更强大的错误捕获和并发控制。

第三方库方案：Axios

在实际生产环境中，Axios因其自动JSON转换、请求/响应拦截器、取消请求和更好的错误处理机制,成为许多开发者的首选。

核心优势

• 自动转换：无需手动JSON.stringify或JSON.parse。
• 拦截器：可在请求发出前或响应返回后统一处理逻辑（如添加Token、统一错误提示）。
• 浏览器兼容性好：在旧版IE中也能提供一致的Promise体验。

示例代码

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

最佳实践与注意事项

1. 错误处理：fetch在HTTP错误状态码（如404、500）时不会抛出错误，而是返回一个成功的Promise，但ok属性为false，必须手动检查response.ok。
2. 安全性：始终验证用户输入，防止XSS攻击；在后端设置CORS策略,确保跨域请求合法。
3. 性能优化：对于大量并发请求，可使用Promise.all或Promise.allSettled进行批量处理,避免串行请求导致的性能瓶颈。
4. 取消请求：在用户快速切换页面时，应取消未完成的请求以节省带宽，Fetch可使用AbortController，Axios使用CancelToken。

相关问答

Q1: Fetch和XMLHttpRequest的主要区别是什么？ A1: 主要区别在于API设计和错误处理机制，Fetch基于Promise，语法更现代，支持async/await，且默认不发送Cookie；XHR基于事件监听，语法较繁琐，默认发送Cookie但处理复杂错误时代码冗长，Fetch在HTTP错误时不会自动reject,需手动检查状态码。

Q2: 为什么推荐使用async/await处理AJAX请求？ A2: async/await使异步代码的书写方式接近同步代码，显著提升了代码的可读性和可维护性，它避免了多层嵌套的回调函数（回调地狱），并且与try-catch错误处理机制完美配合，使得错误捕获更加集中和直观,便于调试和逻辑控制。

互动环节 您在实际开发中更倾向于使用原生Fetch还是第三方库如Axios？欢迎在评论区分享您的理由和使用场景,我们将选取优质评论进行回复。