AJAX Li.070

AJAX 介绍

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。
获得响应数据形式
- response Text ：获得字符串形式的响应数据。
- responseXML：获得XML形式的响应

jQuery的Get方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);
- url：请求的资源路径
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
- callback ：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
- type : 预期的返回数据的类型, 取值可以是xml, html, js, ison, text等

@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");

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

        // 2. 判断姓名是否注册
        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);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
// 1. 为姓名绑定推动焦点事件
    $("#username").blur(function(){
        let username = $("#username").val();
        // 2. jQuery的get方式实现AJAX
        $.get(
        "userServlet",
        "username="+username,
        // 3. 回调函数
        function(data){
            // 将响应的数据显示到span标签
            $("#uSpan").html(data)
        },
        "text"
        );
    })
</script>
</html>

jQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type])
- url：请求的资源路径
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
- callback ：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
- type : 预期的返回数据的类型, 取值可以是xml, html, js, ison, text等

<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 1. 为姓名绑定推动焦点事件
    $("#username").blur(function(){
        let username = $("#username").val();
        // 2. jQuery的POST方式实现AJAX
        $.post(
        "userServlet",
        "username="+username,
        // 3. 回调函数
        function(data){
            // 将响应的数据显示到span标签
            $("#uSpan").html(data)
        },
        "text"
        );
    })
</script>

jQuery的通用方式实现AJAX

核心语法: $.ajax({name:value,name:value,…});
- url ：请求的资源路径.
- async ：是否异步请求，true-是，false-否（默认是true)。
- data：发送到服务器的数据，可以是键值对形式，也可以是js对象形式。
- type：请求方式，POST或GET （默认是GET)。
- dataType：预期的返回数据的券型，取值可以是xml,html,js, json, text等。
- success ：请求成功时调用的回调函数。
- error ：请求失败时调用的回调函数。

<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 1. 为姓名绑定推动焦点事件
    $("#username").blur(function(){
        let username = $("#username").val();

        $.ajax({
            url: "userServlet",
            async: true,
            data: "username=" + username,
            type: "GET",
            success: function (data) {
                $("#uSpan").html(data)
            },
            dataType: "text",
            error: function () {
                $("#uSpan").html("<font color='red'>出错了, 请稍后重试</font>")
            }
        });
    })
</script>

JSON 格式

类型	语法	说明
对象类型	{name:value,name:value,…}	name是字符串类型, value可以是任意类型
数组/集合类型	[{name:value,…},{name:value,…}]	name是字符串类型, value可以是任意类型
混合类型	{name: [{name:value,…},{name:value,…}] }	name是字符串类型, value可以是任意类型

常用方法

成员方法        说明
stringify(对象) 将指定对象转换为json格式字符串
parse(字符串)   将指定json格式字符串解析成对象

JSON Java 转换工具 jackson

类名          说明
ObjectMapper  Jackson工具包的核心类,它提供一些方法来实现JSON字符串和对象之间的转换
TypeReference 对集合泛型的反序列化,使用TypeReference可以明确的指定反序列化的对象类型

ObjectMappper 常用方法

方法名                                                 说明
String.writeValueAsString(Object.obj)                  将Java对象转换成JSON字符串
<T>T.readValue(String.json,Class<T>.valueType)         将JSON字符串转换成Java对象
<T>T.readValue(String.json,TypeReference.valueTypeRef) 将JSON字符串转换成Java对象

public class User {
    private String name;
    private Integer age;

    public User(){}
    public User(String name, Integer age) {
        this.name = name;
        this.age = age;
    }
}

