AJAX&Axios知识总结

AJAX 全称为 "Asynchronous JavaScript and XML"（异步 JavaScript 和 XML），是一种创建交互式网页应用的技术。Axios 是一个基于 promise 的 HTTP 库，它在浏览器和 node.js 中都可以使用。

以下是一些常见的AJAX和Axios的使用方法和代码示例：

1. 使用AJAX发送GET请求：

// 使用原生JavaScript发送AJAX GET请求
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. 使用Axios发送GET请求：

// 使用Axios发送GET请求
axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

3. 使用AJAX发送POST请求：

// 使用原生JavaScript发送AJAX POST请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify({
  key: 'value'
}));

4. 使用Axios发送POST请求：

// 使用Axios发送POST请求
axios.post('https://api.example.com/data', {
  key: 'value'
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

5. 使用Axios处理响应数据：

// 使用Axios处理响应数据
axios.get('https://api.example.com/data')
  .then(function (response) {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

6. 使用Axios取消请求：

// 使用Axios取消请求
var cancel;
 
axios.get('https://api.example.com/data', {
  cancelToken: new axios.CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// 在需要取消请求的时候调用cancel方法
cancel();

7. 使用Axios设置请求超时：

// 使用Axios设置请求超时
axios.get('https://api.example.com/data', {
  timeout: 1000
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

以上代码示例展示了如何使用AJAX和Axios发送GET和POST请求，处理响应数据，取消请求，以及设置请求超时。Axios相对于原生AJAX来说，更加现代和简洁，提供了更