前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）

前端发起网络请求的几种常见方式及示例代码如下：

1. XMLHttpRequest (通常简称为 XHR)

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

2. Fetch API (是现代浏览器提供的一种更为强大和灵活的网络请求方式)

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

3. jQuery Ajax (需要引入jQuery库)

$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  success: function (data) {
    console.log(data);
  },
  error: function (xhr, status, error) {
    console.error("An error occurred: " + status + "\nError: " + error);
  }
});

4. Axios (是一个基于Promise的HTTP客户端，也可以在浏览器和node.js中使用)

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });