javascript 后端 servlet mysql JavaWeb 速通Ajax

一、Ajax快速入门

1.基本介绍 :

2.使用原理 :

二、Ajax经典入门案例

1.需求 :

2.前端页面实现 :

3. 处理HTTP请求的servlet实现

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

5.Domain层实现 :

6.DAO层实现 :

7.Service层实现 :

8.运行测试 :

三、JQuery操作Ajax

1 $.ajax({})函数 :

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

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.前端页面实现 :

3. 处理HTTP请求的servlet实现

CheckUserServlet类代码如下 :

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目录下）

# 驱动名称（连接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的使用区别)

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，代码如下 :

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类代码如下 :

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代码如下 :

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 {

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 queryMultiply(String sql, Class clazz, Object... params) {

Connection connection = null;

try {

connection = JDBCUtilsDruid.getConnection();

List query = queryRunner.query(connection,sql,new BeanListHandler(clazz),params);

return query;

} catch (SQLException e) {

throw new RuntimeException(e);

} finally {

JDBCUtilsDruid.close(null, null, connection);

}

public T querySingle(String sql, Class clazz, Object... params) {

Connection connection = null;

try {

connection = JDBCUtilsDruid.getConnection();

return queryRunner.query(connection, sql, new BeanHandler(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类代码如下 :

package dao;

import javabean.User;

/**

* @author : Cyan_RA9

* @version : 21.0

public class UserDAO extends BasicDAO{

}

7.Service层实现 :

UserService类, 代码如下 :

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

参考链接

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

用户注册
Username:
Password:
e-mail:

返回的JSON数据如下：

金钥匙

javascript 后端 servlet mysql JavaWeb 速通Ajax

用户注册

返回的JSON数据如下：

安装旧版 macOS 时提示：应用程序副本已损坏

JQuery+Ajax 跨域访问 C# ASP.NET C#构建Web服务项目实战（二）

发表评论取消回复

金钥匙

javascript 后端 servlet mysql JavaWeb 速通Ajax

用户注册

返回的JSON数据如下：

安装旧版 macOS 时提示：应用程序副本已损坏

JQuery+Ajax 跨域访问 C# ASP.NET C#构建Web服务项目实战（二）

相关文章

发表评论取消回复