前端 | Ajax&Axios模块

---

1. Ajax

1.1 Ajax介绍

Ajax: 全称（Asynchronous JavaScript And XML），异步的JavaScript和XML。

1.2 Ajax作用

• 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
• 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

1.3 同步异步

• 同步请求发送过程如下图所示：

  

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

• 异步请求发送过程如下图所示：

  

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

1.4 原生Ajax

//1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求

//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
    //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. Axios

2.1 Axios下载

npm install -g Axios@0.18.0
1

2.2 Axios基本使用

• 引入 Axios 文件

<script src="js/axios-0.18.0.js"></script>
1

• 框架

// 发送 post 请求
axios({
    method:"post",	// method:请求方式
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"	// url:链接
    data:"username=zhangsan"
}).then(result => {
     console.log(result.data);
})

// 发送 get 请求
axios({
    method:"get",	// method:请求方式
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"	// url:链接
    data:"username=zhangsan"
}).then(result => {
     console.log(result.data);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.3 Axios方法

• Axios还针对不同的请求，提供了别名方式的api：

• 框架

// 发送 post 请求
axios.post("URL","DATA").then(result => {
    console.log(result.data);
})

// 发送 get 请求
axios.get("URL").then(result => {
    console.log(result.data);
})
1
2
3
4
5
6
7
8
9