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--后端获取GET数据
@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内容,装入对象并转换成json字符串
let user = document.querySelector(".user").value;
let pwd = document.querySelector(".pwd").value;
let data={
user:user,
pwd:pwd
}
let s = JSON.stringify(data);
//1:创建ajax对象
let xmlHttpRequest = new XMLHttpRequest();
//2:配置后端请求
xmlHttpRequest.open("post", "/ajax_json_war_exploded/post", true);
//3:发送请求
//3_1:post请求必须设置请求头--一个单词都不能错:固定写法
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//3_2:发送请求和post参数
xmlHttpRequest.send(s);
//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>
4--后端获取POST数据
package ajax;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
@WebServlet("/post") // 定义Servlet的URL映射路径为 /post
public class post extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置请求编码为UTF-8,确保接收的参数不会出现乱码
req.setCharacterEncoding("utf-8");
// 设置响应内容类型为HTML并编码为UTF-8,确保返回的内容不会出现乱码
resp.setContentType("text/html;charset=utf-8");
// 调用acceptPost方法获取前端发送的JSON数据并转换为JSONObject对象
JSONObject jsonObject = acceptPost(req);
// 从JSONObject中获取 "user" 和 "pwd" 的值
String user = jsonObject.getString("user");
String pwd = jsonObject.getString("pwd");
// 获取PrintWriter对象,用于向客户端发送响应
PrintWriter writer = resp.getWriter();
// 将 "user" 和 "pwd" 的值写入响应中
writer.write(user);
writer.write(pwd);
}
/**
* 接收并解析前端发送的POST请求的JSON数据
*
* @param req HttpServletRequest对象,用于获取请求数据
* @return 解析后的JSONObject对象,包含前端发送的参数
*/
public static JSONObject acceptPost(HttpServletRequest req) {
try {
// 创建BufferedReader对象,从请求输入流中读取数据
BufferedReader bufferedReader = new BufferedReader(
new InputStreamReader(req.getInputStream(), "utf-8"));
String data; // 用于临时存储每一行读取的数据
StringBuilder stringBuilder = new StringBuilder(); // 用于存储整个请求的内容
// 循环读取请求输入流中的数据,直到读完为止
while ((data = bufferedReader.readLine()) != null) {
stringBuilder.append(data);
}
// 将读取到的JSON字符串转换为JSONObject对象
JSONObject jsonObject = JSONObject.parseObject(stringBuilder.toString());
// 返回转换后的JSONObject对象
return jsonObject;
} catch (IOException e) {
// 捕获IO异常并抛出运行时异常
throw new RuntimeException(e);
}
}
}