【JavaWeb12】数据交换与异步请求：JSON与Ajax的绝妙搭配是否塑造了Web的交互革命?
文章目录
🙋♂️ 作者：@whisperrr.🙋♂️👀 专栏：JavaWeb👀
💥 标题：【JavaWeb12】数据交换与异步请求：JSON与Ajax的绝妙搭配是否塑造了Web的交互革命？💥
❣️ 寄语：比较是偷走幸福的小偷❣️
前言：
数据交换和异步请求技术在Web开发中扮演着举足轻重的角色。JSON和Ajax作为这两大技术的代表，已经成为了前端工程师必备的技能。本文将带您深入了解JSON与Ajax的原理、应用场景和细节说明，助您在Web开发领域更进一步。
🌍一. 数据交换–JSON
❄️1. JSON介绍
1.JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
2.JSON 是轻量级的文本数据交换格式
3.JSON 独立于语言 [解读：即 java 、php、asp.net , go 等都可以使用 JSON]
4.JSON 具有自我描述性，更易理解, 一句话，非常的好用…
❄️2. JSON 快速入门
1.JSON 的定义格式
var 变量名 = { \"k1\" : value, // Number 类型\"k2\" : \"value\", // 字符串类型\"k3\" : [],// 数组类型\"k4\" : {}, // json 对象类型\"k5\" : [{},{}] // json 数组};2.解读 JSON 规则
- 映射(元素/属性)用冒号 : 表示，“名称”:值 , 注意名称是字符串，因此要用双引号引起来
- 并列的数据之间用逗号 , 分隔。“名称 1”:值,“名称 2”:值
- 映射的集合(对象)用大括号 {} 表示。{“名称 1”:值,“名称 2”:值}
- 并列数据的集合（数组）用方括号 [] 表示。 [{“名称 1”:值,“名称 2”:值}, {“名称 1”:值,\" 名称 2\":值}]
- 元素值类型：
string, number, object, array, true, false, null
3.JSON 快速入门案例
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>json 快速入门案例</title><script type=\"text/javascript\">var myJson = { \"key1\": \"教育\", // 字符串\"key2\": 123, // Number \"key3\": [1, \"hello\", 2.3], // 数组\"key4\": {\"age\": 12, \"name\": \"jack\"}, //json 对象\"key5\": [ //json 数组{\"k1\": 10, \"k2\": \"milan\"}, {\"k3\": 30, \"k4\": \"smith\"}]};//访问 json 的属性console.log(\"key1= \" + myJson.key1);// 访问 json 的数组属性console.log(\"key3[1]= \" + myJson.key3[1]); // hello// 访问 key4 的 name 属性console.log(\"name= \" + myJson.key4.name); // jack// 访问 key5 json 数组的第一个元素console.log(\"myJson.key5[0]= \" + myJson.key5[0]); //[object, object]console.log(\"myJson.key5[0].k2= \" + myJson.key5[0].k2)// milan</script></head><body><h1>json 快速入门案例</h1></body></html>❄️3. JSON 对象和字符串对象转换
1.应用案例
JSON.stringify(json)功能: 将一个 json 对象转换成为 json 字符串 [简单说名字来源.]SerializeJSON.parse( jsonString )功能: 将一个 json 字符串转换成为 json 对象
代码演示：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>JSON 对象和字符串对象转换</title><script type=\"text/javascript\">// 一个 json 对象var jsonObj = {\"name\": \"韩顺平教育\", age: 10};//JSON 是一个 build-in 对象,内建对象,有方法可以使用console.log(JSON)// 把 json 对象转换成为字符串对象var jsonStr = JSON.stringify(jsonObj);console.log(jsonStr);// 把 json 对象的字符串，转换成为 json 对象var jsonObj2 = JSON.parse(jsonStr);console.log(jsonObj2);</script></head><body><h1>JSON 对象和字符串对象转换</h1></body></html>2.注意事项和细节
1.JSON.springify(json 对 象) 会 返 回对 应 string, 并 不 会影 响 原 来 json 对 象.
2.JSON.parse(string) 函数会返回对应的 json 对象, 并不会影响原来 string.
3.在定义 Json 对象时, 可以使用\' \'表示字符串.
比如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 对象的.
❄️4. JSON 在 java 中使用
1.说明
- java 中使用 json，需要引入到第 3 方的包
gson.jar - Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。
- 可以对 JSON 字符串 和 Java 对象相互转换
2.JSON 在 Java 中应用场景
- Javabean 对象和 json 字符串 的转换
- List 对象和 json 字符串 的转换
- map 对象和 json 字符串 的转换
3.应用场景示意图
❄️5. 代码演示
1.代码演示:演示javabean 和 json字符串的转换
//创建一个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 Book book2 = gson.fromJson(strBook, Book.class); System.out.println(\"book2=\" + book2);解读
(1) strBook 就是 json字符串
(2) Book.class 指定将 json字符串转成 Book对象
(3) 底层是反射机制
2.代码演示:演示把list对象 -> json字符串
//1. 演示把list对象 -> json字符串 List<Book> bookList = new ArrayList<>(); bookList.add(new Book(200, \"天龙八部\")); bookList.add(new Book(300, \"三国演义\")); //因为把对象,集合转成字符串, 相对比较简单 //底层只需要遍历, 按照json格式拼接返回即可 String strBookList = gson.toJson(bookList); System.out.println(\"strBookList= \" + strBookList);因为把对象,集合转成字符串, 相对比较简单
底层只需要遍历, 按照json格式拼接返回即可
3.代码演示:演示把json字符串 -> list对象
(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类
(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型
Type type = new TypeToken<List<Book>>() { }.getType(); List<Book> bookList2 = gson.fromJson(strBookList, type); System.out.println(\"bookList2= \" + bookList2);(1) 返回类型的完整路径java.util.List
(2) gson的设计者，需要得到类型的完整路径，然后进行底层反射
(3) 所以gson 设计者就提供TypeToken, 来搞定.
== 使用TypeToken , 为什么要加 {}==
首先我们看一下TypeToken的源码
com.google.gson.reflect 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(); }(1) 如果我们
new TypeToken<List>()
错误提示\'TypeToken()\' has protected access in \'com.google.gson.reflect.TypeToken\'
(2) 因为TypeToken 的无参构造器是protected ， 而new TypeToken<List>()就是调用其无参构造器
(3) 根据java基础, 如果一个方法是protected,而且不在同一个包,是不能直接访问的, 因此报错
(4) 为什么new TypeToken<List>(){}使用就可以,这里就涉及到匿名内部类的知识.
(5) 当new TypeToken<List>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类),继承
(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();
4.代码演示:演示把mapt对象 -> json字符串(与list基本一致)
//把map对象->json字符串 Map<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); // 把json字符串 -> map对象 // new TypeToken<Map>() {}.getType()=> java.util.Map Map<String, Book> bookMap2 = gson.fromJson(strBookMap, new TypeToken<Map<String, Book>>() { }.getType());🌍二. 异步请求–Ajax
❄️1. 基本介绍
1.Ajax 是什么
- AJAX 即\"Asynchronous Javascript And XML\"(异步 JavaScript 和 XML)
- Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术
Ajax 经典应用场景 - 搜索引擎根据用户输入关键字，自动提示检索关键字
- 动态加载数据，按需取得数据【树形菜单、联动菜单…】
- 改善用户体验。【输入内容前提示、带进度条文件上传…】
- 电子商务应用。 【购物车、邮件订阅…】
- 访问第三方服务。【访问搜索服务、rss 阅读器】
- 页面局部刷新
2.Ajax 原理示意图
❄️2. JavaScript 原生 Ajax 请求
1 Ajax 文档
首先给大家推荐一下Ajax的在线文档
https://www.w3school.com.cn/js/js_ajax_intro.asp
2.通过下面的问题来引出Ajax
点击验证用户名, 使用 ajax 方式， 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json 格式返回该用户信息
<script type=\"text/javascript\"> window.onload = function () { //页面加载后执行function var checkButton = document.getElementById(\"checkButton\"); //给checkButton绑定onclick checkButton.onclick = function () { //1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象] var xhr = new XMLHttpRequest(); // 获取用户填写的用户名 var uname = document.getElementById(\"uname\").value; //2. 准备发送指定数据 open, send //(1)\"GET\" 请求方式可以 GET/POST //(2)\"/ajax/checkUserServlet?username=\" + uname 就是 url //(3)true , 表示异步发送 xhr.open(\"GET\", \"/ajax/checkUserServlet?uname=\" + uname, true); //在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange // 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件 xhr.onreadystatechange = function () { //如果请求已完成，且响应已就绪, 并且状态码是200 if (xhr.readyState == 4 && xhr.status == 200) { //把返回的jon数据,显示在div document.getElementById(\"div1\").innerHTML = xhr.responseText; //console.log(\"xhr=\", xhr) var responseText = xhr.responseText; //console.log(\"返回的信息=\" + responseText); //3. 真正的发送ajax请求[http请求] // 老韩再说明如果你POST 请求，再send(\"发送的数据\") xhr.send(); } } </script>3 原生 Ajax 请求问题分析
- 编写原生的 Ajax 要写很多的代码，还要考虑浏览器兼容问题，使用不方便。
- 在实际工作中，一般使用 JavaScript 的库(比如 Jquery) 发送 Ajax 请求，从而解决这个问题
❄️3. JQuery 的 Ajax 请求
JQuery Ajax 操作方法
1.在线文档：
https://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp
2.$.ajax 方法
$.ajax常用参数
url：请求的地址
type :请求的方式 get 或 post
data :发送到服务器的数据。将自动转换为请求字符串格式
success:成功的回调函数
error:失败后的回调函数
dataType:返回的数据类型 常用 json 或 text- 说明：完整的参数参看手册
3.$.get 请求和$.post 请求
$.get和$.post常用参数
url:请求的 URL 地址
data:请求发送到服务器的数据
success:成功时回调函数
type:返回内容格式，xml, html, script, json, text- 说明：
$.get和$.post底层还是使用$.ajax()方法来实现异步请求
4.$.getJSON
$.getJSON常用参数
url:请求发送的哪个 URL
data:请求发送到服务器的数据
success:请求成功时运行的函数- 说明：
$.getJSON底层使用$.ajax()方法来实现异步请求
🌍三. 线程数据共享和安全 -ThreadLocal
❄️1. ThreadLocal基本介绍
1.什么是 ThreadLocal
- ThreadLocal 的作用，可以实现在同一个线程数据共享, 从而解决多线程数据安全问题.
- ThreadLocal 可以给当前线程关联一个数据(普通变量、对象、数组)set 方法 [源码!]
- ThreadLocal 可以像 Map 一样存取数据，key 为当前线程, get 方法
- 每一个 ThreadLocal 对象，只能为当前线程关联一个数据，如果要为当前线程关联多个数据，就需要使用多个 ThreadLocal 对象实例
- 每个 ThreadLocal 对象实例定义的时候，一般为 static 类型
- ThreadLocal 中保存数据，在线程销毁后，会自动释放
- 类图
ThreadLocal threadLocal = new ThreadLocal();
threadLocal.set(dog);
如果希望在同一个线程共享多个对象/数据，就在创建一个 ThreadLocal 对象
//threadLocal2.set(pig);
❄️2. 源码分析
1.set 源码分析 只要明白这个机制，后面的 set get 全部通透
public void set(T value) { //获取当前线程Thread t = Thread.currentThread();//获取当前线程的 ThreadLocal.ThreadLocalMap 属性 threadLocals , 类型是 ThreadLocal 的静态内部类//threadLocals 有 一 个 属 性 Entry[], 类 型ThreadLocal.ThreadLocalMap.Entry //k-> ThreadLocal 对象 v-> 值ThreadLocalMap map = getMap(t); if (map != null)map.set(this, value);//存放这里的 this 就是 ThreadLocal, 可以debug 源码，一目了然elsecreateMap(t, value);//创建 }说明：
1.ThreadLocalMap 对象是和当前 Thread 对象的绑定的属性
2.ThreadLocalMap 对象含有 Entry[] table; 这个 Entry(K,V)
3.这个 key 就是 ThreadLocal 对象, V 就是你要在放入的对象,比如 dog
4.当执行了 了 threadLocal.set(dog) 后，内存布局图为 [看图]
2.Debug 源码图，非常重要
这里涉及到的弱引用，涉及到知识点很多，暂不深入.
结尾：
随着对JSON与Ajax技术的深入探讨，我们不仅揭开了数据交换与异步请求的神秘面纱，也领略了它们在现代Web开发中的巨大作用。这两者的结合，不仅提高了数据处理的效率，也优化了用户的交互体验。
希望通过本文，你能更加熟练地运用JSON与Ajax，为构建更加出色的Web应用贡献力量。让我们一起在技术的道路上，不断前行，共创辉煌。
