JavaWeb学习路线（1）——Ajax到Axios

一、原生Ajax技术

（一）概念： 全称是Asynchronous JavaScript And XML，异步的JavaScript和XML

（二）作用：

• 1、数据交换： 通过Ajax可以给服务器发送请求，并获取服务器端响应的数据。
• 2、异步交互： 在不重新加载整个页面的情境下，与服务器交换数据并更新部分网页的技术。

（三）原生Ajax的使用
1、准备数据地址（后台服务地址）：xxxxx
2、创建XMLHttpRequest对象：用于和服务器交换数据
3、向服务器发送请求
4、获取服务器响应数据

function getData(){
	//1、创建请求对象
	var request = new XMLHttpRequest();
	//2、设置请求内容
	request.open("GET",'请求地址')
	//3、发送数据
	request.send();
	
	//4、获取请求状态
	request.onreadystatechange = function(){
		if(request.readyState == 4 && request.status == 200){
			//5、请求成功后更新响应数据
			var response = request.responseText;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、Axios技术

（一）概念：

Axios是基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 使用 XMLHttpRequests。

（二）使用：

1、引入js文件

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" />
1

2、使用Axios发送请求，并获取响应数据

//get请求
axios({
	method: "get",
	url: "请求地址"
}).then(request => {
	//响应数据
	var data = request.data;
}).catch(e => {
	//请求异常处理
	console.err(e)
})

//post请求
axios({
	method: "post",
	url: "请求地址",
	data:{
		id=1
	}
}).then(request => {
	//响应数据
	var data = request.data;
}).catch(e => {
	//请求异常处理
	console.err(e)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

（三）简化axios四种请求方式的书写

• axios.get(url[, config])
• axios.delete(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])

示例代码

axios.get("请求地址", ...)

axios.delete("请求地址", ...)

axios.post("请求地址","a=bb,c=dd", ...)

axios.put("请求地址","a=bb,c=dd", ...)
1
2
3
4
5
6
7