【JavaWeb学习笔记】16 - JSon和Ajax
项目代码
https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/json
https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/ajax
目录
〇、官方文档
一、JSon
1.JSon介绍
2.JSon快速入门
3.JSON对象和字符串对象转换
1.应用案例
2.注意事项和细节
4.JSon在Java中的使用
1.说明
2.JSON在Java中应用场景
二、Ajax
1.Ajax基本介绍
1.Ajax是什么
2.Ajax经典应用场景
2.Ajax原理示意图
1.传统的WEB引用
2.使用Ajax的通讯方式
3.JavaScript原生Ajax请求
1.案例 验证用户名是否存在 使用Ajax 对页面进行局部刷新
2.本节作业
3.原生Ajax请求问题分析
4.jQuery的Ajax请求
1.$.ajax方法
2.$.get请求和$.post请求常用参数
3.$.getJSON常用参数
4.应用实例
5.本章作业
〇、官方文档
JSON 简介
AJAX 简介
一、JSon
1.JSon介绍
1. JSON指的是JavaScript对象表示法(JavaScript Object Notation )
2. JSON是轻量级的文本数据交换格式 (前后端数据交换)
3. JSON独立于语言[即java、php、asp.net等都可以使用JSON]
4. JSON具有自我描述性，更易理解
2.JSon快速入门
1.JSON的定义格式
1)映射(元素/属性)用冒号:表示，"名称":值，注意名称是字符串，因此要用双引号引起来
2)并列的数据之间用逗号，分隔。"名称1":值,"名称2":值
3)映射的集合(对象)用大括号{}表示。{"名称1":值,"名称2":值}
4)并列数据的集合(数组)用方括号[]表示。[{"名称1":值,"名称2":值}, {"名称1":值,"名称2":值}]
5)元素值类型: string, number, object, array, true, false, null
JSON对象和字符串对象转换
JSON对象和字符串对象转换
3.JSON对象和字符串对象转换
1.应用案例
1. JSON.stringify(json)功能:将一个json对象转换成为json字符串[简单说名字来源.] Serialize
2. JSON.parse(jsonString )功能:将一个json字符串转换成为json对象
2.注意事项和细节
1、JSON .springiiy(json对象)会返回对应string,并不会影响原来json对象
2、JSON.parse(string)函数会返回对应的json对象,并不会影响原来string
3、在定义Json对象时，可以使用 ' ' 表示字符串，前面的key也可以不用" " 或者 ' '
比如var json_person = {"name": "jack", "age": 100};
也可以写成var json_person = {'name': 'jack', 'age': 100};
4、但是在把原生字符串转成json对象时,必须使用"",否则会报错比如:
var str_dog = "{'name':'小黄狗', 'age': 4}";转json就会报错
5、JSON.springify(json对象)返回的字符串,都是" "表示的字符串,所以在语法格式正确的情况下，是可以重新转成json对象的. [演示案例]
json和字符串转换的注意事项和细节
4.JSon在Java中的使用
1.说明
1. java中使用json,需要引入到第3方的包gson.jar
2. Gson是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库。
3.可以对JSON字符串和Java对象相互转换
2.JSON在Java中应用场景
1. Javabean对象和json字符串的转换
2. List对象和json字符串的转换
3. map对象和json字符串的转换
public class JavaJSon {
public static void main(String[] args) {
//创建一个gson对象，做为一个工具对象使用
Gson gson = new Gson();
//演示javabean 和 json字符串的转换
Book book = new Book(100, "韩顺平零基础学Java");
//1. 演示把javebean -> json字符串
String strBook = gson.toJson(book);
System.out.println("strBook=" + strBook);
//2. json字符串->javabean
//(1) strBook 就是 json字符串
//(2) Book.class 指定将 json字符串转成 Book对象
//(3) 底层是反射机制
Book book2 = gson.fromJson(strBook, Book.class);
System.out.println("book2=" + book2);
//3. 演示把list对象 -> json字符串
List bookList = new ArrayList<>();
bookList.add(new Book(200, "天龙八部"));
bookList.add(new Book(300, "三国演义"));
//因为把对象,集合转成字符串, 相对比较简单
//底层只需要遍历, 按照json格式拼接返回即可
String strBookList = gson.toJson(bookList);
System.out.println("strBookList= " + strBookList);
//4. 演示把json字符串 -> list对象
//(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类
//(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型
/*
com.google.gson.reflect
public class TypeToken {
final Class rawType;
final Type type;
final int hashCode;
protected TypeToken() {
this.type = getSuperclassTypeParameter(this.getClass());
this.rawType = Types.getRawType(this.type);
this.hashCode = this.type.hashCode();
}
*/
//(1) 返回类型的完整路径java.util.List
//(2) gson的设计者，需要得到类型的完整路径，然后进行底层反射
//(3) 所以gson 设计者就提供TypeToken, 来搞定.
//二说 TypeToken , 为甚要加 {}
//(1) 如果我们 new TypeToken>() 提示
// 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
//(2) 因为TypeToken 的无参构造器是protected ， 而 new TypeToken>() 就是调用其无参构造器
//(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包， 是不能直接访问的, 因此报错
//(4) 为什么 new TypeToken>(){} 使用就可以，这里就涉及到匿名内部类的知识.
//(5) 当 new TypeToken>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类)
//(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();
//三说 TypeToken->举一个例子.[对java基础回顾.]
Type type = new TypeToken>() {}.getType();
List bookList2 = gson.fromJson(strBookList, type);
System.out.println("bookList2= " + bookList2);
//5, 把map对象->json字符串
Map bookMap = new HashMap<>();
bookMap.put("k1", new Book(400, "射雕英雄传"));
bookMap.put("k2", new Book(500, "西游记"));
String strBookMap = gson.toJson(bookMap);
System.out.println("strBookMap=" + strBookMap);
//6. 把json字符串 -> map对象
// new TypeToken>() {}.getType()=> java.util.Map
Map bookMap2 = gson.fromJson(strBookMap,
new TypeToken>() {
}.getType());
System.out.println("bookMap2=" + bookMap2);
}
}
注意 在该TypeToken类型 创建需要使用匿名内部类，然后获取对应的type返回type，为什么是匿名内部类？ 举例子，走的是受保护的匿名内部类的子类的默认的super
public class A {
protected A() {
System.out.println("A的protected A()被调用...");
}
A(String str){
System.out.println("A的默认A被调用 只在本类可用");
}
}
package com.yinhai.t2;
import com.yinhai.t1.A;
public class Test {
public static void main(String[] args) {
//'A()' has protected access in 'com.yinhai.t1.A'
//1. 因为A类和Test类不在同一个包
//2. 就不能访问A类的protected 方法, 包括构造器
//3. A(){} 就是一个匿名内部类， 可以理解成是A类子类
//4. A(){} 匿名内部类, 有一个隐式的无参构造器, 根据java基础 无参构造器 有默认super()
//5. 当你执行 new A(){} 会调用到A类的无参的protected 构造器
//6. 如果还不明白, 就回去看java基础 泛型+匿名内部类 =>API
A a = new A(){};
//A a1 = new A(""){}; //如果有默认的构造器 则不能用匿名内部类访问，因为子类也无法访问到默认权限的构造器
System.out.println(a.getClass());//Test$1
}
} 二、Ajax
官方文档
AJAX 简介
1.Ajax基本介绍
1.Ajax是什么
1. AJAX即"Asynchronous Javascript And XML"(异步JavaiScript和XML)
2.Ajax是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术
2.Ajax经典应用场景
1.搜索引擎根据用户输入关键字，自动提示检索关键字
2.动态加载数据，按需取得数据[树形菜单、联动菜单...]
3.改善用户体验。[ 输入内容前提示、带进度条文件上传...]
4.电子商务应用。[ 购物车、邮件订阅...]
5.访问第三方服务。[ 访问搜索服务、rss阅读器]
6.页面局部刷新, https://piaofang. maoyan.com/dashboard
2.Ajax原理示意图
1.传统的WEB引用
2.使用Ajax的通讯方式
3.JavaScript原生Ajax请求
1.案例 验证用户名是否存在 使用Ajax 对页面进行局部刷新
需要引入两个包用于支撑 gson和servlet
用户注册
用户注册~
返回的json数据
package com.yinhai.servlet;
import com.google.gson.Gson;
import com.yinhai.bean.User;
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;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
*/
@WebServlet(name = "CheckServlet",urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//假定用户名为 king , 就不可用, 其它用户名可以
if("king".equals(uname)) {//不能使用king用户名
//后面这个信息，是从DB获取
User king = new User(100, "king", "666", "[email protected]");
//把 king 转成 json字符串
String strKing = new Gson().toJson(king);
//返回
response.getWriter().write(strKing);
} else {
//如果用户名可以用，返回""
response.getWriter().write("");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
2.本节作业
需求分析:到数据库去验证用户名是否可用
1)点击验证用户名,到数据库中验证用户名是否可用
2)创建数据库ajaxdb，创建表user表自己设计(自己试试)
3)使用ajax方式，服务端验证该用户名是否已经占用了,如果该用户已经占用,以json格式返回该用户信息
4)对页面进行局部刷新，显示返回信息
5)只需要再前面的应用实例中，进行升级,接入DB
创建DB表 以及插入默认数据
注意 引入依赖库但在out可能不会拷贝该lib过去 所以需要手动拷贝
servlet
package com.yinhai.servlet;
import com.google.gson.Gson;
import com.yinhai.bean.User;
import com.yinhai.service.UserService;
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;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
*/
@WebServlet(name = "CheckServlet",urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {
//定义一个UserService属性
private UserService userService = new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//System.out.println("CheckUserServlet 被调用....");
//接收ajax提交的数据
String uname = request.getParameter("username");
String pwd = request.getParameter("password");
String email = request.getParameter("email");
System.out.println("uname= " + uname + pwd + email);
response.setContentType("text/html;charset=utf-8");
// 到DB查询
// 如果有就返回user对象，否则，返回的是null
User user = userService.getUserByName(uname);
// String user = "";
if (user != null) {//说明用户名存在..,返回该user的json格式数据字符串
Gson gson = new Gson();
String strUser = gson.toJson(user);
response.getWriter().write(strUser);
} else {
response.getWriter().write("");
}
// // 假定用户名为 king , 就不可用, 其它用户名可以
// if("king".equals(uname)) {//不能使用king用户名
// //后面这个信息，是从DB获取
// User king = new User(100, "king", "666", "[email protected]");
// //把 king 转成 json字符串
// String strKing = new Gson().toJson(king);
// //返回
// response.getWriter().write(strKing);
// } else {
// //如果用户名可以用，返回""
// response.getWriter().write("");
//
// }
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
service
package com.yinhai.service;
import com.yinhai.bean.User;
import com.yinhai.dao.UserDAO;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
*/
//提供业务方法 比如获得User
public class UserService {
private UserDAO userDAO = new UserDAO();
public User getUserByName(String username){
return userDAO.querySingle("select * from `user` where username=?",User.class,username);
}
public void insertUserName(String username,String pwd,String email){
userDAO.dml("INSERT INTO `user`(?,?,?,?)",null,username,pwd,email);
}
}
以前编写的DAO类
package com.yinhai.dao;
import com.yinhai.util.JDBCUtilsByDruid;
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 javax.xml.ws.handler.Handler;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
* 开发BasicDAO是其他DAO的父类
*/
public class BasicDAO {
private QueryRunner qr = new QueryRunner();
//开发通用的增删改查方法
public int dml(String sql , Object... parameters){
Connection connection = null;
try {
connection = JDBCUtilsByDruid.getConnection();
int update = qr.update(connection, sql, parameters);
return update;
} catch (SQLException e) {//将编译异常 -> 运行异常 抛出
throw new RuntimeException(e);
}finally {
JDBCUtilsByDruid.close(null,null,connection);
}
}
//返回多个对象(即查询的结果是多行)，针对任意表
/**
*
* @param sql sql 语句，可以有 ?
* @param clazz 传入一个类的Class对象 比如 Actor.class
* @param parameters 传入 ? 的具体的值，可以是多个
* @return 根据Actor.class 返回对应的 ArrayList 集合
*/
public List queryMulti(String sql,Class clazz,Object... parameters){
Connection connection = null;
try {
connection = JDBCUtilsByDruid.getConnection();
return qr.query(connection, sql, new BeanListHandler(clazz),parameters);
} catch (SQLException e) {//将编译异常 -> 运行异常 抛出
throw new RuntimeException(e);
}finally {
JDBCUtilsByDruid.close(null,null,connection);
}
}
//查询单行结果 的通用方法
public T querySingle(String sql,Class clazz,Object... parameters){
Connection connection = null;
try {
connection = JDBCUtilsByDruid.getConnection();
return qr.query(connection, sql, new BeanHandler(clazz),parameters);
} catch (SQLException e) {//将编译异常 -> 运行异常 抛出
throw new RuntimeException(e);
}finally {
JDBCUtilsByDruid.close(null,null,connection);
}
}
//查询单行单列 即返回单值的方法
public Object queryScalar(String sql,Object... parameters){
Connection connection = null;
try {
connection = JDBCUtilsByDruid.getConnection();
return qr.query(connection, sql, new ScalarHandler(),parameters);
} catch (SQLException e) {//将编译异常 -> 运行异常 抛出
throw new RuntimeException(e);
}finally {
JDBCUtilsByDruid.close(null,null,connection);
}
}
}
JAVAbean对象
package com.yinhai.bean;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
*/
public class User {
private Integer id;
private String username;
private String pwd;
private String email;
//反射必须提供无参构造器
public User(){
}
public User(Integer id, String username, String pwd, String email) {
this.id = id;
this.username = username;
this.pwd = pwd;
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 getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
一个JDBC类
package com.yinhai.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.FileInputStream;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
*/
public class JDBCUtilsByDruid {
private static DataSource ds;
// 测试连接
// public static void main(String[] args) throws SQLException {
// Connection connection = JDBCUtilsByDruid.getConnection();
// System.out.println(connection);
// }
// 在静态代码块完成 ds初始化
static {
Properties properties = new Properties();
try {
//目前是Java方式启动
//所以我们要获取src目录下的文件需要使用 类加载器
//原先是JavaSe方式获取 现在是JavaWeb方式
// InputStream resourceAsStream = JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties");
properties.load(JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties"));
//properties.load(new FileInputStream("ajax/src/druid.properties"));
ds = DruidDataSourceFactory.createDataSource(properties);
} catch (Exception e) {
e.printStackTrace();
}
}
//编写getConnection方法
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
//关闭连接, 再次强调： 在数据库连接池技术中，close 不是真的断掉连接
//而是把使用的Connection对象放回连接池
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);
}
}
}
3.原生Ajax请求问题分析
1.编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便。
2.在实际工作中，一般使用 JavaScript的框架(比如Jquery)发送Ajax请求，从而解决这个问题
4.jQuery的Ajax请求
1.$.ajax方法
url:请求的地址
type :请求的方式get或post
data :发送到服务器的数据。将自动转换为请求字符串格式
success:成功的回调(某个Ajax事件来触发的)函数
dataType:返回的数据类型常用json或text
2.$.get请求和$.post请求常用参数
url;请求的URL地址
data:请求发送到服务器的数据:
success:成功时回调函数
type:返回内容格式， xmI, html, script, json, text
3.$.getJSON常用参数
url:请求发送的哪个URL
data:请求发送到服务器的数据
success:请求成功时运行的函数
4.应用实例
需要设置对应的格式 即不报错
用户注册
用户注册-Jquery+Ajax
返回的json数据
usercheckservlet
package com.yinhai.servlet;
import com.google.gson.Gson;
import com.yinhai.bean.User;
import com.yinhai.service.UserService;
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;
/**
* @author 银小海
* @version 1.0
* @email [email protected]
*/
@WebServlet(name = "CheckServlet_jquery",urlPatterns = "/checkServletJq")
public class CheckServlet_jquery extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("be invoked.....");
String username = request.getParameter("username");
System.out.println("ajax Jquery =" + username);
Gson gson = new Gson();
//验证业务接入到DB
// User dbusername = new UserService().getUserByName("king");
response.setContentType("text/json;charset=utf-8");
//接受jquery发送的ajax数据
if ("king".equals(username)) {
User user = new User(100, "king", "abc", "[email protected]");
response.getWriter().write(gson.toJson(user));
// response.getWriter().write(gson.toJson(dbusername));
} else {
//返回一个不存在的User=> 这里老师是有设计
User user = new User(-1, "", "", "");
response.getWriter().write(gson.toJson(user));
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
5.本章作业
只要调用即可，麻烦的是JDBC需要重新再复习一遍