介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用：

  • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据。

  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

同步与异步：

Axios

介绍：Axios对原生的Ajax进行了封装，讲话书写，快速开发。

官网：https://www.axios-http.cn/

步骤：

  • 引入Axios的js文件（参照官网）

  • 使用Axios发送请求，并获取响应结果。

<script src="htts://unpkg.com/axios/dist/axios.min.js"></script>

axios({
  //参数
  method:'GET',
  url:'https://web-server.itheima.net/emps/list'
}).then((result) => {//成功回调函数————接收服务器端返回的数据
  console.log(result.data);
}).catch((err) => {//失败回调函数-
  alert(err);
});

  • method：请求方式，GET/POST

  • url：请求路径

  • data：请求数据（POST）

  • params：发送请求时携带的url参数 如：...?key=val

Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名

格式：axios.请求方式（url [ , data [ , config ] ] ）

推荐用法

//GET方式
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
  console.log(result.data);
}).catch((err) => {
  console.log(err);
});
//POST方式
axios.post('https://mock.ailfox.cn/m1/3083103-0-default/emps/updata','id=1').then((result) => {
  console.log(result.data);
}).catch((err) => {
  console.log(err);
});