同系列文章导读：【JavaWEB】文章导读

所有文章均在本博客首发，其他平台同步更新

如有问题，欢迎指正（评论区留言即可）

发表评论时请填写正确邮箱，以便于接收通知【推荐QQ邮箱】

  • AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和 XML
  • 本身不是一种新技术，而是多个技术的综合，用于快速创建动态网页的技术
  • 一般的网页如果需要更新内容，必须重新加载整个页面
  • 而AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新

快速入门

原生JavaScript 实现 AJAX

  • 核心对象：XMLHttpRequest

    用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新

  • 打开链接：open(method,url,async)

    method：请求的类型(GET 或 POST)

    url：请求资源的路径

    async：true（异步）或false（同步）

  • 发送请求：send(String params)

    params：请求的参数（POST专用）

  • 处理响应：onreadystatechange

    readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接受，3-请求处理中，4-请求已完成，且响应已就绪

    status：200-响应已全部OK

  • 获得相应数据形式

    responseText：获得字符串形式的响应数据

    responseXML：获得XML形式的响应数据

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script>
    // 为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function (){
        // 创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        // 打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","/userServlet?username=" + username,true);

        // 发送请求
        xmlHttp.send();

        // 处理响应
        xmlHttp.onreadystatechange = function (){
            // 条件判断，请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                // 将响应的数据显示到span标签里
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>
</html>
package study.ajax;

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;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        // 获取请求参数
        String username = req.getParameter("username");

        // 判断姓名是否已注册
        if("zhangsan".equals(username)){
            resp.getWriter().write("<font color = 'red'>用户名已注册</font>");
        }else{
            resp.getWriter().write("<font color = 'green'>用户名可用</font>");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

jQuery 的 GET 方式实现AJAX

  • 核心语法：$.get(url,[data],[callback],[type]);

    url：请求的资源路径

    data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象

    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码

    type：预期的返回数据类型，取值可以是xml，html，js，json，text等

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    // 为用户名绑定失去焦点事件
    $("#username").blur(function (){
        let username = $("#username").val();
        // jQuery的GET 方式实现 AJAX
        $.get(
            // 请求的资源路径
            "userServlet",
            // 请求的参数
            "username=" + username,
            // 回调函数
            function (data){
                // 将响应的数据显示到span标签上
                $("#uSpan").html(data);
            },
            // 响应数据形式
            "text"
        )
    });
</script>
</html>
对应的Java处理代码和JS原生的处理代码一致

jQuery的 POST 方式实现 AJAX

  • 核心语法：$.post(url,[data],[callback],[type]);

    url：请求的资源路径

    data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象

    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码

    type：预期的返回数据类型，取值可以是xml，html，js，json，text等

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    // 为用户名绑定失去焦点事件
    $("#username").blur(function (){
        let username = $("#username").val();
        // jQuery的POST 方式实现 AJAX
        $.post(
            // 请求的资源路径
            "userServlet",
            // 请求的参数
            "username=" + username,
            // 回调函数
            function (data){
                // 将响应的数据显示到span标签上
                $("#uSpan").html(data);
            },
            // 响应数据形式
            "text"
        )
    });
</script>
</html>
post和get方式只是$.post和$.get方法名不同，其他参数都一致

jQuery 的通用方式实现 AJAX

  • 核心语法：$.ajax({name:value,name:value,...});

    • url：请求的资源路径
    • async：是否异步请求，true-是，false-否（默认）
    • data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
    • type：请求方式，POST 或 GET(默认是GET)
    • dataType：预期的返回数据类型，取值可以是xml，html，js，json，text等
    • success：请求成功时调用的回调函数
    • error：请求失败时调用的回调函数
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    // 为用户名绑定失去焦点事件
    $("#username").blur(function (){
        let username = $("#username").val();
        // jQuery的通用方式实现 AJAX
        $.ajax({
            // 请求资源路径
            url:"userServlet",
            // 是否异步
            async:true,
            // 请求参数
            data:"username="+username,
            // 请求方式
            type:"GET",
            // 返回响应数据形式
            dataType:"text",
            //请求成功后的回调函数
            success:function (data){
                $("#uSpan").html(data);
            },
            // 请求失败的回调函数
            error:function (){
                alert("操作失败");
            }
        })
    });
</script>
</html>

JSON的处理

基础介绍

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
  • 它是基于ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
  • 简洁清晰的层次结构使得JSON成为理想的数据交换语言。易于人的阅读和编写，同时也易于计算及解析和生成，并有效的提升网络传输效率
  • 创建格式
类型语法说明
对象类型{name:value,name:value,...}name是字符串类型，value可以是任意类型
数组/集合类型[{name:value,...},{name:value,...}]name是字符串类型，value可以是任意类型
混合类型{name:[{name:value,...},{name:value,...}]}name是字符串类型，value可以是任意类型
  • 常用方法
成员方法说明
stringify(对象)将指定对象转换为json格式字符串
parse(字符串)将指定json格式字符串解析成对象

转换工具

  • 除了在JavaScript中使用 JSON外，在Java中也可以使用JSON
  • JSON 的转换工具是通过Java 封装好的一些 jar 工具包
  • 可以将Java对象或集合转换为 JSON 格式的字符串，也可以将 JSON 格式的字符串转换成 Java对象
  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson

步骤

  1. 导入jar包
  2. 创建核心对象
  3. 调用方法完成转换

常用类

类名说明
ObjectMapper是Jackson工具包的核心类，它提供一些方法来实现 JSON 字符串和对象之间的转换
TypeReference对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型
  • ObjectMapper常用方法
方法名说明
String writeValueAsString(Object obj)将Java对象转换为JSON字符串
T readValue(String json, Class valueType)将JSON字符串转换为Java对象
T readValue(String json, TypeReference valueTypeRef)将JSON字符串转换为Java对象

转换练习

  1. 对象转 JSON，JSON 转对象
  2. Map<String,String>转JSON，JSON 转Map<String,String>
  3. Map<String,User>转JSON，JSON 转Map<String,User>
  4. List<String\>转 JSON，JSON转 List<String\>
  5. List<User\>转 JSON，JSON转 List<User\>
package study.ajax02;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class ObjectMapperTest {
    private ObjectMapper mapper = new ObjectMapper();

    // 对象转 JSON，JSON 转对象
    @Test
    public void test01() throws Exception {
        // User 转 json
        User user = new User("张三", 23);
        String json = mapper.writeValueAsString(user);
        System.out.println("json 字符串：" + json);

        // json 转 User
        User user2 = mapper.readValue(json, User.class);
        System.out.println("java对象：" + user2);
    }

    // Map<String,String> 转 JSON， JSON 转 Map<String,String>
    @Test
    public void test02() throws Exception {
        // Map<String,String> 转 JSON
        HashMap<String, String> map = new HashMap<>();
        map.put("姓名", "张三");
        map.put("性别", "男");
        String json = mapper.writeValueAsString(map);
        System.out.println("json 字符串：" + json);

        // JSON 转 Map<String,String>
        HashMap<String, String> map2 = mapper.readValue(json, HashMap.class);
        System.out.println("java对象：" + map2);
    }

    // Map<String,User>转JSON，JSON 转Map<String,User>
    @Test
    public void test03() throws Exception {
        // Map<String,User>转JSON
        HashMap<String, User> map = new HashMap<>();
        map.put("一班", new User("张三", 23));
        map.put("二班", new User("李四", 24));
        String json = mapper.writeValueAsString(map);
        System.out.println("json 字符串：" + json);

        // JSON 转Map<String,User>
        HashMap<String, User> map2 = mapper.readValue(json, new TypeReference<HashMap<String, User>>() {
        });
        System.out.println("java对象：" + map2);

    }

    // List<String>转 JSON，JSON转 List<String>
    @Test
    public void test04() throws Exception {
        // List<String>转 JSON
        ArrayList<String> list = new ArrayList<>();
        list.add("张三");
        list.add("李四");
        String json = mapper.writeValueAsString(list);
        System.out.println("json 字符串：" + json);

        // JSON转 List<String>
        ArrayList<String> list2 = mapper.readValue(json, ArrayList.class);
        System.out.println("java对象：" + list2);
    }

    // List<User>转 JSON，JSON转 List<User>
    @Test
    public void test05() throws Exception {
        // List<User>转 JSON
        ArrayList<User> list = new ArrayList<>();
        list.add(new User("张三",23));
        list.add(new User("李四",24));
        String json = mapper.writeValueAsString(list);
        System.out.println("json 字符串：" + json);

        // JSON转 List<User>
        ArrayList<User> list2 = mapper.readValue(json, new TypeReference<ArrayList<User>>() {
        });
        System.out.println("java对象：" + list2);

    }
}

综合案例

搜索联想

数据准备

CREATE TABLE USER(
    id INT PRIMARY KEY AUTO_INCREMENT,
    NAME VARCHAR(20),
    age INT,
    search_count INT    -- 搜索数量
);

INSERT INTO USER VALUES 
(NULL,"张三",23,25),(NULL,"李四",24,5),(NULL,"王五",25,3),
(NULL,"赵六",26,7),(NULL,"张三丰",93,20),(NULL,"张无忌",18,23),
(NULL,"张强",33,21),(NULL,"张果老",65,6);
# config.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://192.168.23.129:3306/db13
username=root
password=密码
# log4j.properties

# Global logging configuration
# 输出信息的显示。四个级别：ERROR、WARN、INFO、DEBUG
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n
<!--MyBatisConfig.xml-->

<?xml version="1.0" encoding="UTF-8" ?>
<!--MyBatis的DTD约束-->
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">

<!--核心根标签-->
<configuration>
  <!-- 引入数据库连接信息配置文件 -->
  <properties resource="config.properties"/>
  <!--集成LOG4J日志信息-->
  <settings>
      <setting name="logImpl" value="log4j"/>
  </settings>
  <!--配置数据库环境，环境可以有多个。default指定使用的是哪个-->
  <environments default="mysql">
      <!--配置数据库环境，可以写很多个，id表示唯一的标识-->
      <environment id="mysql">
          <!--事务管理，type属性代表采用JDBC默认的事务处理-->
          <transactionManager type="JDBC"></transactionManager>
          <!--数据源信息，type属性代表连接池-->
          <dataSource type="POOLED">
              <!--获取数据库连接的配置信息-->
              <property name="driver" value="${driver}"/>
              <property name="url" value="${url}"/>
              <property name="username" value="${username}"/>
              <property name="password" value="${password}"/>
          </dataSource>
      </environment>
  </environments>
  <!--引入映射配置文件-->
  <mappers>
      <!--接口所在的包-->
      <package name="study.ajax.mapper"/>
  </mappers>
</configuration>

页面

  1. 为用户名输入框绑定鼠标点击事件
  2. 获取输入的用户名数据
  3. 判断用户名是否为空
  4. 如果为空，则将联想提示框隐藏
  5. 如果不为空，则发送AJAX请求，并将响应的数据显示到联想框
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>联想搜索</title>
  <style>
      .content {
          width: 643px;
          margin: 100px auto;
          text-align: center;
      }
      input[type="text"]{
          width: 530px;
          height: 40px;
          font-size: 14px;
      }
      input[type='button']{
          width: 100px;
          height: 46px;
          background-color: #38f;
          border: 0;
          color:#fff;
          font-size: 15px;
      }
      .show{
          position: absolute;
          width: 535px;
          height: 100px;
          border: 1px solid #999;
          border-top: 0;
          display: none;
      }
  </style>
</head>
<body>
  <form autocomplete="off">
      <div class="content">
          <img src="img/logo.png">
          <br><br>
          <input type="text" id="username" name="username">
          <input type="button" value="搜索一下">
          <!-- 用于联想的数据 -->
          <div id="show" class="show"></div>
      </div>
  </form>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
  // 1. 为用户名输入框绑定鼠标点击事件
  $("#username").mousedown(function (){
      // 2. 获取输入的用户名数据
      let username = $("#username").val();
      // 3. 判断用户名是否为空
      if(username == null || username == ""){
          // 4. 如果为空，则将联想提示框隐藏
          $("#show").hide();
          return;
      }else{
          // 5. 如果不为空，则发送AJAX请求，并将响应的数据显示到联想框
          $.ajax({
              // 请求资源路径
              url:"UserServlet",
              // 请求参数
              data:"username="+username,
              // 请求方式
              type:"POST",
              // 响应数据形式
              dataType:"json",
              // 请求成功回调函数
              success:function (data){
                  // 将返回数据显示在show的div
                  let names = "";
                  for(let i = 0; i < data.length; i++){
                      names += "<div>"+data[i].name+"</div>";
                  }
                  $("#show").html(names);
                  $("#show").show();
              }
          })
      }
  });
</script>
</html>

服务器

  1. 获取请求参数
  2. 调用业务层的模糊查询方法
  3. 将返回的数据转成JSON，并响应给客户端
package study.ajax.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import study.ajax.bean.User;
import study.ajax.service.UserService;
import study.ajax.service.impl.UserServiceImpl;

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;
import java.util.List;

@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        // 获取请求参数
        String username = req.getParameter("username");

        // 调用业务层模糊查询方法得到数据
        UserService service = new UserServiceImpl();
        List<User> users = service.selectLike(username);
        // 将数据转为json，响应到客户端
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(users);
        System.out.println("json："+json);
        resp.getWriter().write(json);


    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

分页案例

数据准备

-- 创建数据库
CREATE DATABASE db14;
-- 使用数据库
USE db14;
-- 创建数据表
CREATE TABLE news(
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(999)
);
-- 通过存储过程来为表中添加100条数据
DELIMITER $
CREATE PROCEDURE create_data()
BEGIN
DECLARE i INT;
SET i = 1;
WHILE i <= 100 DO
    INSERT INTO news VALUES (NULL,CONCAT('奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实”',i));
    SET i = i + 1;
END WHILE;
END $
DELIMITER ;
-- 调用存储过程，完成数据添加
CALL create_data();
相应配置文件和搜索联想案例类似

瀑布流无限加载数据分页

案例的分析

  • 如何确定当前显示的数据已经浏览完毕？

    公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度

    当前文档高度：存储10条数据，100px

    滚动条距底部的距离：1px

    当前窗口的高度：80px

    滚动条上下滚动的距离：>= 19px

前置知识

功能说明
$(function(){})页面加载事件
$(window)获取当前窗口对象
scroll()鼠标滚动事件
$(window).height()当前窗口高度
$(window).scrollTop()滚动条上下滚动的距离
$(document).height()当前文档的高度

页面

  1. 定义发送请求标记
  2. 定义当前页码和每页显示的条数
  3. 定义滚动条距底部的距离
  4. 设置页面加载事件
  5. 为当前窗口绑定滚动条滚动事件
  6. 获取必要信息（当前窗口的高度，滚动条上下滚动的距离，当前文档的高度）
  7. 计算当前展示数据是否浏览完毕
  8. 判断请求标记是否为true
  9. 将请求标记置为false，当前异步操作完成前，不能重新发起请求
  10. 根据当前页和每页显示的条数来查询分页数据
  11. 当前页码+1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .news_list{
            margin: auto;
        }
        .news_list li{
            list-style: none;
            width: 700px;
            font-weight: 700;
            margin: auto;
        }
        a{
            text-decoration: none;
            color: black;
            font-size: 28px;
        }
    </style>
    <link rel="shortcut icon" href="#" />
</head>
<body>
<ul class="news_list">
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实11”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实22”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实33”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实44”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实55”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实66”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实77”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实88”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实99”
                <hr>
            </a>
        </div>
    </li>
    <li>
        <div class="title-box">
            <a href="#" class="link">
                奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实1010”
                <hr>
            </a>
        </div>
    </li>
</ul>

<div class="loading" style="text-align: center;height: 80px">
    <img src="loading.gif" height="100%">
</div>
<div class="content">
    <div class="pagination-holder clearfix">
        <div id="light-pagination" class="pagination"></div>
    </div>
</div>
<div id="no" style="text-align: center;color: red;font-size: 20px"></div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //1.定义发送请求标记
    let send = true;

    //2.定义当前页码和每页显示的条数
    let start = 1;
    let pageSize = 10;

    //3.定义滚动条距底部的距离
    let bottom = 1;

    //4.设置页面加载事件
    $(function () {
        //5.为当前窗口绑定滚动条滚动事件
        $(window).scroll(function () {
            //6.获取必要信息，用于计算当前展示数据是否浏览完毕
            //当前窗口的高度
            let windowHeight = $(window).height();

            //滚动条从上到下滚动距离
            let scrollTop = $(window).scrollTop();

            //当前文档的高度
            let docHeight = $(document).height();

            //7.计算当前展示数据是否浏览完毕
            //当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
            if((bottom + scrollTop + windowHeight) >= docHeight) {
                //8.判断请求标记是否为true
                if(send == true) {
                    //9.将请求标记置为false，当前异步操作完成前，不能重新发起请求。
                    send = false;
                    //10.根据当前页和每页显示的条数来 请求查询分页数据
                    queryByPage(start,pageSize);
                    //11.当前页码+1
                    start++;
                }
            }
        });
    });

    //定义查询分页数据的函数
    function queryByPage(start,pageSize){
        //加载动图显示
        $(".loading").show();
        //发起AJAX请求
        $.ajax({
            //请求的资源路径
            url:"newsServlet",
            //请求的参数
            data:{"start":start,"pageSize":pageSize},
            //请求的方式
            type:"POST",
            //响应数据形式
            dataType:"json",
            //请求成功后的回调函数
            success:function (data) {
                if(data.length == 0) {
                    $(".loading").hide();
                    $("#no").html("我也是有底线的...");
                    return;
                }
                //加载动图隐藏
                $(".loading").hide();
                //将数据显示
                let titles = "";
                for(let i = 0; i < data.length; i++) {
                    titles += "<li>\n" +
                        "                <div class=\"title-box\">\n" +
                        "                    <a href=\"#\" class=\"link\">\n" +
                        data[i].title +
                        "                        <hr>\n" +
                        "                    </a>\n" +
                        "                </div>\n" +
                        "            </li>";
                }

                //显示到页面
                $(".news_list").append(titles);
                //将请求标记设置为true
                send = true;
            }
        });
    }

</script>
</html>

服务器

  1. 获取请求参数（当前页，每页显示的条数）
  2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页Page对象
  3. 将得到的数据转为json
  4. 将数据响应给客户端
// NewsServlet
package study.ajax.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import study.ajax.service.NewsService;
import study.ajax.service.impl.NewsServiceImpl;

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;
@WebServlet("/newsServlet")
public class NewsServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String start = req.getParameter("start");
        String pageSize = req.getParameter("pageSize");


        //2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
        NewsService service = new NewsServiceImpl();

        Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));

        System.out.println(page);
        //3.将得到的数据转为JSON
        String json = new ObjectMapper().writeValueAsString(page);
        System.out.println("json："+json);
        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //4.将数据响应给客户端
        resp.getWriter().write(json);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}
