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，null2.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>
打开浏览器掌握台，输出如下：
<!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.jarGson是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); }}
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); }}
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 }}
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); }}
传统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; }}
需求剖析：到数据库中验证用户名是否可用
点击验证用户名，到数据库中验证用户名是否可用自己设计创建数据库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() {//把稳，一定要有一个空的布局器，方便底层进行反射！3.3.5UserDAO
！
} 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 + '\'' + '}'; }}
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 的目的是底层反射创建工具，而反射是调用的无参布局器去创建类， // 因此在对应的实体类中一定要有无参布局器！3.3.7CheckUserServlet
！
！
User user = userDAO.querySingle("SELECT FROM `user` WHERE `username`=?", User.class, username); return user; }}
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或text4.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)
post() 方法通过 HTTP POST 要求从做事器载入数据。
语法：
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
jQuery ajax - getJSON() 方法
$.getJSON()常用参数
url：要求发送哪个urldata：要求发送到做事器的数据success：要求成功时运行的函数解释：$.getJSON()底层利用$.ajax()方法来实现异步要求
$.getJSON()方法通过 HTTP GET 要求载入 JSON 数据，语法：
jQuery.getJSON(url,data,success(data,status,xhr))
演示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的运用实例，将上面的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的运用实例，将上面的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代码的根本上修正返回数据的判断条件即可
