快速入门了解Ajax

• 博客主页：音符犹如代码
• 系列专栏：JavaWeb
• 关注博主，后期持续更新系列文章
• 如果有错误感谢请大家批评指出，及时修改
• 感谢大家点赞👍收藏⭐评论✍ 

Ajax的初识

意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML

作用：

• 数据交换：允许网页在不重新加载整个页面的情况下，从服务器获取最新的数据。
• 异步交互：当发送 AJAX 请求获取数据时，页面的其他操作和功能不会被阻塞，由于异步操作不需要等待数据返回就可以继续执行其他任务，能够更有效地利用系统资源，特别是在处理耗时的网络请求时。

原生Ajax:
官网文档：AJAX - XMLHttpRequest 对象

//1. 创建新的 XMLHttpRequest 对象
var xmlHttpRequest  = new XMLHttpRequest();

//2. 发送异步请求
xmlHttpRequest.open('GET','http://~');
xmlHttpRequest.send();//发送请求

//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
    //此处判断 4表示浏览器请求已完成就绪的响应数量，200表示请求的状态好是对的，没有错误
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
    }
}

上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios

Axios

介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具

官网：Axios中文文档 | Axios中文网

下边是两个来自官网的post的请求和get请求的代码

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });  

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

//请求方式的别名(来自官网)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])