1.JSON介绍JSON指的是JavaScript对象表示法（ JavaScript Object Notation），JSON的本质仍然是JavaScript对象JSON是轻量级的文本数据交互格式，也是前后端进行数据通讯的一种格式：JSON独立于语言，即java，PHP ， asp.net，go等都可以使用jsonJSON具有自我描述性，更易理解 。一句话，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，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.取出key1console.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.取出key4console.log("key4= ", myJson.key4)console.log("key4.name= ", myJson.key4.name)//4.取出key5console.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对象转成–>Stringvar 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对象，并不会影响原来的stringvar 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;}@Overridepublic 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基?。敝葱凶永嗟奈薏喂乖炱魇保系饔胹uper(); 到父类的无参构造器执行
我们在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对象，发送指定数据，数据量?。俣瓤靀MLHttpReques是异步发送，在服务端没有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 () {//页面加载完毕后执行functionvar 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 () {//如果请求已完成，并且响应已经就绪，并且状态码是200if (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 = https://www.30zx.com/"用户名不可用";} else {document.getElementById("myres").value = "用户名可用";}}}//2.4真正发送ajax请求[底层还是http请求]//如果前面open的第一个参数指定的是post请求，那么post的参数在send中指定//如果open的第一个参数指定的是get请求 ， 那么send中不需要写任何数据，因为前面已经在url中指定了xhr.send();}}