5 Ajax
5.1 介绍
-
Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML；
-
作用：
-
与服务器进行数据交互：前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端；
-
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术；
-
如下图所示，在百度搜索Java时，下面的联想数据是通过Ajax请求从后台服务器得到的。在整个过程中，Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高；
-
同步请求：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作；
-
异步请求：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作；
-
-
5.2 原生Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-***patible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生Ajax</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div>
</body>
<script>
function getData(){
//1. 创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法
var xmlHttpRequest = new XMLHttpRequest();
//2. 调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.***/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;
}
}
}
</script>
</html>
5.3 Axios
- Axios是对原生的AJAX进行封装，简化书写。
5.3.1 基本使用
-
引入Axios文件：
<script src="js/axios-0.18.0.js"></script> -
使用Axios发送请求，并获取响应结果，此处给出2种方式；
-
发送 get 请求：
axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){ alert(resp.data); }) -
发送 post 请求：
axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); });
-
-
语法讲解：
-
axios()是用来发送异步请求的，小括号中使用JS的JSON对象传递请求相关的参数：- method属性：用来设置请求方式的。取值为 get 或者 post；
- url属性：用来书写请求的资源路径；
- 如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2；
- data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值；
-
then()需要传递一个匿名函数；- 将
then()中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数； - 该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。
- 将
-
5.3.2 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-***patible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<input type="button" value="获取数据GET" onclick="get()">
<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
function get(){
//通过axios发送异步请求-get
axios({
method: "get",
url: "http://yapi.smart-xwork.***/mock/169327/emp/list"
}).then(result => {
console.log(result.data);
})
}
function post(){
// 通过axios发送异步请求-post
axios({
method: "post",
url: "http://yapi.smart-xwork.***/mock/169327/emp/deleteById",
data: "id=1"
}).then(result => {
console.log(result.data);
})
}
</script>
</html>
-
浏览器打开后，按下f12抓包，然后分别用鼠标点击2个按钮，查看控制台效果如下：
5.3.3 请求方法的别名
-
Axios还针对不同的请求，提供了别名方式的api，具体如下：
方法 描述 axios.get(url [, config]) 发送get请求 axios.delete(url [, config]) 发送delete请求 axios.post(url [, data[, config]]) 发送post请求 axios.put(url [, data[, config]]) 发送put请求 -
目前只关注get和post请求，所以在
5.3.2 快速入门的入门案例中，可以将get请求代码改写成如下：axios.get("http://yapi.smart-xwork.***/mock/169327/emp/list").then(result => { console.log(result.data); }) -
post请求改写成如下：
axios.post("http://yapi.smart-xwork.***/mock/169327/emp/deleteById","id=1").then(result => { console.log(result.data); })
