一、什么是Ajax
概念:Asynchronous JavaScript And XML,异步的JavaScript和XML
作用:
- 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
- 异步交互:可以在不加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。
同步与异步:
Ajax原生方式获取服务器数据:
function getData(){//1.创建XMLHttpRequestvar xmlHttpRequest = new XMLHttpRequest();//2.发送异步请求xmlHttpRequest.open('GET',"一个网址");xmlHttpRequest.send();//发送请求//3.获取服务器响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}
二、Axios
Axios是Ajax的一种现代化替代方案,它在功能性和易用性上都有很大的提升。Axios提供了更为简洁的API和更强大的功能。
Axios方式获取服务器数据:
//通过axios发送异步请求get
function get() {axios({method: "get",url: "一个网址",//成功回调函数}).then((result) => {console.log(result.data);});
Axios方式发送数据:
//通过axios发送异步请求post
axios({method:"post",url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1"}).then((result)=>{console.log(result.data);
});
Axios请求方式别名
Axios为简化书写,为各种请求方式定义了别名:
axios.get(url[,config]);
axios.delete(url[,config]);
axios.post(url[,data[,config]]);
axios.put(url[,data[,config]]);
Axios别名方式发送请求:
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);
});axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result =>{console.log(result.data);
})