Ajax
概念
- AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
作用
- 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
- 后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行
- 局部刷新：浏览器接收到结果以后进行页面局部刷新
未使用Ajax和使用Ajax后对比
- 没学习AJAX之前发送请求和获取响应的方式
image-20221106155023762.png
- 浏览器发送HTTP返回的是一个完整的网页,浏览器会显示这个网页
- 浏览器会等待服务器的响应(同步请求)
- 学习AJAX之后
image-20221106155200255.png
- AJAX返回的是部分数据,浏览器内容不会变化
- 后台发送,不影响浏览器的操作(异步请求)
例子
使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了
- 使用HTTP获取一个完整的网页
image-20221106155358377.png
- 登录的时候输入用户名，失去焦点的时候，就会使用AJAX发送一个异步请求到后台，然后返回用户存在与否的结果
image-20221106155433408.png
Ajax原生API
- 创建 XMLHttpRequest 对象：用于和服务器交换数据
let xmlhttp = new XMLHttpRequest()
- 设置状态回调监听，获取服务器响应数据
xmlHttp.onreadystatechange=function (){
if(xmlHttp.readyState==4 && xmlHttp.status=200){
alert(xmlHttp.responseText);
}
}
- 发送请求
//设置请求方式和资源地址
xmlhttp.open("GET",“url");
//发送请求
xmlhttp.send();
- API简介
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义了当 readyState 属性发生改变时所调用的函数。 |
| readyState | 保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" |
| statusText | 返回状态文本（例如 "OK" 或 "Not Found"） |
Ajax快速入门
学习网站：https://www.w3school.com.cn/
步骤
- 编写AjaxServlet，并使用response输出字符串
/**
* Ajax 异步的JavaScript和XML
*/
@WebServlet(value = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = -2594113160049777689L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write("hello ajax");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
- 编写HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax快速入门</title>
</head>
<body>
<script>
//创建Ajax的核心对象
let xmlHttpRequest = new XMLHttpRequest();
//设置监听，获取请求的响应数据（onreadystatechange 就是在状态变化时进行回调）
xmlHttpRequest.onreadystatechange = function () {
//readyState == 4 表示请求完成，并且可以返回了响应数据到浏览器
//status == 200 表示响应码，200为请求成功，就可以获取响应数据
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
alert(xmlHttpRequest.responseText);
}
}
//请求方式和URL的配置，并发送请求
xmlHttpRequest.open('GET', "ajaxServlet");
xmlHttpRequest.send();
</script>
</body>
</html>
Axios异步框架
- Axios 对原生的AJAX进行封装，简化书写
- 官网：https://www.axios-http.cn
注意：axios会自动将字符串的true和false转换为boolean类型
Axios快速入门
步骤：
- 编写AxiosServlet，接收请求参数，并使用response输出字符串
@WebServlet(value = "/axiosServlet")
public class AxiosServlet extends HttpServlet {
private static final long serialVersionUID = 7336379928784176967L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("接收到axios的请求：" + username + "=" + password);
response.getWriter().write("hello " + username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
- 下载并引入axios的js文件
<script src="js/axios-0.18.0.js"></script>
- 发送GET请求
axios({
method: "GET",
url: "axiosServlet?username=zhangsan&password=333"
}).then(resp => {
//resp 表示响应对象，resp.data，表示响应数据
alert(resp.data)
});
- 发送POST请求
axios({
method: "POST",
url: "axiosServlet",
data: "username=lisi&password=444"
}).then(resp => {
alert(resp.data)
});
- 编写HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios快速入门</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">Post请求</button>
<script>
//使用Axios的GET请求
function testGet() {
axios({
method: "GET",
url: "axiosServlet?username=zhangsan&password=333"
}).then(resp => {
//resp 表示响应对象，resp.data，表示响应数据
alert(resp.data)
});
}
//使用Axios的POST请求
function testPost() {
axios({
method: "POST",
url: "axiosServlet",
data: "username=lisi&password=444"
}).then(resp => {
alert(resp.data)
});
}
</script>
</body>
</html>
Axios 请求方式别名
- 为了方便起见， Axios 已经为所有支持的请求方法提供了别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
- 常用的别名
| 方法名 | 作用 |
|---|---|
| get(url) | 发起GET方式请求 |
| post(url,请求参数) | 发起POST方式请求 |
- 发送GET请求
axios.get("axiosServlet?username=zhangsan&password=333")
.then(resp => {
//resp.data 代表响应的数据
alert(resp.data)
});
- 发送POST请求
axios.post("axiosServlet", "username=wangwu&password=555")
.then(resp => {
alert(resp.data)
});
- 编写HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios别名</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">Post请求</button>
<script>
//使用Axios的别名，进行GET请求
function testGet() {
//参数：请求路径和请求参数（存放在请求行）
axios.get("axiosServlet?username=zhangsan&password=333")
.then(resp => {
//resp.data 代表响应的数据
alert(resp.data)
});
}
//使用Axios的别名方式，进行POST请求
function testPost() {
//第一个参数：请求路径（存放在请求行）
//第二个参数：请求参数（存放在请求体）
axios.post("axiosServlet", "username=wangwu&password=555")
.then(resp => {
alert(resp.data)
});
}
</script>
</body>
</html>
