【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

彻底弄懂Web Storage与Cookie：从机制到应用的全方位对比

彻底弄懂Web Storage与Cookie：从机制到应用的全方位对比

彻底弄懂Web Storage与Cookie：从机制到应用的全方位对比 * 引言 * 1. 什么是Cookie？ * Cookie 的核心特性： * Cookie 流程图 * 2. 什么是Web Storage？ * Web Storage 流程图 * 3. 核心区别深度解析（对标选项逐一解读） * a. 存储容量 * b. 网络流量（带宽浪费） * c. 作用域与跨域 * d. API 易用性 * e. 设计初衷 * f. 历史兼容与封装 * 4. 总结对比表 * 5. 应用场景建议 * 什么时候选 Cookie？ * 什么时候选 Web Storage？ * 6. 结语 🌺The Begin🌺点点关注，收藏不迷路🌺 引言 在前端开发中，

DeepSeek-R1-Distill-Qwen-1.5B从零部署：vLLM+Open-WebUI环境搭建教程

DeepSeek-R1-Distill-Qwen-1.5B从零部署：vLLM+Open-WebUI环境搭建教程 1. 为什么这款“小钢炮”值得你花30分钟装一遍 你有没有试过在一台只有4GB显存的旧笔记本上，跑一个数学推理能力接近80分（MATH数据集）、还能写Python函数、支持JSON输出、响应速度超过200 tokens/s的模型？不是幻想——DeepSeek-R1-Distill-Qwen-1.5B 就是这么个“反常识”的存在。 它不是参数堆出来的巨无霸，而是用80万条高质量R1推理链，对通义千问Qwen-1.5B做深度蒸馏后的成果。15亿参数，fp16整模仅3.0 GB；量化到GGUF-Q4后压缩至0.8 GB，连树莓派5或RK3588嵌入式板卡都能稳稳扛住。更关键的是：Apache 2.0协议，商用免费，不设门槛。 这不是“能跑就行”的玩具模型。它在MATH上拿80+、HumanEval超50、推理链保留率85%，日常写脚本、解方程、读文档、调API完全够用。
【昇腾】单张96G Atlas 300I Duo推理卡MindIE+WebUI方式跑32B大语言模型_20250818

【昇腾】单张96G Atlas 300I Duo推理卡MindIE+WebUI方式跑32B大语言模型_20250818

一、Atlas 300I Duo推理卡相关安装步骤 由于显存的瓶颈，48G的Atlas 300I Duo推理卡是没办法跑得起来DeepSeek-R1-Distill-Qwen-32B大语言模型的，这里换了一张96G版本的Atlas 300I Duo推理卡来跑，32B大语言模组除了对显存有要求，对服务器本身的内存条也有要求，在加载的过程中需要较大的内存，这里服务器的内存条内存为128GB 1.1 服务器系统与内核说明 服务器系统版本内核版本内存条内存S5000CKylin V104.19.90-89.11.v2401.ky10.aarch64128GB P.S.服务器安装好系统后先不要执行yum update -y更新，否则内核版本会从4.19.90-89.11升级到4.19.90-89.21，Atlas 300I Duo推理卡的driver包会安装失败 1.2 系统环境说明 本服务器IP地址：192.168.2.71 登录用户：
《Web 自动化测试入门：从概念到百度搜索实战全拆解》

《Web 自动化测试入门：从概念到百度搜索实战全拆解》

一、自动化的核心概念 1. 定义：通过自动方式替代人工操作完成任务，生活中常见案例（自动洒水机、自动洗手液、超市闸机）体现了 “减少人力消耗、提升效率 / 质量” 的特点。 2. 软件自动化测试的核心目的： * 用于回归测试：软件迭代新版本时，验证新增功能是否影响历史功能的正常运行。 3. 常见面试题解析： * 自动化测试不能完全取代人工测试：需人工编写脚本，且功能变更后需维护更新，可靠性未必优于人工。 * 自动化测试不能 “大幅度降低工作量”：仅能 “一定程度” 减少重复工作，需注意表述的严谨性。 二、自动化测试的分类 自动化是统称，包含多种类型，核心分类及说明如下： 分类说明接口自动化针对软件接口的测试，目的是验证接口的功能、性能、稳定性等。UI 自动化 针对软件界面的测试，包含： 1. 移动端自动化：通过模拟器在电脑上编写脚本，测试手机应用；稳定性较差（受设备、