原生JS局部刷新

目录

使用XMLHttpRequest对象进行异步请求：

        2.使用fetch API进行异步请求

      3.使用事件监听器进行局部刷新

       4.servlet实现img验证码局部刷新

依赖jar包

Servlet

login.jsp

---

在原生JS中，可以使用以下几种方式实现局部刷新：

1. 使用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;

    @Override
    protected 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());
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

login.jsp

<%--
  Created by IntelliJ IDEA.
  User: God_Like
  Date: 2023/4/2
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    






    


        

            
用户名
            

                
            
        

        

            
密码
            

                
            
        
        

            

                
            

            

                
            
        

        

            

                
            
        


    





注册