JavaWeb--Ajax - 实践
一，Ajax简介
1.为什么要使用Ajax技术
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。
2，Ajax的应用场景
01，用户名检测
注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用。
02，搜索提示
当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表。
03，数据分页显示
当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据。
04，数据的增删改查
数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互。
二，JSON简介
1，为什么要使用JSON
2，XML简介
比如说我有一个学生数据： name = "zhangsan" ; age = 22; gender = "男" ;
用 XML 表示：
zhangsan
22
男
用 JSON 表示：
{
"name":"zhangsan",
"age":22,
"gender":"男"
}
3，JSON格式的特征
JSON是按照特定的语法规则所生成的字符串结构。
大括号表示JSON的字符串对象。{ }
属性和值用冒号分割。{"属性":"value"}
属性和属性之间用逗号分割。{"属性":"value","属性":"value",...}
中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]
4，JSON的6种数据类型
三，FastJson是什么
1，Fastjson的使用场景
Fastjson已经被广泛使用在各种场景，包括cache存储、RPC通讯、MQ通讯、网络协议通讯、Android客户端、Ajax服务器处理程序等等。
2，Fastjson优点
01，速度快
02，使用广泛
03，测试完备
3，常用的JSON解析类库
四，下载和使用FastJson
1，序列化和反序列化java对象
使用FastJson将Java对象序列化为JSON字符串很简单，只需要调用FastJson提供的静态方法JSON.toJSONString()。
User user = new User();
user.setId(1);
user.setName("张三");
user.setAge(18);
String jsonStr = JSON.toJSONString(user);
System.out.println(jsonStr);使用FastJson将JSON字符串反序列化为Java对象也很简单，只需要 调用FastJson提供的静态方法JSON.parseObject()。
String jsonStr = "{\"id\":1,\"name\":\"张三\",\"age\":18}";
User user = JSON.parseObject(jsonStr,
User.class);
System.out.println(user);2，解析JSON字符串
FastJson提供了一个JSON类，可以方便地解析JSON字符串。
String jsonStr = "{\"id\":1,\"name\":\"张三\",\"age\":18}";
JSONObject jsonObject = JSON.parseObject(jsonStr);
int id = jsonObject.getIntValue("id");
String name = jsonObject.getString("name");
int age = jsonObject.getIntValue("age");
System.out.println(id + ", " + name + ", " + age);3，使用注解控制序列化和反序列化
FastJson提供了一些注解，可以用于控制序列化和反序列化。@JSONField注解指定了JSON字段的名称、是否序列化、日期格式等属性。
public class User {
@JSONField(name = "userId")
private int id;
@JSONField(serialize = false)
private String name;
@JSONField(format = "yyyy-MM-dd HH:mm:ss")
private Date birthday;
// getter和setter方法
}五，Ajax初体验
1，XMLHttpRequest对象
2，Ajax的使用步骤
01，创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();02，给定请求方式以及请求地址
后端服务 ip地址+端口号+资源路径
xhr.open("get","http://v1.yiketianqi.com/api?
unescape=1&version=v91&appid=43656176&appsecret
=I42og6Lm&ext=&cityid=&city=");03，发送请求
xhr.send();04，获取服务器端给客户端的响应数据
xhr.onreadystatechange = function(){
//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束，并且服务端已经结束发送数据到客户端
if (this.readyState == 4 && this.status ==
200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
}六，Ajax实战案例
1，需求说明
需求
创建User类，包含id、name、age属性。
在用户管理页面中通过Ajax技术完成对用户数据载入、添加用户、更新用户、删除用户操作。
项目结构
2，搭建环境
数据库创建用户表
# 创建用户表
CREATE TABLE `user` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`age` int DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT
CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
DELETE FROM `user`;
# 添加用户
INSERT INTO `user` (id, name, age) VALUES
(1, 'Jone', 18),
(2, 'Jack', 20),
(3, 'Tom', 28),
(4, 'Sandy', 21),
(5, 'Billie', 24);编写实体类
编写实体类 User.java
/**
* 用户表模型
*/
public class User {
// 序号
private Integer id;
// 名字
private String name;
// 年龄
private Integer age;
// 邮箱
public User(Integer id, String name,
Integer age, String email) {
this.id = id;
this.name = name;
this.age = age;
}
public User() {
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' + ", age=" + age +'}';
}
}统一结果返回集
public class ResultAjax {
// 返回致态码
private Integer code ;
// 返回消息体
private String message;
// 返回数据
private Object data;
public ResultAjax() {
}
public ResultAjax(Integer code, String
message, Object data) {
this.code = code;
this.message = message;
this.data = data;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public static ResultAjax success(String
message){
return new
ResultAjax(200,message,null);
}
public static ResultAjax success(Object
object){
return new
ResultAjax(200,"success",object);
}
public static ResultAjax error(String
message){
return new
ResultAjax(500,message,null);
}
}3，编写数据库连接工具
创建数据库连接信息文件
在src目录下创建 druid.properties ,基于Druid连接池获取数据库连接工具类。
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?
useSSL=false
username=root
password=123456
initialSize=10
maxActive=20工具类
/**
* 基于Druid连接池获取数据库连接工具类
*/
public class JdbcDruidUtil {
//数据库连接池对象
private static DataSource dataSource;
static{
try {
//获取读取配置文件的字节输入流对象
InputStream is =
JdbcDruidUtil.class.getClassLoader().getResourc
eAsStream("druid.properties");
//创建Properties对象
Properties pop = new Properties();
//加载配置文件
pop.load(is);
//创建连接池对象
dataSource =
DruidDataSourceFactory.createDataSource(pop);
}catch(Exception e){
e.printStackTrace();
}
}
//获取数据库连接对象
public static Connection getConnection(){
Connection connection = null;
try {
connection =
dataSource.getConnection();
}
catch (SQLException throwables) {
throwables.printStackTrace();
}
return connection;
}
//关闭连接对象
public static void
closeConnection(Connection connection){
try {
connection.close();
}
catch (SQLException throwables) {
throwables.printStackTrace();
}
}
//关闭Statement对象
public static void closeStatement(Statement
statement){
try {
statement.close();
}
catch (SQLException throwables) {
throwables.printStackTrace();
}
}
//关闭ResultSet
public static void closeResultSet(ResultSet
resultSet) {
try {
resultSet.close();
}
catch (SQLException throwables) {
throwables.printStackTrace();
}
}
//DML操作时关闭资源
public static void closeResource(Statement
statement,Connection connection){
//先关闭Statement对象
closeStatement(statement);
//在关闭Connection对象
closeConnection(connection);
}
//查询时关闭资源
public static void closeResource(ResultSet
resultSet,Statement statement,Connection
connection){
if (resultSet != null){
//先关闭ResultSet
closeResultSet(resultSet);
}
if (statement != null){
//在闭Statement对象
closeStatement(statement);
}
if (connection != null){
//最后关闭Connection对象
closeConnection(connection);
}
}
}4，后端实现查询用户数据
用户持久层新增查询接口
新建用户持久层文件UsersDao接口。
/**
* 查询所有数据
* @return
*/
List findByAll(); 用户持久层实现查询接口
新建用户持久层接口实现类UsersDaoImpl接口。
/**
* 操作用户表持久层
*/
public class UsersDaoImpl implements UsersDao {
/**
* 查询所有用户
* @return
*/
@Override
public List findByAll() {
Connection conn =null;
Statement s = null;
ResultSet rs = null;
List userList = new ArrayList<>
();
try{
conn = JdbcDruidUtil.getConnection();
String sql = "select * from user";
s = conn.createStatement();
rs = s.executeQuery(sql);
while(rs.next()){
//手动orm映射
User u = new User();
u.setId(rs.getInt("id"));
u.setName(rs.getString("name"));
u.setAge(rs.getInt("age"));
userList.add(u);
}
}catch(Exception e){
e.printStackTrace();
}finally{
JdbcDruidUtil.closeResource(s,conn);
}
return userList;
}
} 5，编写用户管理前段页面
<%@ page isELIgnored="false"
contentType="text/html;charset=UTF-8"
language="java" %>
用户管理
用户管理系统
ID：
姓名：
年龄：
ID
姓名
年龄
操作
6，编写用户查询Servlet
用户业务层新增查询接口
创建用户业务层接口类UsersService。
public interface UsersService {
/**
* 查询所有数据
* @return
*/
List findByAll();
} 用户业务层实现查询接口实现类
创建用户业务层接口实现类UsersServiceImpl。
/**
* 用户业务层
*
*/
public class UsersServiceImpl implements
UsersService {
/**
* 查询全部用户
* @return
*/
@Override
public List findByAll() {
UsersDao usersDao = new UsersDaoImpl();
return usersDao.findByAll();
}
} 用户查询控制层编写
创建UserListServlet控制器类
@WebServlet("/user.do")
public class UserListServlet extends
HttpServlet {
@Override
protected void doGet(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {
String flag = req.getParameter("flag");
switch (flag){
case "getData":
this.getData(req,resp);
break;
}
}
// 获取页面初始化数据
private void getData(HttpServletRequest
req, HttpServletResponse resp) throws
IOException {
UsersService usersService = new
UsersServiceImpl();
List userList =
usersService.findByAll();
ResultAjax success =
ResultAjax.success(userList);
writerTopage(resp,success);
}
/**
* 输出至页面方法
* @param resp
* @param data
* @throws IOException
*/
private void
writerTopage(HttpServletResponse resp,Object
data) throws IOException {
String s = JSON.toJSONString(data);
resp.setContentType("application/json");
resp.setCharacterEncoding("UTF-8");
PrintWriter pw = resp.getWriter();
pw.print(s);
pw.flush();
pw.close();
}
} 7，前段实现显示用户数据
Jquery的Ajax使用
实战用户查询功能
引入jquery-3.6.0.js
浙公网安备 33010602011771号