JavaWeb 速通Ajax

Cyan_RA92023-09-01 10:47

目录

一、Ajax快速入门

[1.基本介绍 :](#1.基本介绍 :)

[2.使用原理 :](#2.使用原理 :)

二、Ajax经典入门案例

[1.需求 :](#1.需求 :)

[2.前端页面实现 :](#2.前端页面实现 :)

[3. 处理HTTP请求的servlet实现](#3. 处理HTTP请求的servlet实现)

[4.引入jar包及druid配置文件、工具类 :](#4.引入jar包及druid配置文件、工具类 :)

[5.Domain层实现 :](#5.Domain层实现 :)

[6.DAO层实现 :](#6.DAO层实现 :)

[7.Service层实现 :](#7.Service层实现 :)

[8.运行测试 :](#8.运行测试 :)

三、JQuery操作Ajax

[1 .ajax({})函数 :](#1 .ajax({})函数 :)

[2 .get()和.post()函数 :](#2 .get()和.post()函数 :)

[3 .getJSON()函数 :](#3 .getJSON()函数 :)

一、Ajax快速入门

1.基本介绍 :

(1) AJAX，全称"Asynchronous JavaScript And XML"，指**++异步JavaScript++和XML**。Ajax是一种支持浏览器异步发起请求(可以指定发送的数据)，以及页面局部更新的技术。

**(2)**Ajax的常见应用场景如下------

1> 搜索引擎根据用于输入的关键字，自动提示检索关键字。

2> 动态加载数据，按需取得数据。(树形菜单、联动菜单......等，eg : 选择省份后自动加载出对应的市县)

3> 电子商务应用。(购物车，邮件订阅)

4> 改善用户体验。(输入内容前提示，带进度条的文件上传)

5> 访问第三方服务。(访问搜索服务，rss阅读器)

6> 页面局部刷新。(网站展示数据的实时刷新)

2.使用原理 :

传统的web数据通信方式的弊端------

①表单提交数据时，默认提交将该表单的全部数据都提交给服务端，数据量大且无意义。

②在服务端未给出HTTP响应之前，浏览器前端会一直处于等待状态，或者被挂起。

③无法进行页面的局部刷新，用户体验感较差。

使用Ajax的web数据通信方式的原理示意图如下------

Ajax数据通信方式与传统通信方式最大的区别在于，浏览器端并不是直接向服务器端发送HTTP请求，而是要先经过Ajax引擎对象------XMLHttpRequest对象的处理（浏览器内置对象），再发出请求。服务器端仍然是接收数据并做出相应处理，之后再通过HTTP响应将数据返回给浏览器，返回的数据格式可以是XML，JSON，或者是普通文本。浏览器接收到服务端的响应后，Ajax会解析返回的数据，并将解析之后的数据渲染到页面的对应元素中，以实现页面的局部刷新。

通过Ajax发送HTTP请求的优点------

①可以通过XMLHttpRequest对象，发送指定数据，数据量小且速度快。

②****XMLHttpRequest对象是++异步++发送数据，在服务端没有回送HTTP响应之前，浏览器不需要等待，可以继续操作。

③实现了页面的局部刷新，提高了用户的体验。

PS : XMLHttpRequest对象有几个重要的属性，如下表所示 :

属性 描述
onload 定义接收到（加载）请求时要调用的函数。
onreadystatechange 定义当 readyState 属性发生变化时调用的函数。
readyState 保存 XMLHttpRequest 的状态。 * 0：请求未初始化 * 1：服务器连接已建立 * 2：请求已收到 * 3：正在处理请求 * 4：请求已完成且响应已就绪
responseText 以字符串形式返回响应数据。
responseXML 以 XML 数据返回响应数据。
status 返回请求的状态号 * 200: "OK" * 403: "Forbidden" * 404: "Not Found"
statusText 返回状态文本（比如 "OK" 或 "Not Found"）

二、Ajax经典入门案例

1.需求 :

界面效果如下：

①编写一个用户登录页面，要求对用户名进行校验 (对用户名校验的HTTP请求要借助Ajax来发送！)，若用户名已经存在于MySQL数据库中的user_demo用户表中，提示用户名重复、不可用，并以JSON格式的字符串返回该用户的信息；反之，则提示用户名可用。

②要求按照"Domain层 --> DAO层 --> Service层"的三层结构来实现业务逻辑。

③要求编写一个servlet用于处理客户端的HTTP请求，在servlet中利用已经实现的三层结构来完成业务，并向前端页面返回处理后的数据；前端页面收到HTTP响应后，要根据业务需求实现页面的局部刷新。

2.前端页面实现 :

login.html代码如下 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style type="text/css">
        table, td, th {
            background-color: lightcyan;
            border:2px pink solid;
            border-collapse: collapse;
            padding: 5px
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var checkButton = document.getElementById("checkButton");
            checkButton.onclick = function () {
                //1.创建XMLHttpRequest对象 [AJax引擎对象]
                var xhr = new XMLHttpRequest();

                //2.获取用户提交的数据
                var uname = document.getElementById("uname").value;

                //3.利用open方法，规定请求的类型、URL、以及是否异步处理请求。
                    /*
                        (1) 第一个参数---------请求方式。可以是GET/POST等。
                        (2) 第二个参数---------URL。此处采用了拼接的形式。
                        (3) 第三个参数---------true。true表示异步发送。
                     */
                xhr.open("GET", "/Ajax/checkUser?username=" + uname, true)

                /*  !!!
                    在调用send函数之前，给XMLHttpRequest对象绑定一个事件onreadystatechange
                    该事件表示，当readyState属性的数据发生变化时，
                    会触发onreadystatechange事件，并调用指定的函数
                 */
                xhr.onreadystatechange = function () {
                    //若请求已经完成，响应已经就绪，且响应状态码是200
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //获取实际返回的数据
                        var responseText = xhr.responseText;
                        //若返回的字符串非null，说明该用户名重复，不可用
                        if (responseText.trim() != "") {
                            checkButton.value = "用户名不可用";
                            var div01 = document.getElementById("div01");
                            //!!!!!!
                            //由于是div元素，所以要更改的是innerText or innerHTML属性值
                            div01.innerHTML = responseText;
                            div01.removeAttribute("hidden");
                        } else {
                            checkButton.value = "用户名可用";
                        }
                    }
                }

                //4.调用send方法，真正发送请求
                    //如果是POST请求，需要调用xhr.send("content");
                xhr.send();
            }
        }
    </script>
</head>
<body>
<form action="/Ajax/checkUser" method="post">
<table width="625px">
    <tr>
        <th colspan="3"><h2>用户注册</h2></th>
    </tr>
    <tr>
        <td>Username:</td>
        <td><input type="text" name="username" id="uname"/></td>
        <td><input type="button" value="验证用户名" id="checkButton"/></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input type="password" name="password"/></td>
    </tr>
    <tr>
        <td>e-mail:</td>
        <td><input type="text" name="email"/></td>
    </tr>
    <tr>
        <td><input type="submit" value="Submit"/></td>
        <td><input type="reset" value="Reset"/></td>
    </tr>
    <tr>
        <th colspan="3"><h2>返回的JSON数据如下：</h2></th>
    </tr>
    <tr>
        <td colspan="3"><div id="div01"></div></td>
    </tr>
</table>
</form>
</body>
</html>

3. 处理HTTP请求的servlet实现

CheckUserServlet类代码如下 :

java 复制代码 
package servlet;

import com.google.gson.Gson;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import javabean.User;
import service.UserService;

import java.io.IOException;

@WebServlet(urlPatterns={"/checkUser"})
public class CheckUserServlet extends HttpServlet {
    //定义一个UserService属性
    UserService userService = new UserService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //联系手写Tomcat底层机制中，HttpServletRequest中封装的用于存储参数的Map对象。
        String username = req.getParameter("username");
        System.out.println("username = " + username);

        //此处利用了已实现的"Domain---DAO---Service"三层结构
        User user = userService.getUserByName(username);
        if (user != null) {
            Gson gson = new Gson();
            String strUser = gson.toJson(user);

            resp.setContentType("text/html; charset=utf-8");
            resp.getWriter().print(strUser);
        } else {
            resp.getWriter().print("");
        }
    }

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

4.引入jar包及druid配置文件、工具类 :

引入jar包如下图所示 :

druid.properties配置文件如下 : (src目录下）

XML 复制代码 
# 驱动名称（连接MySQL）
driverClassName=com.mysql.cj.jdbc.Driver
# 参数?rewriteBatchedStatements=true表示支持批处理机制
url=jdbc:mysql://localhost:3306/a_ajax?rewriteBatchedStatements=true
# 用户名，注意这里是按"username"来读取的
username=root
# 用户密码（自己改）
password=RA9_Cyan
# 初始化连接数量
initialSize=10
# 最小连接数量
minIdle = 5
# 最大连接数量
maxActive=50
# 超时时间5000ms（在等待队列中的最长等待时间，若超过，放弃此次请求）
maxWait=5000

注意druid.properties配置文件中要修改连接的数据库，以及登录用户的用户名和密码！

负责德鲁伊连接池的工具类JDBCUtilsDruid，代码如下 : (尤其注意导入配置文件时和Java SE的使用区别)

java 复制代码 
package utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.FileInputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

/**
    基于Druid连接池的工具类
 */
public class JDBCUtilsDruid {
    private static DataSource dataSource;

    static {
        Properties properties = new Properties();
        try {
            //properties.load(new FileInputStream("src/druid.properties"));

            //由于JavaWeb和JavaSE的实际工作路径不一样，web的实际工作路径是在out目录下，
            //因此要使用类加载器来获取文件的真实路径！！！
            properties.load(JDBCUtilsDruid.class.getClassLoader().getResourceAsStream("druid.properties"));
            dataSource = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }

    public static void close(ResultSet resultSet, Statement statement, Connection connection) {
        try {
            if (resultSet != null) {
                resultSet.close();
            }
            if (statement != null) {
                statement.close();
            }
            if (connection != null) {
                connection.close();
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

5.Domain层实现 :

现在MySQL中创建一张表user_demo，代码如下 :

sql 复制代码 
CREATE TABLE IF NOT EXISTS `user_demo` (
	`id` MEDIUMINT UNSIGNED PRIMARY KEY,
	`username` VARCHAR(255) NOT NULL DEFAULT '',
	`password` CHAR(64) NOT NULL,
	`email` VARCHAR(255) NOT NULL DEFAULT ''
) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin ENGINE INNODB;

INSERT INTO user_demo
		VALUES
		(1, 'Cyan', MD5(233), 'WangwuEX@outlook.com'),
		(2, 'Rain', MD5(111), 'Rain@rain.com'),
		(3, 'Five', MD5(141), 'Five@five.com'),
		(4, 'Ice', MD5(555), 'Ice@ice.com'),
		(5, 'Kyrie', MD5(666), 'Kyrie@irving.com');

SELECT * FROM `user_demo`;

user_demo表的效果如下 :

创建对应的User类（注意字段的顺序要和表中的保持一致），User类代码如下 :

java 复制代码 
package javabean;

/**
 * @author : Cyan_RA9
 * @version : 21.0
 * @function : user_demo表对应的JavaBean类
 */
public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;

    public User() { //供反射使用
    }

    public User(Integer id, String username, String password, String email) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

6.DAO层实现 :

BasicDAO代码如下 :

java 复制代码 
package dao;

import utils.JDBCUtilsDruid;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

/**
    BasicDAO类，完成所有DAO通用的crud操作。
 */
public class BasicDAO<T> {
    private QueryRunner queryRunner = new QueryRunner();

    public int update(String sql, Object... params) {
        int affectedRows = 0;
        Connection connection = null;

        try {
            connection = JDBCUtilsDruid.getConnection();
            affectedRows = queryRunner.update(connection,sql,params);
            return affectedRows;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            JDBCUtilsDruid.close(null, null, connection);
        }
    }

    public List<T> queryMultiply(String sql, Class<T> clazz, Object... params) {
        Connection connection = null;

        try {
            connection = JDBCUtilsDruid.getConnection();

            List<T> query = queryRunner.query(connection,sql,new BeanListHandler<T>(clazz),params);
            return query;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            JDBCUtilsDruid.close(null, null, connection);
        }
    }

    public T querySingle(String sql, Class<T> clazz, Object... params) {
        Connection connection = null;

        try {
            connection = JDBCUtilsDruid.getConnection();
            return queryRunner.query(connection, sql, new BeanHandler<T>(clazz), params);
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            JDBCUtilsDruid.close(null, null, connection);
        }
    }

    public Object queryScalar(String sql, Object... params) {
        Connection connection = null;

        try {
            connection = JDBCUtilsDruid.getConnection();
            return queryRunner.query(connection, sql, new ScalarHandler<>(), params);
        } catch (Exception e) {
            throw new RuntimeException(e);
        } finally {
            JDBCUtilsDruid.close(null,null,connection);
        }
    }
}

UserDAO类代码如下 :

java 复制代码 
package dao;

import javabean.User;

/**
 * @author : Cyan_RA9
 * @version : 21.0
 */
public class UserDAO extends BasicDAO<User>{
}

7.Service层实现 :

UserService类, 代码如下 :

java 复制代码 
package service;

import dao.UserDAO;
import javabean.User;

public class UserService {
    private UserDAO userDAO = new UserDAO();

    public User getUserByName(String username) {
        String sql = "SELECT * FROM user_demo WHERE username = ?";

        User user = userDAO.querySingle(sql, User.class, username);

        return user;
    }
}

8.运行测试 :

启动Tomcat，进行测试，测试结果如下GIF图所示 :

三、JQuery操作Ajax

1 $.ajax({})函数 :

$.ajax函数的常用参数如下------

(1) url : 请求的地址

(2) type : 请求的方式GET or POST

(3) data : 发送到服务器端的数据，将自动转换为请求字符串格式

(4) success : 成功的回调函数

(5) dataType : 返回的数据类型，常用Json或text。

PS : 注意$.ajax({}) 的使用格式，不可以直接写参数，需要属性名 : 来约束。

2 .get()和.post()函数 :

.get函数 和 .post函数的常用参数如下------

(1) url : 请求的地址

(2) data : 发送到服务器端的数据，将自动转换为请求字符串格式

(3) success : 成功的回调函数

(4) dataType : 返回的数据类型，常用Json或text。

PS1 : .get() 和 .post() 底层还是使用.ajax({})函数来实现异步请求。 PS2 : .get() 和 $.post() 可以直接传入参数，但要注意顺序问题!

3 $.getJSON()函数 :

$.getJSON函数的常用参数如下------

(1) url : 请求的地址

(2) data : 发送到服务器端的数据，将自动转换为请求字符串格式

(3) success : 成功的回调函数

PS : .getJSON() 底层还是使用.ajax()函数来实现异步请求。

System.out.println("END------------------------------------------------");

相关推荐
前端工作日常2 分钟前
H5 实时摄像头 + 麦克风：完整可运行 Demo 与深度拆解
前端·javascript
韩沛晓13 分钟前
uniapp跨域怎么解决
前端·javascript·uni-app
程序员鱼皮16 分钟前
太香了！我连夜给项目加上了这套 Java 监控系统
java·前端·程序员
笃行35028 分钟前
从零开始：SpringBoot + MyBatis + KingbaseES 实现CRUD操作（超详细入门指南）
后端
Rubin9337 分钟前
TS 相关
javascript
该用户已不存在42 分钟前
这几款Rust工具，开发体验直线上升
前端·后端·rust
用户8356290780511 小时前
C# 从 PDF 提取图片教程
后端·c#
L2ncE1 小时前
高并发场景数据与一致性的简单思考
java·后端·架构
武昌库里写JAVA1 小时前
使用 Java 开发 Android 应用：Kotlin 与 Java 的混合编程
java·vue.js·spring boot·sql·学习
小指纹1 小时前
河南萌新联赛2025第（六）场：郑州大学
java·开发语言·数据结构·c++·算法
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04DeepSeek更新！速览DeepSeek V3.1新特性05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Claude Code VSCode集成开发指南：AI编程助手完整配置07Spring 调试终于不再痛苦了082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南