AJAX 简介
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。其实AJAX就可以理解为就是JS。通过AJAX也就实现了前后端分离，前端只写页面，后端生成数据！
现在开始通过实例学习：
1--GET传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function ajax2() {
//0:获取input内容
let user = document.querySelector(".user").value;
let pwd = document.querySelector(".pwd").value;
//1:创建ajax对象
let xmlHttpRequest = new XMLHttpRequest();
//2:配置后端请求--get请求参数用？和&来传参数
xmlHttpRequest.open("get", "/stage1_war_exploded/ajax2?user="+user+"&pwd="+pwd, true)
//3:发送请求
xmlHttpRequest.send();
//4:监听数据是否请求成功
xmlHttpRequest.onreadystatechange = function () {
//5:如果服务器成功解析数据则readyState=4,如果后端成功返回数据则state=200
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//6:获取后端数据
let data = xmlHttpRequest.responseText;
//7:将数据插入前端页面
document.getElementById("show").innerHTML = data;
}
}
}
</script>
<body>
<div id="show" style="border: 1px red; width: 200px;height: 100px">
</div>
账号<input type="text" class="user"><br>
密码<input type="text" class="pwd"><br>
<button onclick="ajax2()">提交</button>//当点击按钮后，调用ajax2()方法
</body>
</html>2--后端生产数据
@WebServlet("/ajax2")
public class ajax2 extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置编码
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//后端获取get方式的参数就用getParameter
String user = req.getParameter("user");
String pwd = req.getParameter("pwd");
PrintWriter writer = resp.getWriter();
//将后端数据返回给前端
writer.write("后端数据来了"+user+"-----"+pwd);
}
}
3--POST传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function ajax2() {
//0:获取input内容
let user = document.querySelector(".user").value;
let pwd = document.querySelector(".pwd").value;
//1:创建ajax对象
let xmlHttpRequest = new XMLHttpRequest();
//2:配置后端请求
xmlHttpRequest.open("post", "/stage1_war_exploded/ajax2", true);
//3:发送请求
//3_1:post请求必须设置请求头--一个单词都不能错：固定写法
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//3_2:发送请求和post参数———————其他地方和get相同
xmlHttpRequest.send("user=" + user + "&pwd=" + pwd);
//4:监听数据是否请求成功
xmlHttpRequest.onreadystatechange = function () {
//5:如果服务器成功解析数据则readyState=4,如果后端成功返回数据则state=200
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//6:获取后端数据
let data = xmlHttpRequest.responseText;
//7:将数据插入前端页面
document.getElementById("show").innerHTML = data;
}
}
}
</script>
<body>
<div id="show" style="border: 1px red; width: 200px;height: 100px">
</div>
账号<input type="text" class="user"><br>
密码<input type="text" class="pwd"><br>
<button onclick="ajax2()">提交</button>
</body>
</html>
