【Java WEB】AJAX
个人博客：www.hellocode.top
⭐所有文章均在上方博客首发，其他平台同步更新
本文专栏：《Java Web从入门到实战》
如没有Java基础，请先前往《Java零基础指南》专栏学习相应知识
⚡如有问题，欢迎指正，一起学习~~
文章目录
-
-
- 快速入门
- JSON的处理
-
- 基础介绍
- 转换工具
- 转换练习
- 综合案例
-
- 搜索联想
-
- 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("用户名已注册");
}else{
resp.getWriter().write("用户名可用");
}
}
@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 readValue(String json, Class valueType) 将JSON字符串转换为Java对象 T readValue(String json, TypeReference valueTypeRef) 将JSON字符串转换为Java对象
转换练习
- 对象转 JSON，JSON 转对象
- Map
- Map
- List
转 JSON，JSON转 List - List
转 JSON，JSON转 List
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 转 JSON， JSON 转 Map
@Test
public void test02() throws Exception {
// Map 转 JSON
HashMap<String, String> map = new HashMap<>();
map.put("姓名", "张三");
map.put("性别", "男");
String json = mapper.writeValueAsString(map);
System.out.println("json 字符串：" + json);
// JSON 转 Map转JSON，JSON 转Map
@Test
public void test03() throws Exception {
// Map转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转 JSON，JSON转 List
@Test
public void test04() throws Exception {
// List转 JSON
ArrayList<String> list = new ArrayList<>();
list.add("张三");
list.add("李四");
String json = mapper.writeValueAsString(list);
System.out.println("json 字符串：" + json);
// JSON转 List转 JSON，JSON转 List
@Test
public void test05() throws Exception {
// List转 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综合案例
搜索联想
- 数据准备
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%nDOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <properties resource="config.properties"/> <settings> <setting name="logImpl" value="log4j"/> settings> <environments default="mysql"> <environment id="mysql"> <transactionManager type="JDBC">transactionManager> <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> - 页面
- 为用户名输入框绑定鼠标点击事件
- 获取输入的用户名数据
- 判断用户名是否为空
- 如果为空，则将联想提示框隐藏
- 如果不为空，则发送AJAX请求，并将响应的数据显示到联想框
- 服务器
- 获取请求参数
- 调用业务层的模糊查询方法
- 将返回的数据转成JSON，并响应给客户端