【JavaWeb】Ajax

一、什么是Ajax

1.介绍

全称：Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用：

1.与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

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

XML：全称Extensible Markup Language，可扩展标记语言，本质是一种数据格式，可用来存储复杂的数据结构。

2.同步与异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。有些类似与计算机组成原理中的中断。接下来我们介绍一下异步请求和同步请求的区别。

同步请求：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操 作。

异步请求：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

举个栗子：比如客户端是老板，而服务端是秘书，当老板让秘书打印资料时，老板1只会等秘书打印好资料后继续后续工作，而老板2在秘书去打印的同时会进行其他工作，秘书打印回来之后继续工作。我们可以把同步理解为例子中的老板1，而异步则是老板2。

二、Axios

1.介绍

Axios对原生的Ajax进行了封装，简化书写，快速开发。

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

2.步骤

1.引入Axios的JS文件（参照官网）

2.使用Axios发送请求，并获取响应结果

axios({
    //请求方式，GET/POST
    method: 'GET', 
    //请求路径
    url: 'https://web-server.itheima.net/emps/list' //params：发送请求时写的的url参数，如...?key=val
    //data：请求数据（POST）
}).then((result) => { //成功回调函数
    console.log(result.data);
}).catch((err) => { //失败回调函数
    alert(err);
});

例如：

  
  
  



  GET
  POST
  
  
  

3.请求方式别名

为了方便，Axios为所有支持的请求方式提供了别名

格式：axios.请求方式(url [,data [,config]])

具体如下

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

例如

axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
    console.log(result.data);
}).catch((err) => {
    console.log(err);
});

axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {
    console.log(result.data);
}).catch((err) => {
    console.log(err);
});

2.2中的例子则可简化为