package com.example.ajax2;

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

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class ObjectMapperTest {

    private ObjectMapper mapper = new ObjectMapper();
    // 1. User对象转换json, json转User对象
    @Test
    public void test01() throws JsonProcessingException {
        User user1 = new User("张三", 23);
        String json = mapper.writeValueAsString(user1);
        System.out.println("json字符串"+json);

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

    // 2.map<String,String>转json json转map<String,String>

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

        HashMap map2 = mapper.readValue(json, HashMap.class);
        System.out.println("Map对象"+map2);

    }

    // 3. map<String,User>转json json转map<String,User>
    @Test
    public void test03() throws Exception{
        Map<String, User> map1 = new HashMap<>();
        map1.put("1", new User("张三",23));
        map1.put("2", new User("李四",24));

        String json = mapper.writeValueAsString(map1);
        System.out.println("json字符串"+json);

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

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

//        ArrayList<String> list2 = mapper.readVal ue(json, new TypeReference<ArrayList<String>>() { });
        ArrayList<String> list2 = mapper.readValue(json, ArrayList.class);
        System.out.println("List<string>集合"+list2);
     }

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

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

搜索联想

package com.lizicai.bean;

public class Student {
    private Integer id;
    private String name;
    private Integer age;

    private Integer score;

    public Student(){}

    public Student(Integer id, String name, Integer age, Integer score) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.score = score;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
</head>
<body>
<form autocomplete="off" >
    姓名: <input type="text" id="username" list="userlist" placeholder="输入名称搜索">
    <datalist id="userlist">
    </datalist>
</form>

</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    // 1. 为用户名输入框绑定鼠标点击事件
    $("#username").mousedown(function(){
        // 2. 获取用户名是否为空
        let username = $("#username").val();

        if( username == null || username == ""){
            return;
        }else{
            $.ajax({
                url: "userServlet",
                async: true,
                data: {"username":username},
                type: "POST",
                success: function (data) {
                    let names = "";
                    console.log(data)
                    for(let i=0;i<data.length;i++){
                        names +="<option>"+data[i].name+"</option>";
                        console.log(data[i])
                    }
                    $("#userlist").html(names)
                },
                dataType: "json"
            });
        }

    })
</script>
</html>

package com.lizicai.sql;

import org.apache.ibatis.jdbc.SQL;

public class ReturnSql {
    public String getSelectLikeName(){
        return new SQL(){
            {
                SELECT("*");
                FROM("student");
                WHERE("name like CONCAT('%',#{name},'%')");
                ORDER_BY("score DESC");
                LIMIT("0,4");
            }
        }.toString();
    }
}

package com.lizicai.mapper;

import com.lizicai.bean.Student;
import com.lizicai.sql.ReturnSql;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface StudentMapper {
    @SelectProvider(type = ReturnSql.class, method = "getSelectAll")
    public abstract List<Student> selectAll();

    @SelectProvider(type = ReturnSql.class, method = "getSelectLikeName")
    public abstract List<Student> selectLikeName(String name);
}

package com.lizicai.service;

import com.lizicai.bean.Student;
import com.lizicai.mapper.StudentMapper;
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 org.junit.Test;

import java.io.IOException;
import java.io.InputStream;
import java.util.List;

public class Test001 {
    @Test
    public  List<Student> selectLikeName(String name) throws IOException {
        InputStream is = Resources.getResourceAsStream("MyBatisConfig.xml");
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
        SqlSession sqlSession = sqlSessionFactory.openSession(true);

        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);

        List<Student> students = mapper.selectLikeName(name);

        for (Student stu : students) {
            System.out.println(stu);
        }

        sqlSession.close();

        is.close();
        return students;
    }
}

package com.lizicai.controller;


import com.fasterxml.jackson.databind.ObjectMapper;
import com.lizicai.bean.Student;
import com.lizicai.service.Test001;

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

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        req.setCharacterEncoding("UTF-8");
        String username = req.getParameter("username");
        ObjectMapper mapper = new ObjectMapper();
        Test001 t = new Test001();
        List<Student> list =  t.selectLikeName(username);
        String json = mapper.writeValueAsString(list);

        resp.setContentType("application/json; charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.write(json);
        pw.close();
    }
}

瀑布流分页

create database db11;
use db11;
CREATE TABLE news(
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(999)
);

DELIMITER $$
CREATE PROCEDURE create_date()
BEGIN
    DECLARE i INT;
    SET i=1;
    WHILE i<=100 do
        INSERT INTO news VALUES (NULL,CONCAT('今天吃瓜啦,瓜',i));
        SET i=i+1;
        end WHILE;
end $$

CALL create_date();

如何确定当前显示的数据已经浏览完毕
- 公式: 滚动条距询问的距离+滚去条上下滚动的距离+当前窗口的高度>=100
- 当前文档高度: 存储10条数据,100px
- 滚去条距询问的距离: 1px
- 当前窗口的高度: 80px
- 滚去条上下滚去的距离: >=19px
前置知识

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

package com.lizicai.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.lizicai.bean.News;
import com.lizicai.service.NewsService;
import com.lizicai.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.io.PrintWriter;
import java.util.List;

