JavaWeb 核心：JSON 数据交换与 Ajax 异步请求实战

3. JSON 对象与字符串转换

在实际开发中，经常需要在内存中的对象和网络传输的字符串之间进行转换。

• JSON.stringify(json): 将 JSON 对象序列化为字符串。
• JSON.parse(jsonString): 将 JSON 字符串反序列化为对象。

注意事项：

1. 转换操作不会修改原始对象或字符串。
2. 原生 JS 定义对象时单双引号混用可能没问题，但 JSON.parse() 接收的字符串必须严格使用双引号，否则会报错。

转换演示：

// 一个 json 对象
var jsonObj = {
    "name": "韩顺平教育",
    "age": 10
};

// 把 json 对象转换成为字符串对象
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);

// 把 json 对象的字符串，转换成为 json 对象
var jsonObj2 = JSON.parse(jsonStr);
console.log(jsonObj2);

4. JSON 在 Java 中使用

Java 本身没有内置的 JSON 处理类库，通常引入第三方包如 gson.jar。Gson 是 Google 提供的工具，能高效地在 Java 对象和 JSON 数据之间映射。

常见场景：

• JavaBean 对象与 JSON 字符串互转
• List 集合与 JSON 字符串互转
• Map 集合与 JSON 字符串互转

代码演示：

1. JavaBean 转换

// 创建一个 gson 对象
Gson gson = new Gson();

// 演示 javabean -> json 字符串
Book book = new Book(100, "零基础学 Java");
String strBook = gson.toJson(book);
System.out.println("strBook=" + strBook);

// 演示 json 字符串 -> javabean
Book book2 = gson.fromJson(strBook, Book.class);
System.out.println("book2=" + book2);

这里底层利用了反射机制，通过 Book.class 指定目标类型。

2. List 集合转换

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. 复杂泛型转换 (TypeToken) 当需要将 JSON 字符串转换为泛型集合时，由于 Java 的类型擦除特性，需要借助 TypeToken 来获取完整的类型信息。

Type type = new TypeToken<List<Book>>(){}.getType();
List<Book> bookList2 = gson.fromJson(strBookList, type);
System.out.println("bookList2= " + bookList2);

为什么加 {}？ TypeToken 的构造函数是 protected 的，不能直接实例化。使用匿名内部类 new TypeToken<>(){} 可以创建子类并访问 protected 构造器，同时保留泛型信息供底层反射使用。

4. Map 对象转换 逻辑与 List 类似：

Map<String, Book> bookMap = new HashMap<>();
bookMap.put("k1", new Book(400, "射雕英雄传"));
bookMap.put("k2", new Book(500, "西游记"));

String strBookMap = gson.toJson(bookMap);
Map<String, Book> bookMap2 = gson.fromJson(strBookMap, new TypeToken<Map<String, Book>>(){}.getType());

二、异步请求 – Ajax

1. 基本介绍

Ajax（Asynchronous Javascript And XML）允许浏览器在不刷新整个页面的情况下，向服务器发送请求并获取数据。这显著提升了用户体验，常用于搜索联想、动态加载菜单、购物车更新等场景。

2. JavaScript 原生 Ajax 请求

虽然现代框架层出不穷，但理解原生的 XMLHttpRequest 依然重要。

核心步骤：

1. 创建 XMLHttpRequest 对象。
2. 配置请求（open），设置 URL、方法（GET/POST）、是否异步。
3. 监听状态变化（onreadystatechange）。
4. 发送请求（send）。

示例：用户名验证

window.onload = function() {
    var checkButton = document.getElementById("checkButton");
    checkButton.onclick = function() {
        // 1. 创建 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        
        // 2. 准备发送指定数据
        var uname = document.getElementById("uname").value;
        xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
        
        // 3. 绑定事件监听
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 请求完成且成功，显示结果
                document.getElementById("div1").innerHTML = xhr.responseText;
            }
        };
        
        // 4. 发送请求
        xhr.send();
    };
};

原生写法较为繁琐，且需处理浏览器兼容性问题，因此实际开发中常使用封装好的库。

3. JQuery 的 Ajax 请求

JQuery 简化了 Ajax 调用，提供了更简洁的 API。

常用方法：

• $.ajax(): 通用方法，可配置所有参数。
• $.get() / $.post(): 快捷方式，分别对应 GET 和 POST。
• $.getJSON(): 专门用于处理 JSON 响应。

参数说明：

• url: 请求地址。
• type: 请求方式（get/post）。
• data: 发送的数据。
• success: 成功回调函数。
• dataType: 预期返回的数据类型（json/text/xml）。

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

在 Web 多线程环境下，ThreadLocal 提供了一种线程隔离的解决方案，确保每个线程拥有独立的变量副本。

1. 基本介绍

ThreadLocal 的作用是为当前线程提供一个私有存储空间。它像一个 Map，Key 是当前线程，Value 是存储的对象。每个 ThreadLocal 实例只能关联一个数据，若需多个数据则需创建多个实例。通常定义为 static 类型，线程销毁后数据自动释放。

使用示例：

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

如果需要为同一线程存储多个对象，只需再实例化一个 ThreadLocal 对象。

2. 源码分析

理解 set 方法的底层机制有助于掌握其原理。

public void set(T value) {
    // 获取当前线程
    Thread t = Thread.currentThread();
    // 获取当前线程的 ThreadLocal.ThreadLocalMap 属性
    ThreadLocalMap map = getMap(t);
    if (map != null) {
        map.set(this, value); // this 即当前 ThreadLocal 对象
    } else {
        createMap(t, value);
    }
}

关键点：

1. ThreadLocalMap 是 Thread 类的成员变量，与线程绑定。
2. Entry 数组中，Key 是 ThreadLocal 对象（弱引用），Value 是存储的值。
3. 执行 threadLocal.set(dog) 后，数据实际上存储在所属线程的 ThreadLocalMap 中，而非 ThreadLocal 对象本身。

这种设计保证了不同线程之间的数据互不干扰，有效解决了并发环境下的数据安全问题。