【JavaWeb12】数据交换与异步请求：JSON与Ajax的绝妙搭配是否塑造了Web的交互革命?

优质文章学习记录

— 13 min read
【JavaWeb12】数据交换与异步请求：JSON与Ajax的绝妙搭配是否塑造了Web的交互革命?
在这里插入图片描述
文章目录🌍一. 数据交换--JSON❄️1. JSON介绍❄️2. JSON 快速入门❄️3. JSON 对象和字符串对象转换❄️4. JSON 在 java 中使用❄️5. 代码演示🌍二. 异步请求--Ajax❄️1. 基本介绍❄️2. JavaScript 原生 Ajax 请求❄️3. JQuery 的 Ajax 请求🌍三. 线程数据共享和安全 -ThreadLocal❄️1. ThreadLocal基本介绍❄️2. 源码分析

🙋‍♂️ 作者：@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”:值
  3. 映射的集合(对象)用大括号 {} 表示。{“名称 1”:值,“名称 2”:值}
  4. 并列数据的集合（数组）用方括号 [] 表示。 [{“名称 1”:值,“名称 2”:值}, {“名称 1”:值," 名称 2":值}]
  5. 元素值类型：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.应用案例

  1. JSON.stringify(json)功能: 将一个 json 对象转换成为 json 字符串 [简单说名字来源.]Serialize
  2. JSON.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.说明

  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 字符串 的转换

3.应用场景示意图

在这里插入图片描述

❄️5. 代码演示

1.代码演示:演示javabean 和 json字符串的转换

//创建一个gson对象，做完一个工具对象使用Gson gson =newGson();//演示javabean 和 json字符串的转换Book book =newBook(100,"零基础学Java");//1. 演示把javebean -> json字符串String strBook = gson.toJson(book);System.out.println("strBook="+ strBook);//2. json字符串->javabeanBook 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 =newArrayList<>(); bookList.add(newBook(200,"天龙八部")); bookList.add(newBook(300,"三国演义"));//因为把对象,集合转成字符串, 相对比较简单//底层只需要遍历, 按照json格式拼接返回即可String strBookList = gson.toJson(bookList);System.out.println("strBookList= "+ strBookList);
因为把对象,集合转成字符串, 相对比较简单
底层只需要遍历, 按照json格式拼接返回即可