@WebServlet("/newsList")
public class NewsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String pageNum = req.getParameter("pageNum");
        String pageSize = req.getParameter("pageSize");

        System.out.println(pageNum+" "+pageSize+"----");

        Integer intPageNum = Integer.parseInt(pageNum) ;
        Integer intPageSize = Integer.parseInt(pageSize) ;

        ObjectMapper mapper = new ObjectMapper();
        NewsService newsService = new NewsServiceImpl();
        Page<News> page = newsService.pageQuery(intPageNum,intPageSize);

        String json = mapper.writeValueAsString(page);

        resp.setContentType("application/json; charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.write(json);
        pw.close();
    }
}

package com.lizicai.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.lizicai.bean.News;
import com.lizicai.service.NewsService;
import com.lizicai.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.io.PrintWriter;
import java.util.List;

@WebServlet("/newsList2")
public class NewsServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String pageNum = req.getParameter("pageNum");
        String pageSize = req.getParameter("pageSize");

        System.out.println(pageNum+" "+pageSize+"----");

        Integer intPageNum = Integer.parseInt(pageNum) ;
        Integer intPageSize = Integer.parseInt(pageSize) ;

        ObjectMapper mapper = new ObjectMapper();
        NewsService newsService = new NewsServiceImpl();
        Page page = newsService.pageQuery(intPageNum,intPageSize);

        PageInfo<List<News>> pageInfo = new PageInfo<>(page);

        String json = mapper.writeValueAsString(pageInfo);

        resp.setContentType("application/json; charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.write(json);
        pw.close();
    }
}

<script>
    //1.定义发送请求标记
    let send = true;

    //2.定义当前页码和每页显示的条数
    let pageNum = 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){
                    // 如果当前页大于10，则将加载动图隐藏并结束方法

                    //9.将请求标记置为false，当前异步操作完成前，不能重新发起请求
                    send = false;
                    //10.根据当前页和每页显示的条数来 请求查询分页数据
                    queryByPage(pageNum, pageSize);
                    //11.当前页码+1
                    pageNum++;
                }
            }
        });
    })

    //请求查询分页数据的函数
    function queryByPage(pageNum, pageSize){
        //将加载动图显示
        $(".loading").show();

        //发起AJAX异步请求
        $.ajax({
            url:"newsList",
            data:{"pageNum":pageNum,"pageSize":pageSize},
            type:"POST",
            dataType:"json",
            success:function (data){
                if(data.length == 0){
                    // 加载动图隐藏
                    $(".loading").hide();
                    $("#no").html("我也是有底线的")
                    return;
                }

                // 将数据进行显示
                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>

<script>
    // 1. 定义当前页码和每页显示的条数
    let pageNum = 1;
    let pageSize = 10;

    // 2. 调用查询数据的方法
    queryByPage(pageNum, pageSize)

    // 3. 定义请求查询分布数据的函数, 发起AJAX异步请求, 将数据显示到页面
    function queryByPage(pageNum, pageSize){
         $.ajax({
            url:"newsList2",
            data:{"pageNum":pageNum,"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);

                 // 4. 为分布按钮区域设置页数参数(总页数和当前页)
                 $("#light-pagination").pagination({
                     pages:pageInfo.pages,
                     currentPage: pageInfo.pageNum
                 });

                 // 5. 为分布按钮绑定单击事件, 完成上一页下一页
                $(".page-link").click(function(){
                    // 获取点击按钮的文本内容
                     let page = $(this).html()
                    console.log(page)
                    // 如果点击的是Prev, 调用查询方法, 查询当前页的上一页数据
                    if( page == "Prev"){
                        queryByPage(pageInfo.pageNum-1, pageSize)
                    } else if(page == "Next"){
                       queryByPage(pageInfo.pageNum+1, pageSize)
                    } else{
                       queryByPage(page, pageSize)
                    }
                })
            }
         })
    }
</script>

AJAX 介绍#

原生JavaScript 实现AJAX#

jQuery的Get方式实现AJAX#

jQuery的POST方式实现AJAX#

jQuery的通用方式实现AJAX#

JSON 格式#

搜索联想#

瀑布流分页#

AJAX 介绍

原生JavaScript 实现AJAX

jQuery的Get方式实现AJAX

jQuery的POST方式实现AJAX

jQuery的通用方式实现AJAX

JSON 格式

搜索联想

瀑布流分页