目录
使用XMLHttpRequest对象进行异步请求：
2.使用fetch API进行异步请求
3.使用事件监听器进行局部刷新
4.servlet实现img验证码局部刷新
依赖jar包
Servlet
login.jsp
在原生JS中，可以使用以下几种方式实现局部刷新：
-
使用XMLHttpRequest对象进行异步请求：
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('GET', 'example.php', true);
// 发送请求
xhr.send();
// 监听响应状态变化
xhr.onreadystatechange = function() {// 响应完成且响应状态为200时，更新页面if (xhr.readyState === 4 && xhr.status === 200) {var response = xhr.responseText;// 更新DOM节点内容document.getElementById('result').innerHTML = response;}
};
2.使用fetch API进行异步请求
// 发送GET请求
fetch('example.php').then(function(response) {// 将响应解析为文本格式return response.text();}).then(function(data) {// 更新DOM节点内容document.getElementById('result').innerHTML = data;});
3.使用事件监听器进行局部刷新
// 获取要刷新的DOM节点
var node = document.getElementById('result');
// 添加点击事件监听器
node.addEventListener('click', function() {// 发送请求获取更新内容fetch('example.php').then(function(response) {// 将响应解析为文本格式return response.text();}).then(function(data) {// 更新DOM节点内容node.innerHTML = data;});
});
需要注意的是，使用以上方式进行局部刷新时，需要确保返回的数据格式与页面中要更新的DOM节点类型匹配。另外，使用异步请求时需要注意跨域问题。
4.servlet实现img验证码局部刷新
依赖jar包
Servlet
package com.xzm.view;
import cn.dsna.util.images.ValidateCode;
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.IOException;
/*** @Description 生成图片验证码* @Author XueZhimin* @CreateTime 2023-04-03 16:12*/@WebServlet("/codeServlet")
public class CodeServlet extends HttpServlet {private static ValidateCode validateCode = null;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {validateCode=new ValidateCode(100, 30, 4, 20);String code = validateCode.getCode();System.out.println(code);request.getSession().setAttribute("code",code);validateCode.write(response.getOutputStream());}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
}
login.jsp
<%--Created by IntelliJ IDEA.User: God_LikeDate: 2023/4/2Time: 16:21To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>登录</title>
</head>
<body><form action="loginServlet" method="post"><table border="1" width="80%" style="margin: auto"><tr><th>用户名</th><td><input type="text" name="name" placeholder="请输入用户名"></td></tr><tr><th>密码</th><td><input type="password" name="password" placeholder="请输入密码"></td></tr><tr><th><img id="code" src="codeServlet" onclick="reFreshCode()"></th><td><input type="code" name="code" placeholder="请输入验证码"></td></tr><tr><td colspan="2"><input style="width: 100%" type="submit" value="登录"></td></tr></table></form><a href="registerServlet">注册</a>
</body>
</html><script type="application/javascript">//实现验证码局部刷新function reFreshCode() {// 发送GET请求fetch('codeServlet').then(function(response) {// 将响应解析为文本格式return response.url;}).then(function(data) {// 更新DOM节点内容document.getElementById('code').src = data;//DOM操作img标签，更改src});}</script>
