优化网站 优帮云,网站是意识形态建设,怎样做招嫖网站,阿根廷网站后缀文章目录 #x1f30d;一. 数据交换--JSON❄️1. JSON介绍❄️2. JSON 快速入门❄️3. JSON 对象和字符串对象转换❄️4. JSON 在 java 中使用❄️5. 代码演示 #x1f30d;二. 异步请求--Ajax❄️1. 基本介绍❄️2. JavaScript 原生 Ajax 请求❄️3. JQuery 的 Ajax 请求 一. 数据交换--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”:值}并列数据的集合数组用方括号 [] 表示。 [{“名称 1”:值,“名称 2”:值}, {“名称 1”:值, 名称 2:值}]元素值类型string, number, object, array, true, false, null
3.JSON 快速入门案例
!DOCTYPE html
html langen
head
meta charsetUTF-8
titlejson 快速入门案例/title
script typetext/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
h1json 快速入门案例/h1
/body
/html❄️3. JSON 对象和字符串对象转换
1.应用案例
JSON.stringify(json)功能: 将一个 json 对象转换成为 json 字符串 [简单说名字来源.]SerializeJSON.parse( jsonString )功能: 将一个 json 字符串转换成为 json 对象
代码演示
!DOCTYPE html
html langen
head
meta charsetUTF-8
titleJSON 对象和字符串对象转换/title
script typetext/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
h1JSON 对象和字符串对象转换/h1
/body
/html2.注意事项和细节 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.jarGson 是 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字符串-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字符串ListBook 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 TypeTokenListBook() {}.getType();ListBook bookList2 gson.fromJson(strBookList, type);System.out.println(bookList2 bookList2);(1) 返回类型的完整路径java.util.Listcom.hspedu.json.Book (2) gson的设计者需要得到类型的完整路径然后进行底层反射 (3) 所以gson 设计者就提供TypeToken, 来搞定. 使用TypeToken , 为什么要加 {} 首先我们看一下TypeToken的源码 com.google.gson.reflectpublic class TypeTokenT {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 TypeTokenListBook() 错误提示 TypeToken() has protected access in com.google.gson.reflect.TypeToken (2) 因为TypeToken 的无参构造器是protected 而new TypeTokenListBook()就是调用其无参构造器 (3) 根据java基础, 如果一个方法是protected ,而且不在同一个包,是不能直接访问的, 因此报错 (4) 为什么new TypeTokenListBook(){}使用就可以,这里就涉及到匿名内部类的知识. (5) 当 new TypeTokenListBook(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类),继承 (6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super(); 4.代码演示:演示把mapt对象 - json字符串(与list基本一致) //把map对象-json字符串MapString, 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 TypeTokenMapString, Book() {}.getType() java.util.Mapjava....String,com.hspedu.json.BookMapString, Book bookMap2 gson.fromJson(strBookMap,new TypeTokenMapString, 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 typetext/javascriptwindow.onload function () { //页面加载后执行functionvar checkButton document.getElementById(checkButton);//给checkButton绑定onclickcheckButton.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 () {//如果请求已完成且响应已就绪, 并且状态码是200if (xhr.readyState 4 xhr.status 200) {//把返回的jon数据,显示在divdocument.getElementById(div1).innerHTML xhr.responseText;//console.log(xhr, xhr)var responseText xhr.responseText;//console.log(返回的信息 responseText); //3. 真正的发送ajax请求[http请求]// 老韩再说明如果你POST 请求再send(发送的数据)xhr.send();}}/script3 原生 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 中保存数据在线程销毁后会自动释放类图
ThreadLocalObject 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 源码一目了然
else
createMap(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应用贡献力量。让我们一起在技术的道路上不断前行共创辉煌。
