JavaScript实现AJAX请求方法详解

本篇文章向大家介绍《JavaScript如何实现AJAX请求》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

AJAX可通过XMLHttpRequest、fetch或jQuery实现；推荐使用基于Promise的fetch API，支持async/await，语法简洁，现代浏览器兼容，发送GET/POST请求更高效。

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。在JavaScript中，可以通过多种方式实现AJAX请求，下面介绍几种常用方法。

使用原生 XMLHttpRequest

XMLHttpRequest 是最早用于实现 AJAX 的原生对象，兼容性好，适合学习理解原理。

• 创建 XMLHttpRequest 实例
• 调用 open() 方法设置请求方式和URL
• 监听 onreadystatechange 事件处理响应
• 调用 send() 发送请求

示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 处理返回数据
  }
};
xhr.send();

使用 fetch API

fetch 是现代浏览器提供的更简洁、基于 Promise 的网络请求方法，推荐在支持的环境中使用。

• 语法更清晰，支持 async/await
• 返回 Promise，便于链式调用
• 需要手动检查响应状态

示例：

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('网络错误');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

配合 async/await 使用更直观：

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

使用 jQuery.ajax（如果项目引入了 jQuery）

虽然现在原生方法更流行，但一些老项目仍使用 jQuery 简化 AJAX 操作。

$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, err) {
    console.error(err);
  }
});

发送 POST 请求（以 fetch 为例）

向服务器提交数据时通常使用 POST 方法。

fetch('/api/submit', {
  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，如需兼容旧浏览器可搭配 polyfill 或使用 axios 等库。

本篇关于《JavaScript实现AJAX请求方法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！