跳到主要内容JavaWeb 数据交换与异步请求：JSON 和 Ajax 详解 | 极客日志Java大前端java
JavaWeb 数据交换与异步请求：JSON 和 Ajax 详解
综述由AI生成Web 开发中的数据交换格式 JSON 与异步请求技术 Ajax。内容包括 JSON 的定义、快速入门、对象与字符串转换及在 Java 中的 Gson 库应用。同时讲解了 Ajax 的基本原理、原生 JavaScript 实现及 jQuery 封装方法。最后探讨了多线程环境下的数据共享与安全机制 ThreadLocal，帮助开发者构建高效、安全的 Web 应用。
小熊软糖17 浏览 
一、数据交换 – JSON
1. JSON 介绍
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言（即 Java、PHP、ASP.NET、Go 等都可以使用 JSON）
- JSON 具有自我描述性，更易理解，非常实用。
2. JSON 快速入门
1. JSON 的定义格式
var 变量名 = {
"k1": value,
"k2": "value",
"k3": [],
"k4": {},
"k5": [{}, {}]
};
2. 解读 JSON 规则
- 映射 (元素/属性) 用冒号
: 表示，'名称':值，注意名称是字符串，因此要用双引号引起来。
- 并列的数据之间用逗号
, 分隔。'名称 1':值，'名称 2':值。
- 映射的集合 (对象) 用大括号
{} 表示。{"名称 1":值,"名称 2":值}。
- 并列数据的集合（数组）用方括号
[] 表示。[{"名称 1":值,"名称 2":值}, {"名称 1":"名称 2":值}]。
- 元素值类型：
string, number, object, array, true, false, null。
3. JSON 快速入门案例
<!DOCTYPE html>
<html lang="en">
json 快速入门案例
json 快速入门案例
<head>
<meta charset="UTF-8">
<title>
</title>
<script type="text/javascript">
var myJson = {
"key1": "教育",
"key2": 123,
"key3": [1, "hello", 2.3],
"key4": {"age": 12, "name": "jack"},
"key5": [
{"k1": 10, "k2": "milan"},
{"k3": 30, "k4": "smith"}
]
};
console.log("key1= " + myJson.key1);
console.log("key3[1]= " + myJson.key3[1]);
console.log("name= " + myJson.key4.name);
console.log("myJson.key5[0]= " + myJson.key5[0]);
console.log("myJson.key5[0].k2= " + myJson.key5[0].k2);
</script>
</head>
<body>
<h1>
</h1>
</body>
</html>
3. JSON 对象和字符串对象转换
1. 应用案例
JSON.stringify(json) 功能：将一个 json 对象转换为 json 字符串。JSON.parse(jsonString) 功能：将一个 json 字符串转换为 json 对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON 对象和字符串对象转换</title>
<script type="text/javascript">
var jsonObj = {"name": "韩顺平教育", age: 10};
console.log(JSON);
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);
var jsonObj2 = JSON.parse(jsonStr);
console.log(jsonObj2);
</script>
</head>
<body>
<h1>JSON 对象和字符串对象转换</h1>
</body>
</html>
2. 注意事项和细节
JSON.stringify(jsonObject) 会返回对应 string，并不会影响原来 json 对象。JSON.parse(string) 函数会返回对应的 json 对象，并不会影响原来 string。- 在定义 Json 对象时，可以使用
' ' 表示字符串。
例如 var json_person = {"name": "jack", "age": 100};
也可以写成 var json_person = {'name': 'jack', 'age': 100};
- 但是在把原生字符串转成 json 对象时，必须使用
""，否则会报错。
例如：var str_dog = "{'name':'小黄狗', 'age': 4}"; 转 json 就会报错。
JSON.stringify(jsonObject) 返回的字符串，都是 "" 表示的字符串，所以在语法格式正确的情况下，是可以重新转成 json 对象的。
4. JSON 在 Java 中使用
1. 说明
- Java 中使用 JSON，需要引入第三方的包
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 = new Gson();
Book book = new Book(100, "零基础学 Java");
String strBook = gson.toJson(book);
System.out.println("strBook=" + strBook);
Book book2 = gson.fromJson(strBook, Book.class);
System.out.println("book2=" + book2);
解读
(1) strBook 就是 json 字符串
(2) Book.class 指定将 json 字符串转成 Book 对象
(3) 底层是反射机制
2. 代码演示：演示把 List 对象 -> JSON 字符串
List<Book> bookList = new ArrayList<>();
bookList.add(new Book(200, "天龙八部"));
bookList.add(new Book(300, "三国演义"));
String strBookList = gson.toJson(bookList);
System.out.println("strBookList= " + strBookList);
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<com.hspedu.json.Book>
(2) Gson 的设计者，需要得到类型的完整路径，然后进行底层反射
(3) 所以 Gson 设计者就提供 TypeToken，来搞定。
使用 TypeToken，为什么要加 {}？
首先我们看一下 TypeToken 的源码。
package 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<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. 代码演示：演示把 Map 对象 -> JSON 字符串（与 List 基本一致）
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);
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 是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术。
- 搜索引擎根据用户输入关键字，自动提示检索关键字。
- 动态加载数据，按需取得数据【树形菜单、联动菜单…】。
- 改善用户体验。【输入内容前提示、带进度条文件上传…】。
- 电子商务应用。【购物车、邮件订阅…】。
- 访问第三方服务。【访问搜索服务、rss 阅读器】。
- 页面局部刷新。
2. Ajax 原理示意图
2. JavaScript 原生 Ajax 请求
1. Ajax 文档
2. 通过下面的问题来引出 Ajax
点击验证用户名，使用 Ajax 方式，服务端验证该用户名是否已经占用了，如果该用户已经占用，以 JSON 格式返回该用户信息。
<script type="text/javascript">
window.onload = function() {
var checkButton = document.getElementById("checkButton");
checkButton.onclick = function() {
var xhr = new XMLHttpRequest();
var uname = document.getElementById("uname").value;
xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
var responseText = xhr.responseText;
xhr.send();
}
}
}
}
</script>
3. 原生 Ajax 请求问题分析
- 编写原生的 Ajax 要写很多的代码，还要考虑浏览器兼容问题，使用不方便。
- 在实际工作中，一般使用 JavaScript 的库（比如 jQuery）发送 Ajax 请求，从而解决这个问题。
3. JQuery 的 Ajax 请求
1. JQuery Ajax 操作方法
2. $.ajax 方法
$.ajax 常用参数
url: 请求的地址type: 请求的方式 get 或 postdata: 发送到服务器的数据。将自动转换为请求字符串格式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: 请求发送的哪个 URLdata: 请求发送到服务器的数据success: 请求成功时运行的函数
- 说明：
$.getJSON 底层使用 $.ajax() 方法来实现异步请求。
三、线程数据共享和安全 - ThreadLocal
1. ThreadLocal 基本介绍
1. 什么是 ThreadLocal
- ThreadLocal 的作用，可以实现在同一个线程数据共享，从而解决多线程数据安全问题。
- ThreadLocal 可以给当前线程关联一个数据（普通变量、对象、数组）set 方法。
- ThreadLocal 可以像 Map 一样存取数据，key 为当前线程，get 方法。
- 每一个 ThreadLocal 对象，只能为当前线程关联一个数据，如果要为当前线程关联多个数据，就需要使用多个 ThreadLocal 对象实例。
- 每个 ThreadLocal 对象实例定义的时候，一般为 static 类型。
- ThreadLocal 中保存数据，在线程销毁后，会自动释放。
ThreadLocal<Object> threadLocal = new ThreadLocal<>();
threadLocal.set(dog);
如果希望在同一个线程共享多个对象/数据，就在创建一个 ThreadLocal 对象
//threadLocal2.set(pig);
2. 源码分析
1. set 源码分析
只要明白这个机制，后面的 set get 全部通透。
public void set(T value) {
Thread t = Thread.currentThread();
ThreadLocalMap map = getMap(t);
if (map != null) map.set(this, value);
else createMap(t, value);
}
说明：
- ThreadLocalMap 对象是和当前 Thread 对象的绑定的属性
- ThreadLocalMap 对象含有 Entry[] table; 这个 Entry(K,V)
- 这个 key 就是 ThreadLocal 对象，V 就是你要放入的对象，比如 dog
- 当执行了 threadLocal.set(dog) 后，内存布局图为 [看图]
2. Debug 源码图，非常重要
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