public interface NewsMapper {
    /*
    * 查询全部
    * */
    @Select("SELECT * FROM news")
    public abstract List<News> selectAll();
}
// NewsServiceImpl
package study.ajax.service.impl;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import study.ajax.mapper.NewsMapper;
import study.ajax.service.NewsService;

import java.io.IOException;
import java.io.InputStream;

public class NewsServiceImpl implements NewsService {

    @Override
    public Page pageQuery(Integer start, Integer pageSize) {
        InputStream is = null;
        SqlSession sqlSession = null;
        Page page = null;
        try{
            // 1. 加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            // 获取SqlSession对象
            SqlSessionFactory sqlSessionFactory= new SqlSessionFactoryBuilder().build(is);
            sqlSession = sqlSessionFactory.openSession(true);
            // 获取NewsMapper接口的实现类对象
            NewsMapper mapper = sqlSession.getMapper(NewsMapper.class);
            System.out.println(11111);
            // 封装Page对象    start：当前页码   pageSize：每页显示的条数
            page = PageHelper.startPage(start,pageSize);
            System.out.println("page"+page);
            // 调用实现类对象的查询全部方法，次数底层执行的就是MySQL的limit分页查询语句
            mapper.selectAll();

        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if (sqlSession != null){
                sqlSession.close();
            }
            if (is != null){
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }

        }
        // 返回page对象
        return page;
    }
}

