Ajax-入门

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

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

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

Axios

Axios的使用比较简单，主要分为2步：

1). 引入Axios文件

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

2). 点击按钮时，使用Axios发送请求

<script>//GET请求document.querySelector('#getData').onclick = function() {//axios发送异步请求axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',method:'get'}).then(function(res) {console.log(res.data);}).catch(function(err) {console.log(err);})}//POST请求document.querySelector('#postData').onclick = function() {axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',method:'post'}).then(function(res) {
//成功回调函数console.log(res.data);}).catch(function(err) {
//失败回调函数console.log(err);})}</script>

Axios还针对不同的请求，提供了别名方式的api，具体格式如下：

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);
})

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