3.代码演示:演示把json字符串 -> list对象
(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类
(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型

Type type =newTypeToken<List<Book>>(){}.getType();List<Book> bookList2 = gson.fromJson(strBookList, type);System.out.println("bookList2= "+ bookList2);
(1) 返回类型的完整路径java.util.List<com.hspedu.json.Book>
(2) gson的设计者，需要得到类型的完整路径，然后进行底层反射
(3) 所以gson 设计者就提供TypeToken, 来搞定.

== 使用TypeToken , 为什么要加 {}==
首先我们看一下TypeToken的源码

 com.google.gson.reflect publicclassTypeToken<T>{finalClass<?superT> rawType;finalType type;finalint hashCode;protectedTypeToken(){this.type =getSuperclassTypeParameter(this.getClass());this.rawType =Types.getRawType(this.type);this.hashCode =this.type.hashCode();}
(1) 如果我们 new TypeToken<List<Book>>()
错误提示 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
(2) 因为TypeToken 的无参构造器是protected ， 而new TypeToken<List<Book>>()就是调用其无参构造器
(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包,是不能直接访问的, 因此报错
(4) 为什么new TypeToken<List<Book>>(){}使用就可以,这里就涉及到匿名内部类的知识.
(5) 当 new TypeToken<List<Book>>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类),继承
(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();

4.代码演示:演示把mapt对象 -> json字符串(与list基本一致)

//把map对象->json字符串 Map<String, Book> bookMap =newHashMap<>(); bookMap.put("k1",newBook(400,"射雕英雄传")); bookMap.put("k2",newBook(500,"西游记")); String strBookMap = gson.toJson(bookMap); System.out.println("strBookMap="+ strBookMap);// 把json字符串 -> map对象// new TypeToken<Map<String, Book>>() {}.getType()=> java.util.Map<java....String,com.hspedu.json.Book> Map<String, Book> bookMap2 = gson.fromJson(strBookMap,newTypeToken<Map<String, Book>>(){}.getType());

🌍二. 异步请求–Ajax

❄️1. 基本介绍

1.Ajax 是什么

  1. AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
  2. Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术
    Ajax 经典应用场景
  3. 搜索引擎根据用户输入关键字，自动提示检索关键字
  4. 动态加载数据，按需取得数据【树形菜单、联动菜单…】
  5. 改善用户体验。【输入内容前提示、带进度条文件上传…】
  6. 电子商务应用。 【购物车、邮件订阅…】
  7. 访问第三方服务。【访问搜索服务、rss 阅读器】
  8. 页面局部刷新

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(){//页面加载后执行functionvar checkButton = document.getElementById("checkButton");//给checkButton绑定onclick checkButton.onclick=function(){//1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]var xhr =newXMLHttpRequest();// 获取用户填写的用户名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(){//如果请求已完成，且响应已就绪, 并且状态码是200if(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 请求问题分析

  1. 编写原生的 Ajax 要写很多的代码，还要考虑浏览器兼容问题，使用不方便。
  2. 在实际工作中，一般使用 JavaScript 的库(比如 Jquery) 发送 Ajax 请求，从而解决这个问题

❄️3. JQuery 的 Ajax 请求

JQuery Ajax 操作方法
1.在线文档：
https://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp


2.$.ajax 方法

  1. $.ajax 常用参数
    url： 请求的地址
    type : 请求的方式 get 或 post
    data :发送到服务器的数据。将自动转换为请求字符串格式
    success: 成功的回调函数
    error: 失败后的回调函数
    dataType: 返回的数据类型 常用 json 或 text
  2. 说明：完整的参数参看手册

3.$.get 请求和$.post 请求

  1. $.get 和 $.post 常用参数
    url: 请求的 URL 地址
    data: 请求发送到服务器的数据
    success: 成功时回调函数
    type: 返回内容格式，xml, html, script, json, text
  2. 说明：$.get 和 $.post 底层还是使用$.ajax()方法来实现异步请求

4.$.getJSON

  1. $.getJSON 常用参数
    url: 请求发送的哪个 URL
    data: 请求发送到服务器的数据
    success: 请求成功时运行的函数
  2. 说明：$.getJSON 底层使用$.ajax()方法来实现异步请求

🌍三. 线程数据共享和安全 -ThreadLocal

❄️1. ThreadLocal基本介绍

1.什么是 ThreadLocal

  1. ThreadLocal 的作用，可以实现在同一个线程数据共享, 从而解决多线程数据安全问题.
  2. ThreadLocal 可以给当前线程关联一个数据(普通变量、对象、数组)set 方法 [源码!]
  3. ThreadLocal 可以像 Map 一样存取数据，key 为当前线程, get 方法
  4. 每一个 ThreadLocal 对象，只能为当前线程关联一个数据，如果要为当前线程关联多个数据，就需要使用多个 ThreadLocal 对象实例
  5. 每个 ThreadLocal 对象实例定义的时候，一般为 static 类型
  6. ThreadLocal 中保存数据，在线程销毁后，会自动释放

类图

在这里插入图片描述

ThreadLocal<Object> threadLocal = new ThreadLocal<>();
threadLocal.set(dog);

如果希望在同一个线程共享多个对象/数据，就在创建一个 ThreadLocal 对象
//threadLocal2.set(pig);

❄️2. 源码分析

1.set 源码分析 只要明白这个机制，后面的 set get 全部通透

publicvoidset(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应用贡献力量。让我们一起在技术的道路上，不断前行，共创辉煌。

Read more

Ubuntu搭建PX4无人机仿真环境(5) —— 仿真环境搭建(以Ubuntu 22.04,ROS2 Humble,Micro XRCE-DDS Agent为例)

Ubuntu搭建PX4无人机仿真环境(5) —— 仿真环境搭建(以Ubuntu 22.04,ROS2 Humble,Micro XRCE-DDS Agent为例)

目录 * 前言 * 1. 准备 * 1.1 下载 PX4 源码 * 方式一： * 方式二： * 1.2 安装仿真依赖 * 1.3 安装 Gazebo * 2. 安装 Micro XRCE-DDS Agent * 3. 编译 PX4 * 4. 通信测试 * 5. 官方 offboard 程序 * 6. offboard 测试 * 参考 前言 本教程基于 ROS2 ，在搭建之前，需要把 ROS2、QGC 等基础环境安装配置完成。但是这块的资料相比较于 ROS1 下的少很多，不利于快速上手和后期开发，小白慎选！ 小白必看：

EgoPoseFormer v2：解决 AR/VR 场景中的第一视角人体动捕问题

目录 一、前言 二、EgoPoseFormer v2 核心内容总结 1. 研究背景与挑战 2. EPFv2 的核心创新 3. 实验结果 4. 应用价值 三、DeepSeek是不是发布过关于图像识别顺序的因果时间注意力机制？         3.1 它们各自是怎么实现的，技术上有没有底层的联系和区别？ 1.DeepSeek的“视觉因果流” (空间逻辑重排) 2.Meta EPFv2的“因果时间注意力” (时间逻辑依赖) 3.底层联系与核心区别 4.总结 四、EPFv2和DeepSeek OCR2和SAM2跟踪的区别和联系         4.1 EPFv2和DeepSeek OCR2和SAM2跟踪的区别和联系是什么？         4.2 技术上的相似性 🧩 不同的应用方式：从“基础模块”到“特定智能”

Unitree Go2机器人ROS2仿真终极指南：从零构建完整四足机器人仿真方案

Unitree Go2机器人ROS2仿真终极指南：从零构建完整四足机器人仿真方案 【免费下载链接】go2_ros2_sdkUnofficial ROS2 SDK support for Unitree GO2 AIR/PRO/EDU 项目地址: https://gitcode.com/gh_mirrors/go/go2_ros2_sdk 在机器人技术快速发展的今天，仿真环境已成为算法验证和系统测试不可或缺的环节。本文将为开发者提供完整的Unitree Go2四足机器人在ROS2框架下的Gazebo仿真集成方案，涵盖从基础部署到高级导航功能的完整实现路径。无论是进行步态算法研究、自主导航开发，还是多机器人协同测试，本指南都将为您提供可操作的技术方案。 两种技术路线：轻量级快速部署 vs 全功能定制开发 💡 轻量级快速部署方案 基于官方SDK的快速集成路径，适合需要快速验证基础功能的开发者： 核心优势： * 5分钟完成环境部署 * 开箱即用的基础运动控制 * 完善的传感器数据流 * 多机器人协同支持 技术实现： # 核心启动文件：go2_
介绍终身机器人学习的数据集LIBERO

介绍终身机器人学习的数据集LIBERO

1 LIBERO的作用 LIBERO是一个用于研究多任务和终身机器人学习中知识迁移的综合基准测试平台，LIBERO是基于robosuite框架构建的。它专注于机器人操作任务，这些任务需要两类知识： 1. 陈述性知识：关于物体和空间关系的知识 2. 程序性知识：关于运动和行为的知识 2 核心原理 任务生成与基准设计 LIBERO提供了一个程序化生成管道，原则上可以生成无限数量的操作任务。系统包含130个任务，分为四个任务套件，每个套件都有受控的分布偏移： * LIBERO-Spatial/Object/Goal：专注于特定类型知识的迁移 * LIBERO-100：包含需要迁移纠缠知识的100个操作任务 学习框架 系统采用模仿学习作为主要学习方法，因为任务使用稀疏奖励函数（任务完成时获得+1奖励）。LIBERO提供高质量的人类遥操作演示数据集用于训练。 算法与策略架构 LIBERO实现了三种视觉运动策略网络： * bc_rnn_policy：基于RNN的行为克隆策略 * bc_transformer_policy：基于Transformer的行为克隆策略