遇到的问题

  1. mybatis核心配置文件的路径需要是root路径，和src是同级，才能顺利读取到mybatis-config.xml
  2. 在导包时，需要在WEB-INFO下新建lib目录，进行导包，同时需要注意检查Artifacts中包是否正确

按钮分页

页面

  1. 引入分页插件的样式文件和js文件
  2. 定义当前页码和每页显示的条数
  3. 调用查询数据的函数
  4. 定义请求查询分页数据的函数，发起AJAX异步请求
  5. 为分页按钮区域设置页面参数（总页数和当前页）
  6. 为分页按钮绑定单击事件，完成上一页和下一页查询功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .news_list{
            margin: auto;
        }
        .news_list li{
            list-style: none;
            width: 700px;
            font-weight: 700;
            margin: auto;
        }
        a{
            text-decoration: none;
            color: black;
            font-size: 28px;
        }
        .content{
            width: 700px;
            margin: auto;
            margin-top: 20px;
            margin-bottom: 80px;
        }
    </style>
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<ul class="news_list">

</ul>

<div class="content">
    <div class="pagination-holder clearfix">
        <!--显示分页按钮-->
        <div id="light-pagination" class="pagination"></div>
    </div>
</div>

</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>
    // 1. 引入分页插件的样式文件和js文件
    // 2. 定义当前页码和每页显示的条数
    let start = 1;
    let pageSize = 10;

    // 3. 调用查询数据的函数
    queryByPage(start,pageSize);
    // 4. 定义请求查询分页数据的函数，发起AJAX异步请求
    function queryByPage(start,pageSize){
        $.ajax(
            {
                url:"newsServlet2",
                data:{"start":start,"pageSize":pageSize},
                type:"POST",
                dataType:"json",
                success:function (pageInfo){
                    // 将数据显示到页页面上
                    let titles = "";
                    for(let i = 0; i < pageInfo.list.length; i++){
                        titles += "<li>\n" +
                            "                <div class=\"title-box\">\n" +
                            "                    <a href=\"#\" class=\"link\">\n" +
                            pageInfo.list[i].title +
                            "                        <hr>\n" +
                            "                    </a>\n" +
                            "                </div>\n" +
                            "            </li>";
                    }
                    $(".news_list").html(titles);

                    // 5. 为分页按钮区域设置页面参数（总页数和当前页）
                    $("#light-pagination").pagination({
                        // 在该方法中指定总页数和当前页
                        pages:pageInfo.pages,           // 总页数
                        currentPage:pageInfo.pageNum        // 当前页
                    })

                    // 6. 为分页按钮绑定单击事件，完成上一页和下一页查询功能
                    $("#light-pagination .page-link").click(function (){
                        // 获取点击按钮的文本内容
                        let page = $(this).html();
                        // 如果点击的是prev，调用查询方法，查询当前页的上一页数据
                        if(page == "Prev"){
                            queryByPage(pageInfo.pageNum - 1,pageSize);
                        }else if(page == "Next"){
                            // 如果点击的是Next，调用查询方法，查询当前页的上一页数据
                            queryByPage(pageInfo.pageNum + 1,pageSize);
                        }else{
                            // 调用查询方法，查询当前页的数据
                            queryByPage(page,pageSize);
                        }
                    });

                }
            }
        );

    }
