[JavaScript知识库] 【Java WEB】AJAX

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Java WEB】AJAX -> 正文阅读

[JavaScript知识库]【Java WEB】AJAX

🌟个人博客：www.hellocode.top🌟
?所有文章均在上方博客首发，其他平台同步更新
🔥本文专栏：《Java Web从入门到实战》
🌞如没有Java基础，请先前往《Java零基础指南》专栏学习相应知识
?如有问题，欢迎指正，一起学习~~

文章目录

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

步骤

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

常用类

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

ObjectMapper常用方法

方法名	说明
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对象

转换练习

对象转 JSON，JSON 转对象
Map<String,String>转JSON，JSON 转Map<String,String>
Map<String,User>转JSON，JSON 转Map<String,User>
List<String>转 JSON，JSON转 List<String>
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请求，并将响应的数据显示到联想框
服务器
1. 获取请求参数
2. 调用业务层的模糊查询方法
3. 将返回的数据转成JSON，并响应给客户端