DAY14_Filter&Listener&Ajax&Axios&Json&fastjson&综合案例-axios和html交互

在前端与后端交互中，Ajax和Axios是常用的两种方法。Ajax是基于JavaScript的一种技术，而Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境。

1. 使用Ajax发送请求

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'http://example.com/api/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('There was a problem with the request.');
    }
  }
};
 
// 发送请求
xhr.send();

2. 使用Axios发送请求

// GET请求
axios.get('http://example.com/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// POST请求
axios.post('http://example.com/api/data', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在实际开发中，Axios更加方便和强大，因为它基于Promise，可以让我们使用链式调用，而且在Node.js环境中也可以使用。

注意：在使用Ajax和Axios发送请求时，需要注意跨域问题，如果你的前端和后端不是同源的话，你可能需要配置CORS或者使用代理服务器来解决。

在实际开发中，我们通常会将Ajax和Axios与HTML交互结合起来，以实现动态的数据更新和页面渲染。例如，我们可以在用户输入数据后，使用Ajax/Axios将数据发送到后端，后端处理完毕后再将结果返回到前端页面。

综上所述，Ajax和Axios都是前后端交互的好方法，你可以根据实际需求和项目要求选择合适的方法。