</script>
</html>

服务器

  1. 获取请求参数
  2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页Page对象
  3. 封装PageInfo对象
  4. 将得到的数据转为json
  5. 将数据响应给客户端
// NewsServlet2  其他代码和瀑布流式分页相同
package study.ajax.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import study.ajax.bean.News;
import study.ajax.service.NewsService;
import study.ajax.service.impl.NewsServiceImpl;

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;
import java.util.List;

@WebServlet("/newsServlet2")
public class NewsServlet2 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String start = req.getParameter("start");
        String pageSize = req.getParameter("pageSize");

        //2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
        NewsService service = new NewsServiceImpl();

        Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));

        // 3.封装pageInfo对象
        PageInfo<List<News>> info = new PageInfo<>(page);

        //4.将得到的数据转为JSON
        String json = new ObjectMapper().writeValueAsString(info);

        //5.将数据响应给客户端
        resp.getWriter().write(json);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

遇到的问题

  1. 在加入新的js等文件后，需要删除对应项目的out目录，重新启动 Tomcat服务才能被正确加载

推荐阅读：【JavaWEB】Vue+Element

END
本文作者： 文章标题：【JavaWEB】AJAX快速入门
 本文地址：https://www.jiusi.cc/archives/60/
 版权说明：若无注明，本文皆九思のJava之路原创，转载请保留文章出处。
最后修改：2022 年 05 月 07 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