前端发送ajax请求的方法

1.使用XMLHttpRequest（XHR）对象：

XHR 是原生 JavaScript 提供的一种发送 HTTP 请求的接口，通过创建一个 XMLHttpRequest 对象，你可以手动发送各种类型的 HTTP 请求（如 GET、POST 等），并且可以自定义请求头、请求参数等。

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求参数
xhr.open('GET', 'https://api.example.com/data', true);

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText); // 请求成功，处理返回的数据
    } else {
      console.error('Error:', xhr.status); // 请求失败，输出错误信息
    }
  }
};

// 发送请求
xhr.send();

2.使用fetch API

fetch 是一种新的网络请求 API，它提供了更简洁、更强大的方式来发起 HTTP 请求。fetch 函数返回一个 Promise 对象，支持异步操作，同时也支持使用 async/await 进行处理。

// 发起 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // 处理返回的数据
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

3.单独的axios

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它是一个封装了 XHR 的 JavaScript 库，提供了更简洁、更易用的 API，支持拦截请求和响应、CSRF 保护、取消请求等功能。

// 发起 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理返回的数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

4.jQuery 的 $.ajax 方法

如果你使用了 jQuery，可以使用其提供的 $.ajax() 方法来发送 AJAX 请求。它提供了丰富的配置选项，如请求类型、请求参数、回调函数等，同时也支持 Promise 风格的链式调用。

// 发起 GET 请求
$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data); // 处理返回的数据
  },
  error: function(xhr, status, error) {
    console.error('Error:', error); // 输出错误信息
  }
});

5.Vue.js 的 axios 插件

在 Vue.js 中，通常使用 axios 插件来发送 AJAX 请求。axios 提供了一种简单、优雅的方式来处理 HTTP 请求，并且与 Vue.js 结合得很好。

同3，不过在框架里使用都会进行一些封装。