大家好，欢迎来到IT知识分享网。
1.JSON介绍
- JSON指的是JavaScript对象表示法（ JavaScript Object Notation），JSON的本质仍然是JavaScript对象
- JSON是轻量级的文本数据交互格式，也是前后端进行数据通讯的一种格式：
- JSON独立于语言，即java，PHP，asp.net，go等都可以使用json
- JSON具有自我描述性，更易理解。一句话，JSON很好用。
2.JSON快速入门
2.1JSON的定义格式
var 变量名 = { "k1":value,//Number类型 "k2":"str",//字符串类型 "k3":[],//数组类型 "k4":{},//json对象类型 "k5":[{},{}]//json数组};例子：
var myJson = { "key1":1234,//Number类型 "key2":"Hello",//字符串类型 "key3":[1,"he llo",2.3],//数组类型 "key4":{"age":12,"name":"jack"},//json对象类型 "key5":[ //json数组 {"k1":10,"k2":"milan"}, {"k3":30,"k4":"smith"} ]};2.2格式规则
k-v形式，然后v中又可以嵌套k-v，并且每对k-v之间用逗号隔开
- 映射（元素/属性）用冒号:表示，“名称”:值，注意名称是字符串，因此要用双引号括起来
- 并列的数据之间用逗号,分隔，如“名称1″:值,”名称2”:值
- 映射的集合（对象）用大括号{}表示，如{“名称1″:值,”名称2”:值}
- 并列数据的集合（数组）用方括号[]表示，如[{“名称1″:值,”名称2”:值},{“名称1″:值,”名称2”:值}]
- 元素值类型：string，number，object，array，true，false，null
2.3入门案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>json快速入门案例</title> <script type="text/javascript"> window.onload = function () { /** * myJson 就是一个json对象 */ var myJson = { "key1": 1234,//Number类型 "key2": "Hello",//字符串类型 "key3": [1, "hello", 2.3],//数组类型 "key4": {"age": 12, "name": "jack"},//json对象 "key5": [ //json数组 {"k1": 10, "k2": "milan"}, {"k3": 30, "k4": "smith"} ] }; // 演示如何获取到json对象的各个属性/key // 1.取出key1 console.log("key1= ", myJson.key1); // 2.取出key3 //这里使用逗号来避免myJson.key3变成字符串 console.log("key3= ", myJson.key3); // 可以对key3取出的值（array）遍历 for (var i = 0; i < myJson.key3.length; i++) { //使用下标取出数组的值 console.log("第%i个元素的值= ", i, myJson.key3[i]); } //3.取出key4 console.log("key4= ", myJson.key4) console.log("key4.name= ", myJson.key4.name) //4.取出key5 console.log("key5= ", myJson.key5) console.log("取出key5的第二个数组的key4值= ", myJson.key5[1].k4) } </script></head><body><h1>json快速入门案例</h1></body></html>打开浏览器控制台，输出如下：
3.JSON对象和字符串对象转换
- JSON.stringify(json)：将一个json对象转换成为json字符串
- JSON.parse(jsonString)：将一个json字符串转换成为json对象
- 转换前提是传入的字符串的格式必须满足json格式
3.1应用实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSON对象和字符串对象转换</title> <script type="text/javascript"> window.onload = function () { //解读JSON //1.JSON是一个js的内置对象(build-in),可以直接使用，不需要创建 console.log(JSON); //演示如何将一个JSON对象转成-->String var jsonPerson = { "name": "jack", "age": 23 } console.log("jsonPerson= ", jsonPerson, " jsonPerson类型= ", typeof jsonPerson); var strPerson = JSON.stringify(jsonPerson); console.log("strPerson= ", strPerson, " strPerson类型= ", typeof strPerson); //演示如何将一个String对象转成-->JSON //注意转成json对象的字符串格式必须满足json格式 var strDog = "{\"name\":\"小黄狗\",\"age\":2}"; var jsonDog = JSON.parse(strDog); console.log("jsonDog= ", jsonDog) } </script></head><body><h1>JSON对象和字符串对象转换</h1></body></html>打开浏览器控制台，输出如下：
3.2注意事项和细节
- JSON.stringify(json对象)会返回对应的string，并不会影响原来json对象
- JSON.parse(jsonString)方法会返回对应的json对象，并不会影响原来的string
- 在定义Json对象时，可以使用单引号”或者双引号“”表示字符串，甚至前面的key可以不用任何引号
- 比如var json_person={“name”:”jack”,”age”:100};
- 也可以写成var json_person={‘name’:’jack’,’age’:100};
- 或者是var json_person={name:”jack”,age:100};
- 但是在把原生字符串转成json对象时，必须使用双引号“”，否则会报错
- JSON.springfiy(json对象)方法返回的字符串都是双引号“”表示的字符串，所以在语法格式正确的情况下，是可以重新转成json对象的。
例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSON和字符串转换的注意事项和细节</title> <script type="text/javascript"> window.onload = function () { var jsonPerson = { "name": "jack", "age": 22 } //1.JSON.stringify(json对象)会返回对应的string，并不会影响原来json对象 var strPerson = JSON.stringify(jsonPerson); console.log("jsonPerson=", jsonPerson); //2.JSON.parse(jsonString)方法会返回对应的json对象，并不会影响原来的string var strDog = "{\"name\":\"小黄狗\",\"age\":2}"; var jsonDog = JSON.parse(strDog); console.log("strDog=", strDog, "类型= ", typeof strDog) //3.在定义Json对象时，可以使用单引号或者双引号表示字符串 // 甚至前面的key可以不用任何引号 var jsonCat = { name: '猫猫', age: 2 } console.log("jsonCat=", jsonCat); //4.但是在把原生字符串转成json对象时，必须使用双引号""，否则会报错 //例如： var str_dog2 = "{name:'小黄狗',age:2}"; // JSON.parse(str_dog2);--报错 //JSON.springfiy(json对象)返回的字符串都是双引号`""`表示的字符串， // 所以在语法格式正确的情况下，是可以重新转成json对象的 var strCat = JSON.stringify(jsonCat); var parse = JSON.parse(strCat); console.log("parse=", parse) } </script></head><body><h1>JSON和字符串转换的注意事项和细节</h1></body></html>打开浏览器控制台，输出如下：
4.JSON在Java中使用
前面讲述的是前端页面中json对象和字符串之间的转化。在实际开发中，前端将json格式的字符串发送给后端，后端拿到后，可以将其转成java对象，进行其他操作，并可以在业务操作后，重新向前端发送json格式的字符串。
这意味着在Java后端中，同样有对象和字符串对象转换的需求。
4.1说明
- Java中使用json，需要引入第三方的包 gson.jar
- Gson是Google提供的用来在Java对象和 JSON数据之间进行映射的Java类库
- 可以对JSON字符串和Java对象相互转换
4.2JSON在Java中的应用场景
- Javabean对象和json字符串的相互转换
- List对象和json字符串的相互转换
- Map对象和json字符串的相互转换
4.3Java对象和JSON字符串互转
在项目中的lib目录下将gson.jar文件复制过来，点击add as library作为库
Javabean：Book类
package com.li.json; //这是一个Javabeanpublic class Book { private Integer id; private String name; public Book(Integer id, String name) { this.id = id; this.name = name; } 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; } @Override public String toString() { return "Book{" + "id=" + id + ", name='" + name + '\'' + '}'; }}JavaJson：
package com.li.json; import com.google.gson.Gson; public class JavaJson { public static void main(String[] args) { //创建一个gson对象，作为一个工具对象使用 Gson gson = new Gson(); //演示Javabean和json格式字符串的转换 Book book = new Book(10001, "三国演义"); //1.演示把一个Javabean转成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); }}
4.4List对象和JSON字符串互转
Book类见4.3
JavaJson：
package com.li.json; import com.google.gson.Gson;import com.google.gson.reflect.TypeToken; import java.lang.reflect.Type;import java.util.ArrayList;import java.util.List; public class JavaJson { public static void main(String[] args) { //创建一个gson对象，做为一个工具对象使用 Gson gson = new Gson(); //3.演示把List对象-->json字符串 ArrayList<Book> bookList = new ArrayList<>(); bookList.add(new Book(100, "天龙八部")); bookList.add(new Book(200, "红楼梦")); //因为把一个对象或者集合转成字符串，相对比较简单 //底层只需要遍历，按照json格式拼接返回即可 String strBookList = gson.toJson(bookList); System.out.println("strBookList= " + strBookList); //4.把json字符串转成-->list对象 //(1)如果要把json字符串，转成 集合 这种比较复杂的类型，需要使用Gson提供的一个类：TypeToken //(2)这个TypeToken类在com.google.gson.reflect下面，在反射对象的时候使用 //(3)TypeToken 是一个自定义泛型类，通过TypeToken来指定我们需要转换成的类型 /* * public class TypeToken<T> { * final Class<? super T> 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(); * } * ... * ... * } */ /* TypeToken (1)下面的语句new TypeToken<List<Book>>(){}.getType()， 返回类型的完整的路径 java.util.List<com.li.json.Book> (2)gson的设计者需要得到类型的完整路径，然后进行底层的反射 (3)所以gson设计者提供了一个TypeToken类来搞定 */ Type type = new TypeToken<List<Book>>(){}.getType(); System.out.println(type.getClass());//class com.google.gson.internal.$Gson$Types$ParameterizedTypeImp // System.out.println("type= " + type);//java.util.List<com.li.json.Book> List<Book> bookList2 = gson.fromJson(strBookList, type); System.out.println("bookList2="+bookList2); }}
4.4.1TypeToken
TypeToken类的作用是：得到类型的完整路径，然后进行底层的反射
Type type = new TypeToken<List<Book>>(){}.getType();一个问题，TypeToken为什么要加{}?
- 如果我们把下面语句中的 {} 去掉，会提示
‘TypeToken()’ has protected access in ‘com.google.gson.reflect.TypeToken’ - 因为TypeToken的无参构造器是protected的，而语句TypeToken<List<Book>>()就是调用其无参构造器。我们知道，如果一个方法是protected，并且和当前类不在同一个包，那么就没有该方法的访问权限，因此报错。
- 那为什么加上{} ,就可以访问了呢？这里涉及到匿名内部类的知识。
- 当我们这样使用的时候：new TypeToken<List<Book>>(){} ，其实这个类型就不是TypeToken，而是一个匿名内部类（可以理解为TypeToken的一个子类）
- 而且这个匿名内部类有自己的无参构造器(隐式)，根据java基础，当执行子类的无参构造器时，默认调用super(); 到父类的无参构造器执行
我们在Type type = new TypeToken<List<Book>>() {}.getType();处打上断点，并在TypeToken类中的无参构造器旁也打上断点。点击debug，点击Resume Program按钮
可以看到光标跳转到TypeToken类中的无参构造器：
再点击step over，可以看到，type属性拿到了类型的完整路径，这样才能去进行底层的反射
4.4.2二说TypeToken
我们用两个类来模拟一下上述4.4.1的过程
在src目录下创建两个包：t1和t2，在t1中创建一个A类，在t2中创建一个Test类
A类：
package com.li.t1; public class A<T> { protected A() { System.out.println("A 的protected A() 被调用..."); }}这时如果在Test类中new一个A类对象，那么将会报错，原因就是被 protected 修饰的成员对于本包和其子类可见。而A和Test类既不在同一个包，也不是继承关系。这和4.4.1报错的原因完全一致。
实际上，protected的可见性在于两点：1.基类的 protected 成员是包内可见的，并且对子类可见；2.若子类与基类不在同一包中，那么在子类中，子类实例可以访问其从基类继承而来的protected方法，而不能访问基类实例的protected方法。
Java protected 关键字详解 | 菜鸟教程 (runoob.com)
package com.li.t2; import com.li.t1.A; public class Test { public static void main(String[] args) { A a = new A<String>() {}; //1.因为A类和Test类不在同一个包，也不是继承关系，不能访问A的protected成员，包括构造器 //2. A(){}就是一个匿名内部类，可以理解成A的子类 //3. A(){} 有一个隐式的无参构造器，会调用super() //4. 当你执行 new A(){} 时，会调用A类的 protected无参构造器 // 泛型+匿名内部类 System.out.println(a.getClass());//class com.li.t2.Test$1 }}
4.5Map对象和JSON字符串互转
Book类见4.3
JavaJson：
package com.li.json; import com.google.gson.Gson;import com.google.gson.reflect.TypeToken; import java.lang.reflect.Type;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map; public class JavaJson { public static void main(String[] args) { //创建一个gson对象，做为一个工具对象使用 Gson gson = new Gson(); //5.把map对象转成-->json字符串 HashMap<String, Book> 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<Map<String,Book>>(){}.getType() //===> java.util.Map<java.lang.String, com.li.json.Book> Map<String,Book> bookMap2 = gson.fromJson(strBookMap, new TypeToken<Map<String,Book>>(){}.getType()); System.out.println(bookMap2); }}
1.Ajax基本介绍
1.1Ajax是什么
- AJAX 即“Asynchronous JavaScript And XML”（异步JavaScript和XML）
- Ajax 是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术
- 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。而使用Ajax，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 传统的网页（不使用 AJAX），如果没有得到服务器的响应，浏览器程序会处于一个等待挂起的状态，无法执行其他操作，直至得到http响应。
1.2Ajax经典应用场景
- 搜索引擎根据用户输入关键字，自动提示检索关键字
- 动态加载数据，按需取得数据 [树形菜单，联动菜单]
- 改善用户体验 [输入内容前提示，带进度条文件上传]
- 电子商务应用 [购物车，邮件订阅]
- 访问第三方服务 [访问搜索服务，rss阅读器]
- 页面局部刷新
- Ajax的三个特点异步请求发送指定数据局部刷新
2.Ajax原理示意图
2.1传统的web应用数据通信方式
传统web应用数据通信方式
- 浏览器发出http请求（携带数据username=xxx&pwd=xxx）
- 服务端接收数据，并处理
- 通过http响应，把数据返回给浏览器
缺点：
- 表单提交是把该表单的所有数据都提交给服务端，数据量大，没有意义
- 在服务端没有响应前，浏览器前端页面处于等待状态，处于一个挂起的状态
- 不能进行局部刷新页面，而是刷新整个页面
2.2Ajax数据通信方式
Ajax数据通信方式：
- 浏览器发出http请求，使用XMLHttpRequest对象
- 服务端接收数据，并处理
- 通过http响应，把数据返回给浏览器（返回的数据格式可以多样 如json，xml，普通文本）
优点：
- 可以通过XMLHttpReques对象，发送指定数据，数据量小，速度快
- XMLHttpReques是异步发送，在服务端没有Http响应前，浏览器不需要等待，用户可以进行其他操作
- 可以进行局部刷新，提高了用户体验
3.JavaScript原生Ajax请求
3.1Ajax文档
AJAX – XMLHttpRequest 对象 (w3school.com.cn)
- onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
3.2应用实例
演示JavaScript发送原生Ajax请求的案例
- 在输入框输入用户名
- 点击验证用户名，使用ajax方式，服务端验证该用户名是否已经被占用，如果已经被占用，以json格式返回该用户信息
- 假定用户名为king，就不可用，其他用户名可以（后面我们接入DB）
- 对页面进行局部刷新，显示返回信息
- 思考：为什么直接返回用户名是否可用信息？==>为什么返回json格式的字符串？
- 可以根据返回的json可以做更多的业务操作。
思路
- 首先创建一个新项目，添加web支持(暂时不使用maven)
- 在web-inf文件夹下添加lib目录，添加servlet和json的相关jar包
- 配置Tomcat服务器
- 创建login.html，使用ajax
- 大致的流程是：用户点击验证用户名按钮后，操作dom获取填写的用户名，然后创建XMLHttpRequest对象[ajax引擎对象]，调用XMLHttpRequest 对象的 open() 和 send() 方法
- 在open中设置三个参数：1.请求方式、2.请求url（如果是get请求，url需包括请求参数）、3.是否使用异步发送
- 给XMLHttpRequest对象绑定一个事件onreadystatechange，该事件的触发时机是XMLHttpRequest的readyState状态改变。
- readyState状态详见：AJAX – 服务器响应 (w3school.com.cn)
- 然后调用send方法真正发送ajax请求（如果是post请求，参数就是在send方法中设置）
- 根据readyState的状态判断请求已完成且响应已就绪，然后进行业务操作。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户注册</title> <script type="text/javascript"> window.onload = function () {//页面加载完毕后执行function var checkButton = document.getElementById("checkButton"); checkButton.onclick = function () { //1.创建XMLHttpRequest对象[ajax引擎对象] var xhr = new XMLHttpRequest(); //2.准备发送指定数据 // 2.1获取用户填写的用户名 var username = document.getElementById("uname").value; // 2.2XMLHttpRequest 对象的 open() 和 send() 方法 // (1)"GET" 请求方式，也可以是post // (2)"/ajax/checkUserServlet?username="+username 就是url // (3) true表示异步发送 xhr.open("GET", "/ajax/checkUserServlet?username=" + username, true); //2.3在send方法调用前，给XMLHttpRequest对象绑定一个事件==>onreadystatechange //每当XMLHttpRequest对象的 readyState 改变时，就会触发 onreadystatechange 事件 xhr.onreadystatechange = function () { //如果请求已完成，并且响应已经就绪，并且状态码是200 if (xhr.readyState == 4 && xhr.status == 200) { //把返回的json数据显示在div上 document.getElementById("div1").innerText = xhr.responseText; // console.log("xhr=", xhr); //处理XMLHttpRequest对象中拿到的数据 var responseText = xhr.responseText; // console.log("返回的信息= "+responseText); if (responseText != "") { //根据在servlet设置的逻辑，如果返回的数据不是空串，说明该用户名不可用 document.getElementById("myres").value = "用户名不可用"; } else { document.getElementById("myres").value = "用户名可用"; } } } //2.4真正发送ajax请求[底层还是http请求] //如果前面open的第一个参数指定的是post请求，那么post的参数在send中指定 //如果open的第一个参数指定的是get请求，那么send中不需要写任何数据，因为前面已经在url中指定了 xhr.send(); } } </script></head><body><h1>用户注册</h1><form action="/ajax/checkUserServlet" method="post"> 用户名字:<input type="text" name="username" id="uname"> <input type="button" id="checkButton" value="验证用户名"> <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/> 用户密码:<input type="password" name="password"><br/><br/> 电子邮件:<input type="text" name="email"><br/><br/> <input type="submit" value="用户注册"></form><h1>返回的 json 数据</h1><div id="div1"></div></body></html>- 在web.xml中配置servlet
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>CheckUserServlet</servlet-name> <servlet-class>com.li.ajax.servlet.CheckUserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckUserServlet</servlet-name> <url-pattern>/checkUserServlet</url-pattern> </servlet-mapping></web-app>- CheckUserServlet：如果接收到的用户名为king，就将其信息以json形式返回前端页面，如果是其他名字，就返回空串。
package com.li.ajax.servlet; import com.google.gson.Gson;import com.li.ajax.entity.User; import javax.servlet.*;import javax.servlet.http.*;import java.io.IOException;import java.io.PrintWriter; public class CheckUserServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("CheckUserServlet 被调用..."); //接收ajax提交的数据 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String username = request.getParameter("username");//参数名取决于url中的参数名 System.out.println("uname=" + username); //如果用户名为king，就认为是不可用的 if ("king".equals(username)) {//假定king已经有人使用了 //后面这个信息是从数据库db来获取的 User king = new User(100, "king", "6666", "king@qq.com"); //把king 对象转成 json 格式的字符串 String strKing = new Gson().toJson(king); //返回信息 response.getWriter().print(strKing); } else { //如果用户名可用，返回空串即可 response.getWriter().print(""); } }}- Javabean，为了完成对象–>json字符串的需求
package com.li.ajax.entity; /** * User类就是一个Javabean/pojo/entity/domain */public class User { private Integer id; private String name; private String pwd; private String email; public User(Integer id, String name, String pwd, String email) { this.id = id; this.name = name; this.pwd = pwd; this.email = email; } 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 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; }}
3.3练习
需求分析：到数据库中验证用户名是否可用
- 点击验证用户名，到数据库中验证用户名是否可用
- 自己设计创建数据库ajaxdb，创建users表
- 使用ajax方式，服务端验证该用户名是否已经被占用了，若已经被占用，以json格式返回该用户信息
- 对页面进行局部刷新，显示返回信息
- 提示：[Mysql+JDBC+数据库连接池]
只需在前面的应用实例中进行升级改进，接入DB
项目的整体架构：
3.3.1创建数据库表格
# 创建数据库CREATE DATABASE ajaxdb;# 创建users表CREATE TABLE `user` ( id INT(11) PRIMARY KEY, `username` VARCHAR(32) UNIQUE NOT NULL DEFAULT '', pwd CHAR(32) NOT NULL DEFAULT '', email VARCHAR(32) NOT NULL DEFAULT '')CHARSET utf8 COLLATE utf8_bin ENGINE INNODB; #插入测试数据INSERT INTO `user` VALUES(100,"king",MD5('123'),"king@qq.com");INSERT INTO `user` VALUES(200,"queen",MD5('666'),"queen@qq.com");INSERT INTO `user` VALUES(300,"princess",MD5('999'),"princess@163.com"); SELECT * FROM `user`;DESC `user`;#drop table `user`; #完成的工作SELECT COUNT(*) FROM `user` WHERE `username`="king"
3.3.2创建工具类JdbcUtilsByDruid
在项目的lib库下添加德鲁伊，Apache-DBUtils，mysql-connect数据库连接驱动
数据库连接池详见：javase基础-jdbc和数据库连接池
在项目src目录下添加德鲁伊配置文件
#key=valuedriverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://localhost:3306/ajaxdb?rewriteBatchedStatements=trueusername=rootpassword=123456#initial connection SizeinitialSize=10#min idle connecton sizeminIdle=5#max active connection sizemaxActive=20#max wait time (5000 mil seconds)maxWait=5000创建德鲁伊工具类JDBCUtilsByDruid
package com.li.ajax.utils; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.DataSource;import java.sql.*;import java.util.Properties; /** * 基于Druid数据库连接池的工具类 */public class JDBCUtilsByDruid { private static DataSource ds; //在静态代码块完成ds的初始化 //静态代码块在加载类的时候只会执行一次，因此数据源也只会初始化一次 static { Properties properties = new Properties(); try { /** * 注意，目前我们是javaweb方式启动 * 在web项目下要得到资源文件，需要使用类加载器， * 得到它真正执行的目录下的out/artifacts/项目名/WEB-INF/classes目录中的资源 */ properties.load(JDBCUtilsByDruid.class.getClassLoader() .getResourceAsStream("druid.properties")); //方式二：也可以使用绝对路径 //properties.load(new FileInputStream("D:\\IDEA-workspace\\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 statemenat, Connection connection) { try { if (resultSet != null) { resultSet.close(); } if (statemenat != null) { statemenat.close(); } if (connection != null) { connection.close(); } } catch (SQLException e) { throw new RuntimeException(e); } }}3.3.3BaseDAO
package com.li.ajax.dao; import com.li.ajax.utils.JDBCUtilsByDruid;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanHandler; import java.sql.*; /** * 开发BasicDAO，是其他DAO的父类 */public class BaseDAO<T> {//泛型指定具体的类型 private QueryRunner queryRunner = new QueryRunner(); //查询单行结果 的通用方法（单行多列） public T querySingle(String sql, Class<T> clazz, Object... parameters) { Connection connection = null; try { connection = JDBCUtilsByDruid.getConnection(); return queryRunner.query(connection, sql, new BeanHandler<T>(clazz), parameters); } catch (SQLException e) { throw new RuntimeException(e);//将一个编译异常转变为运行异常 } finally { JDBCUtilsByDruid.close(null, null, connection); } } //根据业务需求还可以有多行多列查询，单行多列插叙，单行单列查询等 //这里不再列举，详见javase基础-满汉楼BasicDAO}3.3.4User类
修改3.2中的Javabean–User类
package com.li.ajax.entity; /** * User类就是一个Javabean/pojo/entity/domain */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; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '\'' + ", pwd='" + pwd + '\'' + ", email='" + email + '\'' + '}'; }}3.3.5UserDAO
package com.li.ajax.dao; import com.li.ajax.entity.User; /** * 对user表的增删查改 */public class UserDAO extends BaseDAO<User> { //我们的UserDAO继承了BasicDAO，并指定了User //这时我们就可以使用BasicDAO中的方法}3.3.6UserService
package com.li.ajax.service; import com.li.ajax.dao.UserDAO;import com.li.ajax.entity.User;import org.testng.annotations.Test; import java.sql.SQLException; /** * UserService 提供业务方法 */public class UserService { //添加属性UserDAO，方便操作 private UserDAO userDAO = new UserDAO(); //根据用户名返回对应的user对象，如果没有则返回null @Test public User getUserByName(String username) throws SQLException { //使用 User.class 的目的是底层反射创建对象，而反射是调用的无参构造器去创建类， // 因此在对应的实体类中一定要有无参构造器！！！ User user = userDAO.querySingle("SELECT * FROM `user` WHERE `username`=?", User.class, username); return user; }}3.3.7CheckUserServlet
package com.li.ajax.servlet; import com.google.gson.Gson;import com.li.ajax.entity.User;import com.li.ajax.service.UserService; import javax.servlet.*;import javax.servlet.http.*;import java.io.IOException;import java.sql.SQLException; public class CheckUserServlet extends HttpServlet { //定义一个UserService属性 private UserService userService = new UserService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("CheckUserServlet 被调用..."); //接收ajax提交的数据 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String username = request.getParameter("username");//参数名取决于url中的参数名 System.out.println("uname=" + username); //从数据库中查找有无相同的用户名 try { User userByName = userService.getUserByName(username); if (userByName != null) {//说明用户名存在 // 返回该User对象的json格式的字符串 String strUser = new Gson().toJson(userByName); //给浏览器返回信息 response.getWriter().print(strUser); } else { //如果返回了null，说明没有重名的用户 //用户名可用，返回空串即可 response.getWriter().print(""); } } catch (SQLException e) { e.printStackTrace(); } }}3.3.8login.html
详见3.2应用实例
3.3.9测试
重启Tomcat，在浏览器中访问http://localhost:8080/ajax/login.html
4.jQuery的Ajax请求
原生Ajax请求问题分析：
- 编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便
- 在实际工作中，一般使用JavaScript的框架（比如jquery）发动Ajax请求，从而解决这个问题。
4.1jQuery Ajax操作方法
在线文档：jQuery 参考手册 – Ajax (w3school.com.cn)
4.2$.ajax()方法
完整的参数查看手册：jQuery ajax – ajax() 方法
$.ajax 常用参数：
- url：请求的地址
- type：请求的方式get或者post， 默认为 “GET”。
- 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
- data：发送到服务器的数据，将自动转换为请求字符串格式
- success：请求成功后的回调函数
- 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
- 这是一个 Ajax 事件。
- error：默认值: 自动判断 (xml 或 html)，请求失败时的回调函数。
- dataType：指定返回的数据类型，常用json或text
4.3$.get()和$.post()请求
jQuery AJAX get() 和 post() 方法
$.get()请求和$.post()请求常用参数：
- url：请求的url地址
- data：请求发送到服务器的数据
- success：成功时的回调函数
- type：返回内容的格式，xml，html，script，json，text
说明：$.get()和 $.post()底层还是使用$.ajax()方法来实现异步请求
4.3.1$.get()
get() 方法通过远程 HTTP GET 请求载入信息
这是一个简单的 GET 请求功能以取代复杂 $.ajax，请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax().
语法：
$(selector).get(url,data,success(response,status,xhr),dataType)
4.3.2$.post()
post() 方法通过 HTTP POST 请求从服务器载入数据。
语法：
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
4.4$.getJSON()方法
jQuery ajax – getJSON() 方法
$.getJSON()常用参数
- url：请求发送哪个url
- data：请求发送到服务器的数据
- success：请求成功时运行的函数
说明：$.getJSON()底层使用$.ajax()方法来实现异步请求
$.getJSON()方法通过 HTTP GET 请求载入 JSON 数据，语法：
jQuery.getJSON(url,data,success(data,status,xhr))
4.5应用实例
4.5.1$.ajax()应用实例
演示jquery发送ajax的案例
- 在输入框输入用户名
- 点击验证用户名，服务端验证该用户是否已经占用了，如果是，则以json格式返回该用户信息
- 假定king为已使用的用户名
- 对页面进行局部刷新，显示返回的信息
思路分析：直接参考3.2的思路图即可
引入jquery库：
注意：如果有的资源是拷贝进来的，有时候运行目录out没有及时更新，这时可以点击Rebuild Project，如果不行就redeploy Tomcat
配置servlet：
<servlet>
<servlet-name>CheckUserServlet2</servlet-name>
<servlet-class>com.li.ajax.servlet.CheckUserServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUserServlet2</servlet-name>
<url-pattern>/checkUserServlet2</url-pattern>
</servlet-mapping>
创建CheckUserServlet2：
package com.li.ajax.servlet;
import com.google.gson.Gson;
import com.li.ajax.entity.User;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
public class CheckUserServlet2 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收jquery发送的ajax数据
String username = request.getParameter("username");//参数名取决于前端的参数名
response.setContentType("text/json;charset=utf-8");//指定MIME类型为json
Gson gson = new Gson();
if ("king".equals(username)) {
//后面可以接入数据库database
User user = new User(100, "king", "123", "king@163.com");
response.getWriter().print(gson.toJson(user));
} else {
//返回一个不存在的User-->测试
User user = new User(-1, "", "", "");
response.getWriter().print(gson.toJson(user));
}
}
}
login2.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入jquery-->
<script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(function () {
//绑定事件
$("#btn1").click(function () {
//发出ajax请求
/**
* 1.指定参数时，需要在{}里面
* 2.指定参数时，需要指定参数名
* 3.dataType:"json" 代表要求服务器返回的数据是json，
* 如果服务器返回的不是json，就会解析出错
*/
$.ajax({
url: "/ajax/checkUserServlet2",
type: "post",
data: {//这里我们直接给一个json
username: $("#uname").val(),
date : new Date()//防止浏览器缓存
},
error:function () {//失败后的回调函数
console.log("失败")
},
success:function (data,status,xhr) {
console.log("成功");
console.log("data=",data);
console.log("status=",status);
console.log("xhr=",xhr);
//data是一个json对象，需要转成json字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if (""==data.username){//说明用户名可用
$("#myres").val("该用户名可用");
}else {
$("#myres").val("该用户名不可用");
}
},
dataType:"json"
})
})
})
</script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id="btn1" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>
4.5.2$.get()应用实例
使用4.5的应用实例，将上面的html页面改写，其他不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入jquery-->
<script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(function () {
//绑定事件
$("#btn1").click(function () {
//演示$.get()使用
// $.get()默认是get请求，不需要指定请求方式
//不需要写参数名，但是参数的位置要正确对应，
// 顺序是：url，data，success回调函数，返回的数据格式
$.get(
"/ajax/checkUserServlet2",
{//这里我们直接给一个json
username: $("#uname").val(),
date: new Date()//防止浏览器缓存
},
function (data, status, xhr) {
console.log("$.get成功")
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是一个json对象，需要转成json字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {//说明用户名可用
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
},
"json"
)
})
})
</script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id="btn1" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>
4.5.3$.post()应用实例
使用4.5的应用实例，将上面的html页面改写，其他不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入jquery-->
<script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(function () {
//绑定事件
$("#btn1").click(function () {
//$.post 和 $.get的调用方式基本一样，只是这时是以post方式发送ajax请求
$.post(
"/ajax/checkUserServlet2",
{//这里我们直接给一个json
username: $("#uname").val(),
date: new Date()//防止浏览器缓存
},
function (data, status, xhr) {
console.log("$.post成功")
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是一个json对象，需要转成json字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {//说明用户名可用
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
},
"json"
)
})
})
</script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id="btn1" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>
4.5.4$.getJSON()应用实例
使用4.5的应用实例，将上面的html页面改写，其他不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入jquery-->
<script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(function () {
//绑定事件
$("#btn1").click(function () {
//如果你通过jquery发出的ajax请求是get请求，并且返回的数据格式是json，
// 可以直接使用getJSON()函数，很方便
$.getJSON(
"/ajax/checkUserServlet2",
{//这里我们直接给一个json
username: $("#uname").val(),
date: new Date()//防止浏览器缓存
},
function (data, status, xhr) {//成功后的回调函数
console.log("$.getJSON成功")
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是一个json对象，需要转成json字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {//说明用户名可用
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
}
)
})
})
</script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id="btn1" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>
4.6练习
● 需求分析: 到数据库去验证用户名是否可用
- 点击验证用户名, 到数据库中验证用户名是否可用
- 创建数据库 ajaxdb , 创建表 user 表 自己设计
- 使用 Jquery + ajax 方式， 服务端验证该用户名是否已经占用了, 如果该用户已经占用，以 json 格式返回该用户信息
- 对页面进行局部刷新, 显示返回信息
提示: 根据day34-JSON&Ajax02-3.3练习 的 ajax 请求+jdbc+mysql 到数据库验证案例完成
根据之前的day34-JSON&Ajax02-3.3练习，我们已经写了JDBCUtilsByDruid，BaseDAO，UserDAO，UserService，User等类，只需要在CheckUserServlet2中修改一下代码即可完成：
package com.li.ajax.servlet;
import com.google.gson.Gson;
import com.li.ajax.entity.User;
import com.li.ajax.service.UserService;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.SQLException;
public class CheckUserServlet2 extends HttpServlet {
private UserService userService = new UserService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");//指定MIME类型为json
Gson gson = new Gson();
//接收jquery发送的ajax数据
String username = request.getParameter("username");//参数名取决于前端的参数名
//到数据库中查找有无重名用户
try {
User userByName = userService.getUserByName(username);
//如果有返回的就是一个User对象，如果没有，返回的就是null
response.getWriter().print(gson.toJson(userByName));
} catch (SQLException e) {
e.printStackTrace();
}
}
}
前端html页面使用4.5.4的$.getJSON()方法发送ajax请求，在4.5.4代码的基础上修改返回数据的判断条件即可
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/55014.html
